글 작성자: 망고좋아
반응형

🎯 DOM 탐색하기

  • DOM에 수행하는 모든 연산은 document 객체에서 시작한다.

📝 트리 상단의 documentElement와 body

  • DOM 트리 상단의 노드들은 document가 제공하는 프로퍼티를 사용해 접근할 수 있습니다.
  • <html> = document.documentElement
    • document를 제외하고 DOM 트리 꼭대기에 있는 문서 노드는 <html> 태그에 해당하는 document.documentElement이다.
  • <body> = document.body
    • document.body는 <body> 요소에 해당하는 DOM 노드로, 자주 쓰이는 노드 중 하나이다.
  • <head> = document.head
    • <head> 태그는 document.head로 접근할 수 있다.

 

📝 childNodes, firstChild, lastChild로 자식 노드 탐색하기

  • 자식 노드(child node, children) : 바로 아래의 자식 요소를 나타낸다. 자식 노드는 부모 노드의 바로 아래에서 중첩 관계를 만든다. <head>와 <body>는 <html>요소의 자식 노드이다.
  • 후손 노드(descendants) : 중첩 관계에 있는 모든 요소를 의미한다. 자식 노드, 자식 노드의 모든 자식 노드 등이 후손 노드가 된다.
  • childNodes 컬렉션은 텍스트 노드를 포함한 모든 자식 노드를 담고 있다.
<html>
<body>
  <div>시작</div>

  <ul>
    <li>항목</li>
  </ul>

  <div>끝</div>

  <script>
    for (let i = 0; i < document.body.childNodes.length; i++) {
      alert( document.body.childNodes[i] ); // Text, DIV, Text, UL, ... , SCRIPT
    }
  </script>
  ...추가 내용...
</body>
</html>
  • firstChild와 lastChild 프로퍼티를 이용하면 첫 번째, 마지막 자식 노드에 빠르게 접근할 수 있다.

 

📝 DOM 컬렉션

  • childNodes는 배열이 아닌 반복 가능한(iterable, 이터러블) 유사 배열 객체인 컬렉션(collection)이다.
  • for..of를 사용할 수 있다. 
    • for (let node of document.body.childNodes) {
  alert(node); // 컬렉션 내의 모든 노드를 보여줍니다.
}
  • 배열이 아니기 때문에 배열 메서드를 쓸 수 없다. 
    • alert(document.body.childNodes.filter); // undefined (filter 메서드가 없습니다.)
  • 컬렉션에 배열 메서드를 사용하고 싶다면 Array.from을 적용하자! 
    • alert( Array.from(document.body.childNodes).filter ); // function

📕 DOM 컬렉션은 읽는 것만 가능하다.

  • DOM 컬렉션을 탐색용 프로퍼티는 읽기 전용이다. childNodes[i] = ...를 이용해 자식 노드를 교체하는 게 불가능하다.

 

📝 DOM Traversing (탐색)

단일 노드

  • parentNode : 직계 부모 노드
  • firstChild : 첫 번째 자식 노드
    • firstChild : element, text, comment 노드 모두를 대상으로 함
    • firstElementChild : 오직 element 노드 만을 대상으로 함
  • lastChild : 마지막 자식 노드
  • previousSibling : 이전 형제 노드
  • nextSibling : 다음 형제 노드

 

element 노드 만을 대상

  • childElementCount
  • firstElementChild : 첫 번째 자식 element node
  • lastElementChild : 마지막 자식 element node
  • previousElementSibling : 이전 형제 element node
  • nextElementSibling : 다음 형제 element node
  • parentElement : 부모 요소

 

노드 리스트 (컬렉션)

  • childNodes : 직계 자식들
  • children : 해당 요소의 자식 노드 중 element 노드만을 가리킨다.

 

🏷 요약

  • 모든 노드에 적용 가능한 parentNode, childNodes, firstChild, lastChild, previousSibling, nextSibling
  • 요소 노드에만 적용 가능한 parentElement, children, firstElementChild, lastElementChild, previousElementSibling, nextElementSibling

 

📌 참고

반응형

'프로그래밍 > JavaScript' 카테고리의 다른 글

[JavaScript] 자바스크립트 속성과 프로퍼티  (0) 2021.11.09
[ JavaScript] 자바스크립트 주요 노드 프로퍼티  (0) 2021.11.09
[JavaScript] 자바스크립트 DOM 트리  (0) 2021.11.09
[JavaScript] 자바스크립트 문자열 거꾸로 출력하기  (0) 2021.11.06
[JavaScript] 자바스크립트 소수 판별하기(feat. 반복문, 에라토스네테스의 체)  (0) 2021.11.06

티스토리툴바