JavaScript DOM 2とDOM 3——「遍歴」の注意点
6752 ワード
「DOM 2レベルトラバースと範囲」モジュールは、DOM構造を補助的に達成するための2つのタイプを定義しています.これらの2つのタイプは、所与の起点に基づいて、DOM構造に対して深さ優先のエルゴード動作を実行することができる. 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:符号ノード 複数のオプションをビットまたはオペレータで組み合わせることができます.
例:
documentのすべての要素を検索します.
前者は前に進むためのものです.後者は後戻りのためのステップです.DOMツリーの最後のノードに遍歴すると、next Node()はnullに戻ります.DOMサブツリーの最後のノードを巡回し、previous Node()がルートノードに戻った後、再度呼び出したらnullに戻ります.
例:
以下のhtmlコードを例に挙げます.
このタイプは、上記のものよりも高級であり、 parent Node():現在のノードの親ノードを巡回します. firstChild():第一のサブノード; lastChild():最後のサブノード; nextSibling():...現在のノードの次の同世代ノード; previous Sibling():...現在のノードの前の同世代ノード;
本方法は、Tree Walkerオブジェクトを作成するためのもので、
以下のhtmlコードを例に挙げます.
NodeIterator
タイプdocument.createNodeIterator()
方法を用いて新しい例を作成する.この方法は4つのパラメータを受信します.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構造を横断するための以下の方法を提供する.例えば: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には対応するタイプと方法がないので、巡回ブラウザを使用するソリューションは非常に珍しい.