자바 스크립트로 DOM 트리를 필터링하고 트래버스하는 방법

JavaScript API가 있다는 것을 알고 계셨습니까? 노드를 걸러 내고 반복한다. 우리는 DOM 트리에서 원합니까? 사실, 하나가 아니라 두 가지 API가 있습니다. NodeIterator 과 TreeWalker. 그것들은 몇 가지 유용한 차이점을 가지고 서로 매우 유사합니다. 둘 다 할 수있다. 노드 목록을 리턴한다. 주어진 루트 노드 아래에있는 사전 정의 된 필터 규칙 및 / 또는 사용자 정의 필터 규칙 그들에게 적용.

API에서 사용할 수있는 미리 정의 된 필터는 다른 종류의 노드를 목표로 삼다. 텍스트 노드 또는 요소 노드, 사용자 정의 필터 (우리가 추가 한)와 같은 무리를 더 필터링하십시오., 예를 들어 특정 내용을 가진 노드를 찾는다. 반환 된 노드 목록은 다음과 같습니다. 반복 가능한, 즉, 반복 된, 목록의 모든 개별 노드를 사용하여 작업 할 수 있습니다..

어떻게 사용 하는가? NodeIterator API

에이 NodeIterator 객체는 createNodeIterator () 방법 문서 인터페이스. 이 방법 3 개의 인자를 취한다.. 첫 번째 것은 필수입니다. 그것”님의 루트 노드 우리가 걸러 내고 자하는 모든 노드를 가지고있는.

두 번째 및 세 번째 인수는 선택 과목. 그들은 사전 정의 된 필터 및 사용자 정의 필터, 각기. 미리 정의 된 필터는 다음과 같이 사용할 수 있습니다. 상수 NodeFilter 목적.

예를 들어, NodeFilter.SHOW_TEXT 상수는 두 번째 매개 변수로 추가됩니다. 루트 노드 아래의 모든 텍스트 노드 목록. NodeFilter.SHOW_ELEMENT 돌아올거야. 요소 노드 만. 전체 목록보기 모든 사용 가능한 상수.

세 번째 인수 (맞춤 필터)는 필터를 구현하는 함수.

여기에 예제 코드 스 니펫:

        
표제
 
 이것은 페이지 래퍼입니다. 
여보세요
 
잘 지냈어요??
 
 txt 어떤 링크    

우리가 원한다고 가정 할 때 내부에있는 모든 텍스트 노드의 내용을 추출한다. #싸개 div, 이것이 우리가 사용하는 방법입니다. NodeIterator:

 var div = document.querySelector ( '# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT); while (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * 콘솔 출력 [Log] 이것은 페이지 래퍼입니다 [Log] Hello [Log] [Log] 안녕하세요? [로그] * / 

그만큼 nextNode () 방법 NodeIterator API 반복 가능한 텍스트 노드 목록에서 다음 노드를 반환합니다.. 우리가 그것을 사용할 때 동안 루프를 사용하여 모든 텍스트 노드의 트리밍 된 내용을 콘솔에 기록합니다. 그만큼 referenceNode 의 자산 NodeIterator 반복자가 현재 연결되어있는 노드를 반환합니다..

출력에서 볼 수 있듯이 내용에 공백이있는 텍스트 노드가 있습니다. 우리는 할 수있다. 사용자 정의 필터를 사용하여 이러한 비어있는 내용 표시 방지:

 var div = document.querySelector ( '# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT, function (node) return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;); while (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * 콘솔 출력 [Log] 이것은 페이지 래퍼입니다 [Log] Hello [Log] 안녕하세요? * / 

사용자 정의 필터 기능 상수를 반환합니다. NodeFilter.FILTER_ACCEPT텍스트 노드가 하늘이 아닌 경우, iterator가 반복 될 노드 목록에 해당 노드가 포함되도록합니다. 반대로, NodeFilter.FILTER_REJECT 상수는 빈 텍스트 노드 제외 반복 가능한 노드 목록에서.

어떻게 사용 하는가? TreeWalker API

전에 언급했듯이 NodeIterator 과 TreeWalker API는 서로 비슷하다..

TreeWalker 를 사용하여 만들 수 있습니다. createTreeWalker () 방법 문서 인터페이스. 이 방법은 createNodeFilter (), 3 개의 인자를 취한다.: 루트 노드, 사전 정의 된 필터 및 사용자 정의 필터.

우리가 사용 TreeWalker API 대신 NodeIterator 이전 코드 스 니펫은 다음과 같습니다.

 var div = document.querySelector ( '# wrapper'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_TEXT, function (node) return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;); while (treeWalker.nextNode ()) console.log (treeWalker.currentNode.nodeValue.trim ());  / * 출력 [Log] 이것은 페이지 래퍼입니다 [Log] Hello [Log] 안녕하세요? * / 

대신에 referenceNode, 그만큼 currentNode 재산 TreeWalker API를 사용하여 반복자가 현재 접속되어있는 노드에 액세스한다. 여기에 덧붙여 nextNode () 방법, Treewalker 다른 유용한 방법이 있습니다. 그만큼 previousNode () 방법 NodeIterator) 이전 노드를 반환합니다. 반복자가 현재 고정되어있는 노드의.

비슷한 기능이 parentNode (), firstChild (), 막내(), previousSibling (), 과 nextSibling () 행동 양식. 이러한 메소드는 다음과 같습니다. 오직 TreeWalker API.

다음은 코드 예제입니다. 노드의 마지막 자식을 출력한다. 반복자는 다음에 고정됩니다.

 var div = document.querySelector ( '# wrapper'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_ELEMENT); console.log (treeWalker.lastChild ()); / * 출력 [로그] 
잘 지냈어요??
 * / 

선택할 API

선택 NodeIterator API, 당신이 단순한 반복자가 필요하다. 선택한 노드를 필터링하고 반복합니다. 그리고 TreeWalker API, 당신이 필터링 된 노드의 패밀리에 액세스해야합니다., 그들의 형제 자매와 같은.