DOM 트리워커 API

DOM 트리워커 API

TreeWalker API를 사용하면 개발자가 DOM 트리를 탐색하는 데 사용할 수 있는 treeWalker 개체를 만들 수 있습니다. treeWalker에는 DOM 트리 내에서 treeWalker의 현재 위치를 이동하고 현재 노드에 대한 정보를 반환하는 데 사용할 수 있는 여러 메서드가 있습니다.

TreeWalker API는 DOM 트리를 탐색하기 위한 강력한 도구입니다. 이를 통해 트리 주위를 쉽게 이동할 수 있고 만나는 노드에 대한 정보를 얻을 수 있습니다. API는 또한 노드의 다음 또는 이전 형제를 가져오거나 상위 노드를 가져오는 것과 같은 일반적인 작업을 위한 여러 가지 편리한 방법을 제공합니다.

TreeWalker API 사용 예

var treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_ELEMENT,
  { acceptNode: function(node) {
      return node.tagName === 'DIV' ?
        NodeFilter.FILTER_ACCEPT :
        NodeFilter.FILTER_SKIP;
  }},
  false
);

while(treeWalker.nextNode()) {
  console.log(treeWalker.currentNode.tagName);
}

위의 코드는 TreeWalker를 만든 다음 DOM 트리를 탐색하는 데 사용됩니다. TreeWalker는 DIV 요소인 노드만 수락하므로 다른 유형의 노드는 건너뜁니다. 트리를 통과할 때 만나는 각 DIV 노드의 태그 이름을 출력합니다. 이것은 문서에서 모든 DIV 요소를 찾는 유용한 방법입니다.

var treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_ELEMENT,
  { acceptNode: function(node) {
      // Check if the node is a DIV, and if it has the "my-class" class.
      return node.tagName === 'DIV' && node.classList.contains('my-class') ?
        NodeFilter.FILTER_ACCEPT :
        NodeFilter.FILTER_SKIP;
  }},
  false
);

while(treeWalker.nextNode()) {
  // Do something with the node, such as add a border.
  treeWalker.currentNode.style.border = '1px solid black';
}

위의 코드는 이전 예제와 동일하지만 "my-class" 클래스가 있는 DIV 노드만 허용합니다. 그런 노드를 만나면 1px 검은색 테두리가 추가됩니다. 이것은 TreeWalker API로 수행할 수 있는 작업의 간단한 예일 뿐입니다.

(거의) 모두 녹색

TreeWalker API를 사용할 때의 문제 중 하나는 현재 노드를 쉽게 추적할 수 없다는 것입니다. API가 특정 노드를 찾는 방법을 제공하지 않기 때문입니다. 대신 트리 주위를 이동하는 방법을 사용해야 하므로 까다로울 수 있습니다. 또 다른 문제는 API가 브라우저에서 잘 지원되지 않기 때문에 폴리필을 사용해야 할 수도 있다는 것입니다.

요약

TreeWalker API는 DOM 트리를 탐색하기 위한 강력한 도구입니다. 트리 주위를 이동하고 현재 노드에 대한 정보를 얻기 위한 여러 가지 방법을 제공합니다. API는 또한 일반적인 작업을 위한 몇 가지 편리한 방법을 제공합니다. 그러나 API는 사용하기 어려울 수 있으며 브라우저에서 잘 지원되지 않습니다.

DOM 데이터 검색과 관련된 다른 흥미로운 API는 다음과 같으며 앞으로 다룰 것입니다.

• DOM 범위 API
• DOM NodeIterator API