js Dom樹結構分析

時間 2019-12-13

原文原文鏈接

對Dom數結構的理解，對用js操做html元素有很大的意義javascript

先來看一下下面這段html代碼：（這裏就以分析body中的元素來解釋，由於咱們基本全部的操做基本都圍繞body標籤來作的）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>
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>java

而咱們用firefox瀏覽器打開這個html頁面，F12開發工具查看頁面得元素信息也正是咱們所看到的其餘瀏覽器看到的也基本相似（除IE）node

但控制檯中打印的內容發現卻跟咱們想象的並不同，打印結果是9個元素其中#text爲文本 #comment爲註釋瀏覽器

以下圖工具

此時用IE打開查看html結構開發工具

針對上面的瀏覽器在解析html元素後可用用下圖來解釋ui

由此能夠得出結果，瀏覽器會將文本註釋也會解釋爲一個元素節點 spa

值得注意的是：firefox

一、瀏覽器解析後，</body>以前必有一個#text節點

二、寫在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); } }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。