[Javascript-todos] 부모 노드 찾기

과거 코드

<ul>
	<li data-id="123456">
    	<div>
        	<button> 취소 </button>
        </div>
    </li>
<ul>

이렇게 구성된 html 요소에서 button을 클릭했을 때 li의 id를 아래와 같이 구했었다.

const $li = e.target.parentElement.parentElement;
const li_id = Number($li.dataset.id);

현재 클릭된 e.target 이 button 엘리먼트이므로 이것의 부모(div)의 부모(li)엘리먼트를 가져와서 그것의 id를 가져오는 방식으로 id를 구했었다.

하지만 button이 요소의 하위로 가거나 상위로 갈 수도 있는데 이렇게 하드코딩으로 구하는 방식은 아름답지도 않고 재사용하기도 힘들다!

todosmvc의 예제를 참고했다.

수정된 코드

// helper.js
function findParentElement(element, tagName) {
		if (!element.parentNode) {
			return;
		} // 부모 노드가 없으면 return한다
		
  		if (element.parentNode.tagName.toLowerCase() === tagName.toLowerCase()) {
			return element.parentNode;
		} // 부모 노드의 태그 이름이 인자로 전달된 태그 이름과 같다면 부모노드를 return 한다.
		
  		return findParentElement(element.parentNode, tagName);
  		// 부모 노드를 찾을 때까지 재귀적으로 호출한다!
  
	};

일단 외부에 부모 노드를 찾는 함수를 정의해주고

// view.js
const item_id = function (element) {
		const li = findParentElement(element, 'li'); // li태그를 찾아줘!
		return parseInt(li.dataset.id, 10); // 10진수로 숫자 변환
};

view 단에서 이렇게 사용하면 된다!