230608 TIL - parentNode

parentNode 현재 노드의 부모 노드를 선택한다.

 

이번 프로젝트에선 아래와 같이 클릭된 노드에서 부모 노드로 올라간 뒤,

다시 quertySelector로 crtTxtArea 클래스를 찾아 내려갔고, 그 textarea에 입력된 내용을 가져왔다.

exVar.addEventListener('click', event => {
console.log(event.target.parentNode.querySelector('.crtTxtArea').value);
})

 

closest()와의 차이

closest('#selector')는 자신의 부모 태그들 중에서 selector를 기준으로 찾아갈 수 있다.

하지만 parentnode는 자신의 바로 부모 노드만을 찾아간다.

 

이번 프로젝트에서 closest()는 아래와 같이 클릭된 노드에서 부모 중 가장 가까운 <li>를 찾아가 id를 받아왔다.

이 ID는 로컬 스토리지에 key와 구분 용 ID 로 사용되었다.

exVar.addEventListener('click', event => {
console.log(event.target.closest('li').id);
})

 

exVar.addEventListener('click', event => {

const obj = {
            id: event.target.closest('li').id,
            cmt: event.target.parentNode.querySelector('.crtTxtArea').value,
            movieId: idParams,
            cmtKey: event.target.closest('li').id
            };

localStorage.setItem(`${event.target.closest('li').id}`, JSON.stringify(obj));
// 객체 obj를 문자열 타입으로 바꿔 로컬 스토리지에 저장했다.

});

자식 노드를 가져올 수 있는 childrenNode도 있다고 한다.

기록해뒀다가 나중에 사용할 수 있도록 하자.

 

[참조]

https://velog.io/@ysg213/parentNode-parentElement-childNodes-children%EC%9D%98-%EC%B0%A8%EC%9D%B4

parentNode / parentElement, childNodes / children의 차이

https://dev-dain.tistory.com/128

parentNode-parentElement 차이, children과 childNodes 차이

노드와 태그(element)의 차이

https://hianna.tistory.com/711

[Javascript] node와 element의 차이