[javascript] HTML element 접근하기, 존재여부 확인하기

공부하면서 정리한 내용입니다
참고한 내용은 맨 아래의 링크를 확인해주세요

---

🌘 접근

노드는 text까지 구분한다.

element.parentNode  // 부모 노드
element.childNodes  // 자식 노드 리스트
element.firstChild  // 첫 번째 자식 노드
element.lastChild   // 마지막 자식 노드
element.nextSibling // 다음 형제 노드
element.previousSibling // 이전 형제 노드

element.children[번호]     // 자식 요소
element.firstElementChild // 첫번째 자식 요소
element.previousElementSibling // 이전 요소
element.nextElementSibling     // 다음 요소

▶firstChild 와 firstElementChild 의 비교

🌘 존재확인

자신부터 부모 요소 단위로 출발하여 각 요소가 지정한 선택자에 만족할 때까지 탐색한다(문서 루트까지 이동).
이 중 가장 가깝게 조건에 만족한 부모 요소가 반환되며, 조건에 만족한 요소가 없으면 null 값을 반환한다.

element.closest(node)          // 근처의 parents node 찾기

element.hasChildNodes();      // 하위노드 존재여부 확인

---