html5中的dom中的各種節點的層次關系是怎樣的

一、總結

一句話總結：Node節點是所有節點的基類，所以都繼承它的方法

?

1、dom提供在js中動態修改html標簽的作用

比如增加修改標簽等，并且是在非html代碼（比如js）層面，而不是在view層面

?

2、弄清楚層次關系，就不用死記硬背了

那些屬性方法什么的，就是不用背代碼，這些東西是都可以理解的，很好理解的，弄懂層次關系

?

1、document文檔對象是window對象的孩子么？

解答：是的。

2、document是什么？

解答：文檔對象，代表了整個html文檔，也包含了那個文檔下面的所有內容，從html標簽到head和body標簽，從網頁內容到網頁樣式。

3、DOM中的element對象是什么？

解答：每一個標簽都是element對象，html標簽是root element對象，head標簽、body標簽，a標簽、h1標簽等都是element對象。就是標簽即element，element就是標簽。

4、DOM中的Text對象是什么？

解答：Text對象即文本對象。html中的文本都是Text對象。<h1>這里面的文本是Text對象</h1>。標簽也就是element的innerHTML所對應的就是Text對象

5、DOM中的Attribute對象是什么？

解答：Attribute對象即屬性對象，所以標簽也就是element的屬性都是Attribute對象，例如<a href="#"></a>中的href就是屬性對象。

6、一個DOM中id和name的數量是多少？

解答：id有且僅有一個，name可以有無數個。

7、document.getElementByName('table')這句話錯在哪？

解答：取id才是element，因為document中id只有一個，取name的話，那就是elements，那么可以有無數個。

8、document.getElementById('table')中的element指的什么？

解答：element就是標簽咯，標簽就是element對象咯。

9、innerHTML中只有文本么？

解答：innerHTML中不僅可以包含文本，還可以包含標簽。所以給元素添加孩子標簽可以就講包含孩子標簽的html代碼直接賦值給父標簽的innerHTML。

10、HTML的DOM中一種有多少種類型，它們的基類是什么？

解答：一共定義了12種節點類型，而這些類型又都繼承自Node類型。比如HTML元素通過元素節點表示，注釋通過注釋節點表示，文檔類型通過文檔類型節點表示等。

11、Node是所有節點的基類型么？

解答：是的

12、Node節點中不僅包括元素節點，還包括文本節點點，這句話對么？

解答：對

13、Node節點的常用屬性是什么？

解答：hasChildNodes() ?如果包含子節點就返回true，比查詢childNodes的length來的簡單。

14、如何返回一個文檔節點document的引用？

解答：ownerDocument返回文檔節點的引用（在html里面也就是document對象）

15、cloneNode()方法是什么，怎么使用？

解答：cloneNode();復制節點，接受一個參數 true或者false。如果true就是復制那個節點和它的子節點。如果是false，就是復制節點本身（復制出來的節點就會沒有任何子元素）。這個方法返回復制的節點，如果需要操作它，那么需要借助前面講的4個方法來把這個節點放入到html中去。

16、html中所有東西都是節點，這句話對么？

解答：應該是對的

17、document的write()和writeln()的區別是什么？

解答：write和writeln，它們都是向頁面寫入東西，區別就是后者會多加入一個換行符。注意的是：在頁面加載的過程中，可以使用這兩個方法向頁面添加內容。如果頁面已經加載完了，再調用write，會重寫整個頁面。

18、如果頁面已經加載完了，再調用write會發生什么？

解答：會重寫整個頁面

19、Text節點有子元素么？

解答：它沒有子元素（不過這個仔細想想也知道= =）

20、如何我們想訪問Text的節點的文本內容，我們怎么訪問？（兩種方法）

解答：nodeValue或者data屬性

21、Comment、DocumentType和DocumentFragment，這三種節點分別是什么？

解答：Comment是注釋節點，DocumentType就是doctype節點，通過docment.doctype來訪問，DocumentFragment這個節點是一個文檔片段，偶爾會用到。

22、html文檔中插入大量html代碼，用什么快？

解答：插入大量的html代碼，用innerHTML是非常快的，建議使用

?

?

?

?

?

二、簡介

DOM是所有前端開發每天打交道的東西，但是隨著jQuery等庫的出現，大大簡化了DOM操作，導致大家慢慢的“遺忘”了它的本來面貌。不過，要想深入學習前端知識，對DOM的了解是不可或缺的，所以本文力圖系統的講解下DOM的相關知識，如有遺漏或錯誤，還請大家指出一起討論^ ^。

?

?

?

1、DOM是什么？

　　DOM（文檔對象模型）是針對HTML和XML文檔的一個API，通過DOM可以去改變文檔。

　　這個說法很官方，大家肯定還是不明白。

　　舉個例子：我們有一段HTML，那么如何訪問第二層第一個節點呢，如何把最后一個節點移動到第一個節點上面去呢？

　　DOM就是定義了如果做類似操作，那么應該怎么做的標準。比如用getElementById來訪問節點，用insertBefore來插入節點。

　　當瀏覽器載入HTML時，會生成相應的DOM樹。

　　簡而言之，DOM可以理解為一個訪問或操作HTML各種標簽的實現標準。

　　對于一個HTML來說，文檔節點Document（看不到的）是它的根節點，對應的對象便是document對象（嚴格講是子類HTMLDocument對象，下面單獨介紹Document類型時會指出）。

　　換句話說存在一個文檔節點Document，然后它有子節點，比如通過document.getElementsByTagName("html")，得到類型為元素節點的Element html。

　　每一段HTML標記都可以用相應的節點表示，例如：

　　HTML元素通過元素節點表示，注釋通過注釋節點表示，文檔類型通過文檔類型節點表示等。

　　一共定義了12種節點類型，而這些類型又都繼承自Node類型。

　　所以我們首先講Node類型，因為這個類型的方法是所有節點都會繼承的。

?

2、Node類型（基類，所有節點都繼承了它的方法）

　　Node是所有節點的基類型，所有節點都繼承自它，所以所有節點都有一些共同的方法和屬性。

　　先講Node類型的屬性

　　首先是nodeType屬性，用來表明節點類型的，例如：

document.nodeType; // 返回 9 ，其中document對象為文檔節點Document的實例

　　這里面，9代表的就是DOCUMENT_NODE節點的意思，可以通過Node.DOCUMENT_NODE查看節點對應的數字

document.nodeType === Node.DOCUMENT_NODE; // true

　　至于一共有哪些節點，每個節點對應的數字又是多少，這個可以問谷歌就知道了。反正常用的就是元素節點Element(對應數字為1)和文本節點Text(對應數字為3)?

　　然后常用的還有nodeName和nodeValue

　　對于元素節點 nodeName就是標簽名，nodeValue就是null

　　對于文本節點 nodeName為"#text"(chrome里面測試的),nodeValue就是實際的值

　　每個節點還有childNodes屬性，這是個十分重要的屬性，它保存了這個節點所有直接子元素

　　調用childNodes返回的是一個NodeList對象，它極其像數組，但是有一個最關鍵的地方，它是動態查詢的，也就是說每次調用它都會對DOM結構查詢，所以對它的使用需要慎重，注意性能。

　　訪問childNodes可以使用數組下表或者item方法

　　然后各個節點還存在各種屬性讓它們可以相互訪問，下圖很好的總結了

　　比較有用的方法和屬性：

　　1、hasChildNodes()

　　如果包含子節點就返回true，比查詢childNodes的length來的簡單。

　　2、ownerDocument

　　返回文檔節點的引用（在html里面也就是document對象）

　　再介紹下Node類型常用的方法

　　appendChild()方法可以在節點的childNodes的末尾增加一個節點，值得注意的是如果這個節點是已經存在在文檔中的，那么便會刪除原節點，感覺上就像是移動節點一樣。

　　insertBefore()方法接受兩個參數，一個是插入的節點，另外一個是參照的節點。如果第二個參數為null，則insertBefore和appendChild效果一樣。否則便會把節點插入到參照節點之前。這里要注意的是，如果第二個參數不為null，那么插入的節點不能是已經存在的節點。

　　replaceChild()方法可以替換節點，接受兩個參數，需要插入的節點和需要替換的節點。返回被替換掉的節點。

　　removeChild()移除節點。這里有個常見需求，比如我有一個節點 #waste-node ，那么如何移除它呢？

var wasteNode = document.getElementById("waste-node"); wasteNode.parentNode.removeClhid(wasteNode); // 先拿到父節點，再調用removeClild刪除自己

　　這里先暫停一下，不知道大家注意到沒有，以上的幾個方法都是操作某個節點的子節點，也就是說，操作前必須找到父節點（通過parentNode來找）

　　接下來說下復制節點的方法：

　　cloneNode();復制節點，接受一個參數 true或者false。如果true就是復制那個節點和它的子節點。如果是false，就是復制節點本身（復制出來的節點就會沒有任何子元素）。這個方法返回復制的節點，如果需要操作它，那么需要借助前面講的4個方法來把這個節點放入到html中去。

　　至此，Node類型的常見屬性和方法都介紹完了。結合開頭講的，所有節點類型都繼承自Node類型，所以這些方法是所有節點都有的。

?

3、Document類型

　　最開始講DOM是什么的時候提到了Document類型。其實關于這個類型最重要的是它的一個子類HTMLDocument有一個實例對象document。而這個document對象是我們最常用的一個對象了。

　　document對象又掛載在window對象上，所以在瀏覽器就可以直接訪問document了。

　　老規矩，先講講document對象的屬性，等會講講它的方法。

　　document對象上的一些屬性

　　document.childNodes 繼承自上面講的Node類型，可以返回文檔的直接子節點（通常包括文檔聲明和html節點）

　　document.documentElement 可以直接拿到html節點的引用（等價于document.getElementsByTagName("html")[0]）。

　　document.body body節點的引用

　　document.title ?頁面的title，可以修改，會改變瀏覽器標簽上的名字

　　document.URL 頁面的url

　　document.referrer 取得referrer，也就是打開這個頁面的那個頁面的地址，做來源統計時候比較有用

　　document.domain 取得域名，可以設置，但是通常只能設置為不包含子域名的情況，在一些子域名跨域情況下有效。

　　接下來介紹兩個熟悉的方法

　　getElementById 和 getElementsByTagName

　　getElementById，傳入id，得到元素節點。里面的參數區分大小寫（IE8-不區分）。注意：如果有多個id相同的元素，則返回第一個。IE7-里面表單元素的name也會被當做id來使用。

　　getElementsByTagName 根據標簽取得元素，得到的是HTMLCollection類型。如果傳入的是 "*" ，則可以取得全部元素。

　　還有一個是只有HTMLDocument類型（也就是document對象）才有的方法 getElementsByName 顧名思義，根據name返回元素。

　　document對象還有一些集合，例如document.forms 可以返回所有的form表單。類型也是HTMLCollection。

　　說到HTMLCollection，就再說說它

　　HTMLCollection就是一個包含一個或多個元素的集合，和上面講的NodeList還挺像的。HTMLCollection這個類型有兩個方法，一個是通過下標（或者.item()）得到具體元素，還有就是通過['name']（或者.namedItem()）獲得具體元素。

　　最后，關于document對象還有一套重要的方法，那便是

　　write() writeln() open() close()

　　open和close分別是打開和關閉網頁的輸出流，在頁面加載過程中，就相當于open狀態。這兩個方法一般不會去用它。

　　然后重要的方法就是write和writeln，它們都是向頁面寫入東西，區別就是后者會多加入一個換行符。

　　注意的是：在頁面加載的過程中，可以使用這兩個方法向頁面添加內容。如果頁面已經加載完了，再調用write，會重寫整個頁面。

　　還有一點，如果要動態寫入腳本 例如 <script>xxx</script>這樣的 ，那么要注意把</script>分開來拼裝下，否則會被誤以為是腳本結束的標志，導致這個結束符匹配到上面一個開始符。可以這樣寫"<scr" + "ipt>";

?

4、Element類型

　　接下來講講最重要也是最常見的一個類型，Element類型。

　　我們日常所操作的都是Element類型（實質是HTMLElement，這里為了方便理解，就簡單這么說），比如

document.getElementById("test")

　　返回的就是Element類型。我們日常所說的“DOM對象”，通常也就是指Element類型的對象。

　　然后說說這個類型的常見屬性：

　　首先最開始說的Node類型上的那些屬性方法它都有，這個就不再重復了，主要說說它自己獨有的。

　　首先是tagName，這個和繼承自Node類型的nodeName一樣。都是返回標簽名，通常是大寫，結果取決于瀏覽器。所以在做比較

　　的時候最好是調用下類似toLowerCase()這種方法再做比較。

　　說說上面提到過的HTMLElement類型

　　HTMLElement類型繼承自Element類型，也是HTML元素的實際類型，我們在瀏覽器里用的元素都是這個類型。

　　這個類型都具有一些標準屬性，比如：

　　id 元素的唯一標識

　　title 通常是鼠標移上去時候會顯示的信息

　　className 類名

　　等等，這幾個屬性是可讀寫的，也就是說你改變他們會得到相應的效果。

　　除了屬性外，還有幾個重要的方法

　　首先說說操作節點屬性的方法

　　getAttribute 、setAttribute 、removeAttribute這3個方法。

　　這些是操作屬性最常用的方法了，怎么用就不說了，很簡單，顧名思義。

　　還有一個attributes屬性，保存了元素的全部屬性。

　　這里停下來，出個問題，ele.className 和 ele.getAttribute("class")返回的結果是不是同一個東西？

　　解答這個問題，我要說一個重要知識點，一個元素的屬性結構是這么來的，比如一個inpnt元素

<input id="test" checked="checked">

　　那么這個元素的屬性被包含在 input.attributes里面，比如你在html元素上看到的class、id或者你自己定義的data-test這種屬性。

　　然后?getAttribute 、setAttribute 、removeAttribute這3個方法可以認為是快捷的取attributes集合的方法。而直接input.id或者input.className都是直接掛在input下的屬性，和attributes是同級的。所以返回的東西也許看過去一樣，實際是不一樣的，不信你可以試試input.checked這input.getAttribute("checked")試試。

　　關于這個知識點，詳細的說可以再寫一篇文章，在我的博客?從is(":checked")說起?中有談到過，大家可以看看這篇文章和文章后的討論，便可以知道是怎么一回事。

　　總得來說，這3個方法通常用了處理自定義的屬性，而不是id、class等這種“公認特性”。

　　接下來說說創建元素

　　document.createElement()可以創建一個元素，比如：

document.createElement("div");

　　一般之后可以為元素設置屬性，兩種方法，一種是直接node.property還可以node.setAttribute("propertyName","value")。等

　　但是做完這些之后，這個元素還是沒有在頁面中，所以你還得通過最上面講的類似appendChild這些方法把元素添加到頁面里面。

　　在IE中，還可以直接穿整個HTML字符串進去，來創建元素，比如

document.createElement("<div>test</div>");

　　最后，元素節點也支持HTMLDocument類型的那些查找方法，比如getElementsByTagName。不過它只會找自己后代的節點。所以可以這么寫代碼

document.getElementById("test").getElementsByTagName("div"); // 找到id為test元素下的所有div節點

5、Text類型

　　這個類型很特殊，也是第三常見類型（第一第二分別就是Document和Element）。

　　這個節點簡單來說就是一段字符串。

　　有個很重要的特征就是，它沒有子元素（不過這個仔細想想也知道= =）

　　訪問text節點的文本內容，可以通過nodeValue或者data屬性。

　　下面簡單說說它提供的一些方法

appendData(); // 在text末尾加內容 deleteData(offset, count); // 從offset指定的位置開始刪除count個字符

　　還有insertDate、replaceData、splitText等方法，就不一一說了，用的機會很少，可以用的時候再查閱。

　　然后它還有一個lenght屬性，返回字符長度的。

　　這里說一個常見的坑。比如下面這個html結構

<ul><li></li><li></li> </ul>

　　這里，ul的第一個子節點（firstChild）是什么呢？第一眼看過去，肯定認為是li了，但是實際上，你會發現不是li，而是一個文本節點！

　　這是因為瀏覽器認為ul和第一個li之間有空白字符，所以就有文本節點了。

　　這里一個常見的問題就是遍歷ul的childNodes的時候，遍歷的元素一定要判斷下nodeType是不是等于1（等于1就代表是元素節點），這樣才能跳過這個坑。否則你也可以刪除所有的空格和換行符。

　　創建文本節點的方法是document.createTextNode

　　然后接下來和操作Element類型一樣，就是再插入到元素中，瀏覽器就可以看到了。

?

6、其他的一些類型 Comment、DocumentType和DocumentFragment

　　這些不常用的一句話帶過把

　　Comment是注釋節點

　　DocumentType就是doctype節點，通過docment.doctype來訪問

　　DocumentFragment這個節點是一個文檔片段，偶爾會用到。

　　比如一種常見的用法是，在一個ul中插入3個li。

　　如果你循環插入3次，那么瀏覽器就要渲染3次，對性能有蠻大的影響。

　　所以大家一般這么做

　　先

var fragment = document.createDocumentFragment();

　　然后循環把li，用appendChild插入到fragment里面

　　最后在一次把fragment插入到ul里面。這樣就會很快。

?

7、DOM擴展

　　進過上面講的這么多節點類型，想必大家對DOM節點已經有了很深的了解，下面講一講DOM擴展的一些東西。

　　瀏覽器為了方便開發者，擴展了一些DOM功能。

　　因為是瀏覽器自己擴展的，所以使用前兼容性問題一定要注意

　　判斷“標準模式”和“混雜模式”通過 document.compatMode和新的document.documentMode

　　上面不是說了一個文本節點作為第一子元素的坑嗎，所以瀏覽器又實現了一個children屬性，這個屬性只包含元素節點。

　　為了方便判斷A節點是不是B節點的子節點，引入了contains方法，比如?

B.contains(A); // true就代表是，false就代表不是

　　這個方法有兼容性問題，使用前可以谷歌解決方法。

　　針對訪問元素，又提供了4個方法innerText/innerHTML/outerTEXT/outerHTML。

　　通過這些方法，可以讀和寫元素。

　　其中，*TEXT是返回文本內容?*HTML是返回html文本。

　　而outer*則是代表是否包含元素本身。

　　實際使用來看，在讀內容的時候 inner*和outer*沒有區別。

　　在把內容寫入元素的時候，就是是否包含元素本身的區別。

　　重要的是，這幾個方法有性能問題，比如在IE中，通過inner*刪除的節點，其綁定的事件依然在內存中，就很容易消耗大量內存。

　　還有一個技巧是，插入大量的html代碼，用innerHTML是非常快的，建議使用。

?

8、總結

　　首先感謝所有看到這里的朋友，哈哈，關于DOM的東西實在是太多了，不過這也算是最重要的一個前端知識點之一吧。

?

三、測試題-簡答題

1、document文檔對象是window對象的孩子么？

解答：是的。

2、document是什么？

解答：文檔對象，代表了整個html文檔，也包含了那個文檔下面的所有內容，從html標簽到head和body標簽，從網頁內容到網頁樣式。

3、DOM中的element對象是什么？

解答：每一個標簽都是element對象，html標簽是root element對象，head標簽、body標簽，a標簽、h1標簽等都是element對象。就是標簽即element，element就是標簽。

4、DOM中的Text對象是什么？

解答：Text對象即文本對象。html中的文本都是Text對象。<h1>這里面的文本是Text對象</h1>。標簽也就是element的innerHTML所對應的就是Text對象

5、DOM中的Attribute對象是什么？

解答：Attribute對象即屬性對象，所以標簽也就是element的屬性都是Attribute對象，例如<a href="#"></a>中的href就是屬性對象。

6、一個DOM中id和name的數量是多少？

解答：id有且僅有一個，name可以有無數個。

7、document.getElementByName('table')這句話錯在哪？

解答：取id才是element，因為document中id只有一個，取name的話，那就是elements，那么可以有無數個。

8、document.getElementById('table')中的element指的什么？

解答：element就是標簽咯，標簽就是element對象咯。

9、innerHTML中只有文本么？

解答：innerHTML中不僅可以包含文本，還可以包含標簽。所以給元素添加孩子標簽可以就講包含孩子標簽的html代碼直接賦值給父標簽的innerHTML。

10、HTML的DOM中一種有多少種類型，它們的基類是什么？

解答：一共定義了12種節點類型，而這些類型又都繼承自Node類型。比如HTML元素通過元素節點表示，注釋通過注釋節點表示，文檔類型通過文檔類型節點表示等。

11、Node是所有節點的基類型么？

解答：是的

12、Node節點中不僅包括元素節點，還包括文本節點點，這句話對么？

解答：對

13、Node節點的常用屬性是什么？

解答：hasChildNodes() ?如果包含子節點就返回true，比查詢childNodes的length來的簡單。

14、如何返回一個文檔節點document的引用？

解答：ownerDocument返回文檔節點的引用（在html里面也就是document對象）

15、cloneNode()方法是什么，怎么使用？

解答：cloneNode();復制節點，接受一個參數 true或者false。如果true就是復制那個節點和它的子節點。如果是false，就是復制節點本身（復制出來的節點就會沒有任何子元素）。這個方法返回復制的節點，如果需要操作它，那么需要借助前面講的4個方法來把這個節點放入到html中去。

16、html中所有東西都是節點，這句話對么？

解答：應該是對的

17、document的write()和writeln()的區別是什么？

解答：write和writeln，它們都是向頁面寫入東西，區別就是后者會多加入一個換行符。注意的是：在頁面加載的過程中，可以使用這兩個方法向頁面添加內容。如果頁面已經加載完了，再調用write，會重寫整個頁面。

18、如果頁面已經加載完了，再調用write會發生什么？

解答：會重寫整個頁面

19、Text節點有子元素么？

解答：它沒有子元素（不過這個仔細想想也知道= =）

20、如何我們想訪問Text的節點的文本內容，我們怎么訪問？（兩種方法）

解答：nodeValue或者data屬性

21、Comment、DocumentType和DocumentFragment，這三種節點分別是什么？

解答：Comment是注釋節點，DocumentType就是doctype節點，通過docment.doctype來訪問，DocumentFragment這個節點是一個文檔片段，偶爾會用到。

22、html文檔中插入大量html代碼，用什么快？

解答：插入大量的html代碼，用innerHTML是非常快的，建議使用

?

?

轉載于:https://www.cnblogs.com/Renyi-Fan/p/8946326.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的html5中的dom中的各种节点的层次关系是怎样的的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。