JavaScript DOM 2とDOM 3——「遍歴」の注意点

6752 ワード

「DOM 2レベルトラバースと範囲」モジュールは、DOM構造を補助的に達成するための2つのタイプを定義しています.これらの2つのタイプは、所与の起点に基づいて、DOM構造に対して深さ優先のエルゴード動作を実行することができる.NodeIteratorタイプdocument.createNodeIterator()方法を用いて新しい例を作成する.この方法は4つのパラメータを受信します.
  • root:検索の起点となるツリーの中のノードが欲しいです.
  • whatToShow:どのノードにアクセスするべきかを示す数字コード.
  • filter:NodeFilterオブジェクト、または関数(ある特定のノードを受け入れるべきか拒否すべきかを示す関数)です.
  • entityReferenceExpansion:ブール値は、拡張エンティティ参照の有無を示す.HTMLページでは使えません.
  • what Toshow:
  • NodeFilter.SHOW_ALL:あらゆる種類のノード;
  • NodeFilter.SHOW_EEMENT:元素
  • NodeFilter.SHOW_ATTRIBUTE:特性;
  • NodeFilter.SHOW_TEXT:テキスト
  • NodeFilter.SHOW_COMMENT;
  • NodeFilter.SHOW_DOCUMENT;
  • NodeFilter.SHOW_DOCUMENT_タイプ
  • また、HTMLページには役に立たないものがいくつかあります.
  • NodeFilter.SHOW_CDATA_SECTION
  • NodeFilter.SHOW_ENTITY_REFERENCE:エンティティ参照ノード;
  • NodeFilter.SHOW_ENTITY:エンティティノード;
  • NodeFilter.SHOW_PROCESSING_INSTRUCTION:コマンドノードを処理する.
  • NodeFilter.SHOW_DOCUMENT_FRAGMENT;
  • NodeFilter.SHOW_NOTATION:符号ノード
  • 複数のオプションをビットまたはオペレータで組み合わせることができます.
    var whatToShow = NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT;
    
    filtercreateNodeIterator()方法のfilterパラメータを使用して、カスタマイズされたNodefilterオブジェクトを指定することができ、各Nodefilterオブジェクトは一つの方法しかなく、訪問すべきノードはNodeFilter.FILTER_ACCEPTに戻る.アクセスすべきでないノードはNodeFilter.FILTER_SKIPに戻る.acceptNode()方法を含むオブジェクトを作成することができます.
    var filter = {
        acceptNode: function(node) {
            return node.nodeName.toLowerCase() == "p" ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
        }
    };
    
    acceptNode()方法と同様の関数を作成することもできる.
    var filter = function(node) {
        return node.nodeName.toLowerCase() == "p" ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
    }
    
    フィルタを指定しないとnullに入るべきです.
    例:
    documentのすべての要素を検索します.
    var iterator = document.createNodeIterator(document.body, NodeFilter.SHOW_ELEMENT, null);
    var node = iterator.nextNode();
    console.log(node); //HTMLBodyElement
    
    documentのすべてのp要素を検索します.
    var filter = {
        acceptNode: function(node) {
            return node.nodeName.toLowerCase() == "p" ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
        }
    };
    var iterator = document.createNodeIterator(document.body, NodeFilter.SHOW_ALL, filter);
    var node = iterator.nextNode();
    console.log(node); //HTMLParagraphElement
    
    document内のすべてのh 1要素を検索します.
    var filter = function(node) {
        return node.nodeName.toLowerCase() == "h1" ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
    }
    var iterator = document.createNodeIterator(document.body, NodeFilter.SHOW_ALL, filter);
    var node = iterator.nextNode();
    console.log(node); //HTMLHeadingElement
    
    nextNode()方法とpreviousNode()方法
    前者は前に進むためのものです.後者は後戻りのためのステップです.DOMツリーの最後のノードに遍歴すると、next Node()はnullに戻ります.DOMサブツリーの最後のノードを巡回し、previous Node()がルートノードに戻った後、再度呼び出したらnullに戻ります.
    例:
    以下のhtmlコードを例に挙げます.
    
    

    Hello world!

    • List item 1
    • List item 2
    • List item 3
    div要素のすべてのノードを巡回
    var div = document.getElementById("div1");
    var iterator = document.createNodeIterator(div, NodeFilter.SHOW_ELEMENT, null, false);
    var node = iterator.nextNode();
    while(node !== null){
        console.log(node.nodeName); //     
        node = iterator.nextNode();
    }
    // [L] repetition.html:24 DIV 
    // [L] repetition.html:24 P 
    // [L] repetition.html:24 B 
    // [L] repetition.html:24 UL 
    // [L] repetition.html:24 LI 
    // [L] repetition.html:24 LI 
    // [L] repetition.html:24 LI 
    
    divのすべてのli要素のテキストを巡回します.
    var div = document.getElementById("div1");
    var filter = function(node) {
        if (node.nodeName.toLowerCase() == "li") {
            return NodeFilter.FILTER_ACCEPT;
        } else {
            return NodeFilter.FILTER_SKIP;
        }
    };
    var iterator = document.createNodeIterator(div, NodeFilter.SHOW_ELEMENT, filter, false);
    var node = iterator.nextNode();
    while (node !== null) {
        console.log(node.firstChild.nodeValue);
        node = iterator.nextNode();
    }
    // [L] repetition.html:31 List item 1 
    // [L] repetition.html:31 List item 2 
    // [L] repetition.html:31 List item 3 
    
    TreeWalkerタイプ
    このタイプは、上記のものよりも高級であり、nextNode()およびpreviousNode()を含む同じ機能に加えて、このタイプは、異なる方向にDOM構造を横断するための以下の方法を提供する.例えば:
  • parent Node():現在のノードの親ノードを巡回します.
  • firstChild():第一のサブノード;
  • lastChild():最後のサブノード;
  • nextSibling():...現在のノードの次の同世代ノード;
  • previous Sibling():...現在のノードの前の同世代ノード;
  • createTreeWalker()方法
    本方法は、Tree Walkerオブジェクトを作成するためのもので、document.createTreeWalker()方法は4つのパラメータを受信し、document.createNodeIterator()方法と一致する.currentNode属性のうち、すべてのエルゴード方法が前のエルゴードで戻ってきたということです.この属性を設定することによって、巡回中のノードを変更することもできます.例えば:
    var div = document.getElementById("div1");
    var walker = document.createTreeWalker(div, NodeFilter.SHOW_ELEMENT, null, false);
    var node = walker.currentNode; //currentNode       Div
    console.log(node.nodeName); //DIV
    walker.currentNode = document.getElementsByTagName("li")[0];
    node = walker.currentNode;
    console.log(node.firstChild.nodeValue); //List item 1
    var secLiElem = walker.nextSibling();
    console.log(secLiElem.firstChild.nodeValue); //List item 2
    
    例:
    以下のhtmlコードを例に挙げます.
    
    

    Hello world!

    • List item 1
    • List item 2
    • List item 3
    div要素のすべてのノードを巡回
    var div = document.getElementById("div1");
    var walker = document.createTreeWalker(div, NodeFilter.SHOW_ELEMENT, null, false);
    var node = walker.nextNode();
    while(node !== null){
        console.log(node.nodeName);
        node = walker.nextNode();
    }
    // [L] repetition.html:24 P 
    // [L] repetition.html:24 B 
    // [L] repetition.html:24 UL 
    // [L] repetition.html:24 LI 
    // [L] repetition.html:24 LI 
    // [L] repetition.html:24 LI 
    
    div要素中のすべてのli要素中のテキストを巡回します.
    var div = document.getElementById("div1");
    var walker = document.createTreeWalker(div, NodeFilter.SHOW_ELEMENT, null, false);
    var node = walker.currentNode; //currentNode       Div
    walker.firstChild(); //  p
    walker.nextSibling(); //  ul
    node = walker.firstChild(); //  li
    while(node !== null){
        console.log(node.firstChild.nodeValue);
        node = walker.nextNode();
    }
    // [L] repetition.html:27 List item 1 
    // [L] repetition.html:27 List item 2 
    // [L] repetition.html:27 List item 3 
    
    IEには対応するタイプと方法がないので、巡回ブラウザを使用するソリューションは非常に珍しい.