首頁 > 開發者 > JavaScript
Javascript中，相信大家都試過用getElementsByTagName和childNodes來實現對節點的遍曆。但是 getElementsByTagName對複雜的DOM結構遍曆明顯不如用childNodes，因為childNodes能更好的處理DOM的階層,建議在需要進行了遍曆時首先使用childNodes!!
但是不幸的是，在IE和FireFox中childNodes有點細微的差別:
複製代碼 代碼如下:
<head> <script type="text/javascript">
function view(){
var childs1=$('FirstDiv').childNodes;
var childs2=$('SecondDiv').childNodes;
alert("length of FirstDiv: "+childs1.length+"--length of SecondDiv: "+childs2.length);
}
var $=function(id)
{ return document.getElementById(id); }
</script>
</head>
<html >
<body onload="view();">
<!--第一個遍曆對象，節點之間留有空格和斷行符號-->
<div id="FirstDiv">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<!--第二個遍曆對象，除注釋外，節點間無空格斷行符號-->
<div id="SecondDiv"><div>first</div><div>second</div><div>third</div></div>
</html>
用IE和Firefox運行會有兩個不同的結果：IE的結果是3:3；而Firefox則是7:3。怎麼會有這種情況呢？
在結構上，對象1和對象2不同的是對象1的子節點間有斷行符號或者空格，而對象2則是一行寫到尾。大家都應該想到了吧，IE是將一個完整標籤作為一個節點。而 Firefox除了上述的的情況外，也把一個標籤的結束符“>”到下一個標籤的起始符“<”之間的內容（除注釋外，包括任何的文字、空格、斷行符號、定位字元）也算是一個節點了。而且這種節點也有它們自己獨特的屬性和值－－nodeName="#text"。
在實際運用中，Firefox在遍曆子節點時，在for迴圈裡不妨加上：
if(childNode.nodeName=="#text") continue;
或者nodeType == 1。
這樣，便跳過不需要的操作，使程式啟動並執行更有效率。
附:
Node.ELEMENT_NODE == 1
Node.ATTRIBUTE_NODE == 2
Node.TEXT_NODE == 3
Node.CDATA_SECTION_NODE == 4
Node.ENTITY_REFERENCE_NODE == 5
Node.ENTITY_NODE == 6
Node.PROCESSING_INSTRUCTION_NODE == 7
Node.COMMENT_NODE == 8
Node.DOCUMENT_NODE == 9
Node.DOCUMENT_TYPE_NODE == 10
Node.DOCUMENT_FRAGMENT_NODE == 11
Node.NOTATION_NODE == 12
var node = document.documentElement.firstChild;
if(node.nodeType != Node.COMMENT_NODE)
alert("You should comment your code well!");
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
