聲明NodeFilter在IE中不能使用
第一種方法:使用NodeIterator
可以用document對象的createNodeIterator()方法來創建NodeIterator對象，基本形式如下：
var iterator = document.createNodeIterator(root, whatToShow, filter,entityReferenceExpansion);
用到的四個參數意義如下：
1、root:從樹中的哪個節點開始搜索；
2、whatToShow:一個數值代碼，代表哪些節點需要搜索；
3、filter:NodeFilter對象，用來決定需要忽略哪些節點；
4、entityReferenceExpansion:布爾值，表示是否需要擴展實體引用；
whatToShow參數可以有下列這些常量或其組合的取值：
1、NodeFilter.SHOW_ALL：搜索所有節點；
2、NodeFilter.SHOW_ELEMENT：搜索元素節點；
3、NodeFilter.SHOW_ATRRIBUTE：搜索特性節點；
4、NodeFilter.SHOW_TEXT：搜索文本節點；
5、NodeFilter.SHOW_ENTITY_REFERENCE：搜索實體引用節點；
6、NodeFilter.SHOW_ENTITY：搜索實體節點；
7、NodeFilter.SHOW_PROCESSING_INSTRUCTION：搜索PI節；
8、NodeFilter.SHOW_COMMENT：搜索注釋節點；
9、NodeFilter.SHOW_DOCUMENT：搜索文檔節點；
10、NodeFilter.SHOW_DOCUMENT_TYPE：搜索文檔類型節點；
11、NodeFilter.SHOW_DOCUMENT_FRAGMENT：搜索文檔碎片節節；
12、NodeFilter.SHOW_NOTATION：搜索記號節點；
可以使用二進制操作來組合多個值：
var whattoshow = NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT;
常用的有按位或運算符"|"和按位取補運算符"~";
filter參數可以指定一個自定義的NodeFilter對象，但如果不想使用它的話，也可以留空（null）；
要創建最簡單的訪問所有節點的NodeIterator對象，可以使用下面的代碼：
var iterator = document.createNodeIterator(document, NodeFilter.SHOW_ALL, null, false);
要在搜索過程中前進或者后退，可以使用nextNode()和previousNode()方法：
var node1 = iterator.nextNode();
var node2 = iterator.nextNode();
var node3 = iterator.previousNode();
alert(node1 == node3);輸出結果為“true”;
例如，想列出某個區域內指定<div />中包含的所有元素。下列代碼可以完成這個任務：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<html>
<head>
<title>dom中的NodeIterator對象示例</title>
<script>
function
makelist()
{
var
divnode = document.getElementById(
"div1"
);
var
iterator = document.createNodeIterator(divnode, NodeFilter.SHOW_ELEMENT,
null
,
false
);
var
oput = document.getElementById(
"textarea1"
);
var
node = iterator.nextNode();
while
(node)
{
oput.value += node.tagName +
"\n"
;
node = iterator.nextNode();
}
}
</script>
</head>
<body>
<div id=
"div1"
>
<p>你好<b>讀者!</b></p>
<ul>
<li>列表項一</li>
<li>列表項二</li>
<li>列表項三</li>
<li>列表項四</li>
</ul>
</div>
<textarea id=
"textarea1"
rows=
"10"
></textarea><br />
<input type=
"button"
value=
"生成列表"
onclick=
"makelist()"
/>
</body>
</html>
|
但假設不想在結果中包含<p />元素。這就不能公用whatToShow參數來完成。這種情況下，就要用到filter參數，而filter參數需要自定義一個NodeFilter對象，該對象只有一個方法acceptNode()。如果應該訪問給定的節點，那么該方法返回NodeFilter.FILTER_ACCEPT;如果不應該訪問該節點並且其子節點也沒興趣，則返回NodeFilter.FILTER_REJECT;如果不應該訪問該節點但仍對其子節點有興趣，則返回NodeFilter.FILTER_SKIP。代碼如下：
<html>
<head>
<title>dom中的NodeIterator對象示例</title>
<script>
function makelist()
{
var divnode = document.getElementById("div1");
var
FILTER= new Object();
FILTER.acceptNode = function(node)
{
return (node.tagName == "P") ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT;
}
var iterator = document.createNodeIterator(divnode, NodeFilter.SHOW_ELEMENT, FILTER, false);
var oput = document.getElementById("textarea1");
var node = iterator.nextNode();
while(node)
{
oput.value += node.tagName +"\n";
node = iterator.nextNode();
}
}
</script>
</head>
<body>
<div id="div1">
<p>你好<b>讀者!</b></p>
<ul>
<li>列表項一</li>
<li>列表項二</li>
<li>列表項三</li>
<li>列表項四</li>
</ul>
</div>
<textarea id="textarea1" rows="10"></textarea><br />
<input type="button" value="生成列表" onclick="makelist()" />
</body>
</html>
第二種方法使用TreeWalker遍歷DOM文檔
TreeWalker有點向NodeIterator的大哥一樣:它有NodeIterator所有的功能,並且添加了下面一些遍歷方法:
parentNode():進入當前節點的父節點;
firstChild():進入當前節點的第一子節點;
lastChild():進入當前節點的最后一個子節點
nextSibling():進入當前節點的下一個兄弟節點
previousSibling():進入當前節點的前一個兄弟節點
要開始使用TreeWalker,其實完全可以向使用NodeIterator一樣,只需要將createNodeIterator()改成createTreeWalker()即可,這個函數接收同樣的參數:
<html>
<head>
<title>dom中的NodeIterator對象示例</title>
<script>
function makelist()
{
var divnode = document.getElementById("div1");
var
FILTER= new Object();
FILTER.acceptNode = function(node)
{
return (node.tagName == "P") ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT;
}
var iterator = document.createTreeWalker(divnode, NodeFilter.SHOW_ELEMENT, FILTER, false);
var oput = document.getElementById("textarea1");
var node = iterator.nextNode();
while(node)
{
oput.value += node.tagName +"\n";
node = iterator.nextNode();
}
}
</script>
</head>
<body>
<div id="div1">
<p>你好<b>讀者!</b></p>
<ul>
<li>列表項一</li>
<li>列表項二</li>
<li>列表項三</li>
<li>列表項四</li>
</ul>
</div>
<textarea id="textarea1" rows="10"></textarea><br />
<input type="button" value="生成列表" onclick="makelist()" />
</body>
</html>
也可以使用TreeWalker特有的方法來准確的定位DOM文檔的某一個節點:如獲取<LI>節點
<html>
<head>
<title>dom中的NodeIterator對象示例</title>
<script>
function makelist()
{
var oDiv = document.getElementById("div1");
var oFilter = new Object;
oFilter.acceptNode = function(oNode){
return (oNode.tagName=="P")?NodeFilter.FILTER_REJECT:NodeFilter.FILTER_ACCEPT;
};
var walker = document.createTreeWalker(oDiv,NodeFilter.SHOW_ELEMENT,oFilter,false);
var oOutput = document.getElementById("text1");
var oP = walker.firstChild(); //go to <p>
var oUl = walker.nextSibling(); // go to <ul>
var oLi = walker.firstChild(); //go to <li>
while(oLi){
oOutput.value += oLi.tagName + "\n";
oLi = walker.nextSibling();
}
}
</script>
</head>
<body>
<div id="div1">
<p>你好<b>讀者!</b></p>
<ul>
<li>列表項一</li>
<li>列表項二</li>
<li>列表項三</li>
<li>列表項四</li>
</ul>
</div>
<textarea id="textarea1" rows="10"></textarea><br />
<input type="button" value="生成列表" onclick="makelist()" />
</body>
</html>