[DOM] NODE

jangws·2022년 2월 20일
1

DOM

목록 보기
2/5

NODE

  • DOM(Document Object Model, 문서 개체 모델)은 자바스크립트 NODE 개체의 계층화된 트리다.
  • Node는 자바스크립트 생성자 함수에 불과하다. 따라서 Node는 자바스크립트의 다른 개체들처럼 Object.prototype으로부터 상속받는다.

노드 개체 유형

  • 노드 유형 형식은 모두 대문자이며 _로 단어를 구분한다. 이는 브라우저 환경에서 Node 개체의 속성으로 기록되며, 상수로 표현된다.
  • 이러한 nodeType 상수는 단지 특정한 자바스크립트 인터페이스/생성자로부터 생성되는 노드가 유형을 기술하는 데 사용되는 숫자 분류에 불과하다.
// nodeType
console.log(Node.ELEMENT_NODE) // 1
console.log(Node.ATTRIBUTE_NODE) // 2
console.log(Node.TEXT_NODE) // 3
console.log(Node.COMMENT_NODE) // 8
console.log(Node.DOCUMENT_NODE) // 9
console.log(Node.DOCUMENT_TYPE_NODE); // 10
  • 해당 노드 개체의 루프를 돌면서 모든 속성 및 메서드(상속받은 것 포함) 이름를 확인
<!DOCTYPE html>
<html lang="ko">
  <body>
    <div></div>

    <script>
      const nodeAnchor = document.querySelector("div");

      for (const key in nodeAnchor) {
        console.log(key);
      }
    </script>
  </body>
</html>
  • 노드의 유형과 이름 식별
console.log(document.doctype.nodeName, document.doctype.nodeType) // html 10

console.log(document.nodeName, document.nodeType) // #document 9

console.log(document.createDocumentFragment().nodeName, document.createDocumentFragment().nodeType) // #document-fragment 11

console.log(document.querySelector('body').nodeName, document.querySelector('body').nodeType) // BODY 1

console.log(document.querySelector('body').firstChild.nodeName, document.querySelector('body').firstChild.nodeType) // #text 3
  • innerHTML 속성은 문자열 내에서 발견된 HTML 요소를 실제 DOM 노드로 변환하는 반면, textContent는 텍스트 노드를 생성하는 데만 사용 가능하다.즉, HTML 요소를 포함하는 문자열을 textContent에 전달하면, 단순히 텍스트로만 출력된다.

노드 제거 또는 교체

  • remoeChild(), replaceChild()
  • DOM에서 노드를 제거 또는 교체하는 과정은 여러 단계로 이루어져 있다. 먼저 삭제하고자 하는 노드를 선택한다. 다음으로 parentNode 속성을 이용하여 부모 노드에 대한 접근을 얻는다. 부모 노드에서 삭제할 노드에 대한 참조를 전달하여 removeChild(), replaceChild() 메서드를 호출한다.

노드 컬렉션(NodeList, HTMLCollection)

NodeList

  • NodeList는 선택된 노드 그룹이나 사전에 정의된 노드 집합에 대한 유사 배열 리스트다. 예를 들어, document.querySelectorAll()이나 childNodes 속성을 통해 NodeList를 얻을 수 있다.
  • NodeList 등 컬렉션은 리스트 내의 요소 개수를 나타내는 length 속성을 가진다.
<!DOCTYPE html>
<html lang="ko">
  <body>
    <ul>
      <li>Hi</li>
      <li>Bye</li>
    </ul>
    <script>
      const ulElementChildNodes = document.querySelector("ul").childNodes;

      console.log(ulElementChildNodes);
      // NodeList(5) [text, li, text, li, text]

      Array.prototype.forEach.call(ulElementChildNodes, function (item) {
        console.log(item); // 배열 내의 각 노드 항목 출력
      });
    </script>
  </body>
</html>
  • call(), apply() 또는 Array.from()을 사용하여 유사 배열 리스트인 노드 컬렉션을 배열로 변환할 수 있고, 이를 통해 노드 컬렉션도 Array 개체가 제공하는 메서드들을 접근할 수 있게 된다.

DOM 내의 노드 탐색

다음 속성을 통해 DOM을 탐색하여 다른 노드에 대한 참조를 얻을 수 있다.

  • parentNode, firstChild, lastChild, nextSibling, previousSibling, childNodes

위 속성은 element 노드뿐만 아니라 text나 comment 노드도 탐색하는데, 이를 원치 않는다면 다음 속성을 사용하여 text와 comment 노드를 무시하고 DOM을 탐색할 수 있다.

  • parentElement, firstElementChild, lastElementChild, nextElementChild, previousElementSibling, children,

Node 위치 및 동일 여부 확인

  • contains()나 compareDocumentPosition()으로 DOM 트리 내의 Node 위치를 확인할 수 있다.

  • isEqualNode() 메서드를 호출하면 매개변수로 전달하는 노드와 동일한지 확인할 수 있다. 두 노드가 동일하려면 여러 조건(형식, nodeName, localName, namespaceURI, prefix, nodeValue, NameNodeMaps, childNodes NodeLists 등 동일)이 만족되어야 한다.

Reference

  • DOM을 깨우치다(코디 린들리 / O'REILLY)
  • 위키백과

0개의 댓글