DOM => 순회

나무 걷기

TreeWalker 는 생성자와 유사한 인터페이스로 DOM 트리의 노드를 재귀 적으로 쉽게 필터링 할 수 있습니다.

다음 코드는 페이지의 모든 Text 노드 값을 연결하고 결과를 인쇄합니다.

let parentNode = document.body;
let treeWalker = document.createTreeWalker(parentNode, NodeFilter.SHOW_TEXT);

let text = "";
while (treeWalker.nextNode())
    text += treeWalker.currentNode.nodeValue;

console.log(text); // all text in the page, concatenated

.createTreeWalker 함수의 서명은 다음과 같습니다.

createTreeWalker(root, whatToShow, filter, entityReferenceExpansion)

매개 변수	세부
뿌리	하위 트리의 '루트'노드가 traveresed됩니다
whatToShow	선택 사항, 표시 할 노드 유형을 지정하는 부호없는 long 자세한 정보는 NodeFilter를 참조하십시오.
필터	선택 사항, 노드가 whatToShow 검사를 통과 한 후 고려해야하는지 여부를 결정하는 acceptNode 메소드가있는 객체
entityReferenceExpansion	Obsolete and optional, EntityReference를 버릴 때 전체 하위 트리를 동시에 버려야하는지 여부를 나타내는 부울 플래그입니다.

노드 반복

NodeIterator 인터페이스는 DOM 트리에서 노드를 반복하는 메소드를 제공합니다.

다음과 같은 문서를 제공합니다.

<html>
<body>
  <section class="main">
    <ul>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
    </ul>
  </section>
</body>
</html>

<li> 요소를 가져 오는 반복자를 상상할 수 있습니다.

let root = document.body;
let whatToShow = NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT;
let filter = (node) => node.nodeName.toLowerCase() === 'li' ? 
  NodeFilter.FILTER_ACCEPT : 
  NodeFilter.FILTER_REJECT;
let iterator = document.createNodeIterator(root, whatToShow, filter);
var node;
while (node = iterator.nextNode()) {
  console.log(node);
}

Mozilla 개발자 네트워크에서 제공하는 document.createNodeIterator() 문서에서 모질라 기고자 가 제공 한 예제에서 수정 한 예제 document.createNodeIterator() CC-by-SA 2.5에 따라 사용 허가).

이렇게하면 다음과 같은 내용이 기록됩니다.

<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>

이것은 TreeWalker iterface와 유사하지만 nextNode() 및 previousNode() 기능 만 제공합니다.

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow

DOM
순회

수색…

나무 걷기

노드 반복