對Dom數結構的理解，對用js操作html元素有很大的意義
先來看一下下面這段html代碼：（這里就以分析body中的元素來解釋，因為我們基本所有的操作基本都圍繞body標簽來做的）
1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5 <title></title>
6 <script type="text/javascript">
7 window.onload = function () { 8 var _body = document.getElementsByTagName("body")[0]; 9 for (var i = 0; i < _body.childNodes.length; i++) { 10 console.log("第"+i+"個標簽："+_body.childNodes[i].nodeName); 11 } 12 } 13 </script>
14 </head>
15 <body>
16 <input type="text" name="txt" value="" /><!--注釋-->
17 <a href="http://www.baidu.com">content</a><span></span>
18 <div style="border:solid red 1px;"></div>
19 </body>
20 </html>
第一眼的感覺，body中只有四個標簽<input> <a> <span> <div>
而我們用firefox瀏覽器打開這個html頁面，F12開發工具查看頁面得元素信息也正是我們所看到的 其他瀏覽器看到的也基本類似（除IE）
但控制台中打印的內容發現卻跟我們想象的並不一樣，打印結果是9個元素 其中#text為文本 #comment為注釋
如下圖
此時用IE打開查看html結構
針對上面的瀏覽器在解析html元素后可用用下圖來解釋
由此可以得出結果，瀏覽器會將 文本 注釋也會解釋為一個元素節點
值得注意的是：
1、瀏覽器解析后，</body>之前必有一個#text節點
2、寫在body標簽后面的所有標簽（包括文本及注釋），瀏覽器解析后都會將這些標簽放入body中。
用IE開發人員工具來解釋以上注意的兩點
html代碼：
1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5 <title></title>
6 <script type="text/javascript">
7 window.onload = function () { 8 var _body = document.getElementsByTagName("body")[0]; 9 for (var i = 0; i < _body.childNodes.length; i++) { 10 console.log("第"+i+"個標簽："+_body.childNodes[i].nodeName); 11 } 12 } 13 </script>
14 </head>
15 <body><a href="#"></a><br /></body>
16 </html>
17 <script></script>
18 <!--注釋-->
IE輸出結果
但是開發中我們一般會忽略文本元素節點和注釋元素節點，簡單介紹下過濾掉這些標簽的一種方式：
Dom對象中，每個標簽元素對象都有一個nodeType屬性，分別對應的值如下
標簽節點的類型： 1
文本節點的類型： 3
注釋節點的類型： 8
code：
var _body = document.getElementsByTagName("body")[0]; for (var i = 0; i < _body.childNodes.length; i++) { if (_body.childNodes[i].nodeType == 1) { console.log("第" + i + "個標簽：" + _body.childNodes[i].nodeName); } }