2022-06-29

<article style="margin: 0px; padding: 0px;">

一、總結(jié)

一句話總結(jié)：

1、DOM中的方法區(qū)分大小寫(xiě)么？

解答：區(qū)分

2、DOM中元素和節(jié)點(diǎn)的關(guān)系式什么？

解答：元素就是標(biāo)簽，節(jié)點(diǎn)中有元素節(jié)點(diǎn)，也是標(biāo)簽，節(jié)點(diǎn)中還有其它節(jié)點(diǎn)

3、DOM 將HTML文檔呈現(xiàn)為帶有元素、屬性和文本的樹(shù)結(jié)構(gòu)（節(jié)點(diǎn)樹(shù)）。 這句話對(duì)么？

解答：對(duì)

4、舉一個(gè)屬性節(jié)點(diǎn)的例子？

解答：如<a>標(biāo)簽的鏈接屬性。屬性節(jié)點(diǎn):元素屬性，

5、屬性節(jié)點(diǎn)就是元素的屬性么？

解答：對(duì)的

6、一個(gè)節(jié)點(diǎn)，有哪三個(gè)最重要的屬性？

解答：nodeName，nodeType，nodeValue

7、document如何創(chuàng)建一個(gè)包含著給定文本的新文本節(jié)點(diǎn)？

解答：ｄｏｃｕｍｅｎｔ、ｃｒｅａｔｅＴｅｘｔＮｏｄｅ（）

8、tagName是什么？

解答：Tagname是標(biāo)簽的名稱，如p、a、img等標(biāo)簽名。

9、如何獲取DOM中所有集合類的長(zhǎng)度？

解答：length屬性

10、 如何獲取元素節(jié)點(diǎn)的屬性值？

解答：通過(guò)元素節(jié)點(diǎn)的屬性名稱獲取屬性的值。elementNode.getAttribute(name)

11、 nodeValue 是什么？

解答：節(jié)點(diǎn)的值

12、nodeName 是什么？

解答：節(jié)點(diǎn)的名稱

13、nodeType 是什么？

解答：節(jié)點(diǎn)的類型

14、元素節(jié)點(diǎn)的 nodeName是什么？

解答：與標(biāo)簽名相同

15、文本節(jié)點(diǎn)的 nodeName是什么？

解答：永遠(yuǎn)是 #text

16、文檔節(jié)點(diǎn)的 nodeName是什么？

解答：永遠(yuǎn)是 #document

17、元素節(jié)點(diǎn)、文本節(jié)點(diǎn)、屬性節(jié)點(diǎn)的nodeValue是什么？

解答：

1. 元素節(jié)點(diǎn)的 nodeValue 是 undefined 或 null
2. 文本節(jié)點(diǎn)的 nodeValue 是文本自身
3. 屬性節(jié)點(diǎn)的 nodeValue 是屬性的值

18、 節(jié)點(diǎn)的nodeName和nodeTyle是只讀的，那么節(jié)點(diǎn)的nodeValue是么？

解答：不是，所以可以賦值，可以修改

二、js的dom對(duì)象

1.認(rèn)識(shí)DOM

文檔對(duì)象模型DOM（Document Object Model）定義訪問(wèn)和處理HTML文檔的標(biāo)準(zhǔn)方法。DOM 將HTML文檔呈現(xiàn)為帶有元素、屬性和文本的樹(shù)結(jié)構(gòu)（節(jié)點(diǎn)樹(shù)）。

先來(lái)看看下面代碼:

[圖片上傳失敗...(image-4420c5-1656507738935)]

將HTML代碼分解為DOM節(jié)點(diǎn)層次圖:

[圖片上傳失敗...(image-b37f49-1656507738935)]

HTML****文檔可以說(shuō)由節(jié)點(diǎn)構(gòu)成的集合，DOM節(jié)點(diǎn)有:

1. ****元素節(jié)點(diǎn)：上圖中<html>、<body>、<p>等都是元素節(jié)點(diǎn)，即標(biāo)簽。

2. ****文本節(jié)點(diǎn):向用戶展示的內(nèi)容，如<li>...</li>中的JavaScript、DOM、CSS等文本。

3. ****屬性節(jié)點(diǎn):元素屬性，如<a>標(biāo)簽的鏈接屬性。

節(jié)點(diǎn)屬性:

[圖片上傳失敗...(image-c117d-1656507738935)]

遍歷節(jié)點(diǎn)樹(shù):

[圖片上傳失敗...(image-baf21-1656507738935)]

以上圖ul為例，它的父級(jí)節(jié)點(diǎn)body,它的子節(jié)點(diǎn)3個(gè)li,它的兄弟結(jié)點(diǎn)h2、P。

DOM操作:

[圖片上傳失敗...(image-941a77-1656507738935)]

注意:前兩個(gè)是document方法。

2.getElementsByName()方法

返回帶有指定名稱的節(jié)點(diǎn)對(duì)象的集合。

語(yǔ)法：

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">document.getElementsByName(name)</pre>

與getElementById() 方法不同的是，通過(guò)元素的 name 屬性查詢?cè)兀皇峭ㄟ^(guò) id 屬性。

注意:

  1. 因?yàn)槲臋n中的 name 屬性可能不唯一，所有 getElementsByName() 方法返回的是元素的數(shù)組，而不是一個(gè)元素。

  2. 和數(shù)組類似也有l(wèi)ength屬性，可以和訪問(wèn)數(shù)組一樣的方法來(lái)訪問(wèn)，從0開(kāi)始。

看看下面的代碼:

[圖片上傳失敗...(image-f00f0-1656507738934)]

運(yùn)行結(jié)果:

[圖片上傳失敗...(image-ea098-1656507738934)]

3.getElementsByTagName()方法

返回帶有指定標(biāo)簽名的節(jié)點(diǎn)對(duì)象的集合。返回元素的順序是它們?cè)谖臋n中的順序。

語(yǔ)法:

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">document.getElementsByTagName(Tagname)</pre>

說(shuō)明:

  1. Tagname是標(biāo)簽的名稱，如p、a、img等標(biāo)簽名。

2. 和數(shù)組類似也有l(wèi)ength屬性，可以和訪問(wèn)數(shù)組一樣的方法來(lái)訪問(wèn)，所以從0開(kāi)始。

看看下面代碼，通過(guò)getElementsByTagName()獲取節(jié)點(diǎn)。

[圖片上傳失敗...(image-60a235-1656507738934)]

4.區(qū)別getElementByID,getElementsByName,getElementsByTagName

以人來(lái)舉例說(shuō)明，人有能標(biāo)識(shí)身份的身份證，有姓名，有類別(大人、小孩、老人)等。

1.** ID** 是一個(gè)人的身份證號(hào)碼，是唯一的。所以通過(guò)getElementById獲取的是指定的一個(gè)人。

  1. Name 是他的名字，可以重復(fù)。所以通過(guò)getElementsByName獲取名字相同的人集合。

  2. TagName可看似某類，getElementsByTagName獲取相同類的人集合。如獲取小孩這類人，getElementsByTagName("小孩")。

把上面的例子轉(zhuǎn)換到HTML中，如下:

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;"><input type="checkbox" name="hobby" id="hobby1"> 音樂(lè)</pre>

input標(biāo)簽就像人的類別。

name屬性就像人的姓名。

id屬性就像人的身份證。

方法總結(jié)如下:

[圖片上傳失敗...(image-64eb05-1656507738934)]

注意：方法區(qū)分大小寫(xiě)

通過(guò)下面的例子(6個(gè)name="hobby"的復(fù)選項(xiàng)，兩個(gè)按鈕)來(lái)區(qū)分三種方法的不同:

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;"> <input type="checkbox" name="hobby" id="hobby1"> 音樂(lè)
<input type="checkbox" name="hobby" id="hobby2"> 登山
<input type="checkbox" name="hobby" id="hobby3"> 游泳
<input type="checkbox" name="hobby" id="hobby4"> 閱讀
<input type="checkbox" name="hobby" id="hobby5"> 打球
<input type="checkbox" name="hobby" id="hobby6"> 跑步
<input type="button" value = "全選" id="button1">
<input type="button" value = "全不選" id="button1"></pre>

1. document.getElementsByTagName("input")，結(jié)果為獲取所有標(biāo)簽為input的元素，共8個(gè)。

  1. document.getElementsByName("hobby")，結(jié)果為獲取屬性name="hobby"的元素，共6個(gè)。

  2. document.getElementById("hobby6")，結(jié)果為獲取屬性id="hobby6"的元素，只有一個(gè)，"跑步"這個(gè)復(fù)選項(xiàng)。

5.getAttribute()方法

通過(guò)元素節(jié)點(diǎn)的屬性名稱獲取屬性的值。

語(yǔ)法：

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">elementNode.getAttribute(name)</pre>

說(shuō)明:

1. elementNode：使用getElementById()、getElementsByTagName()等方法，獲取到的元素節(jié)點(diǎn)。

2. name：要想查詢的元素節(jié)點(diǎn)的屬性名字

看看下面的代碼，獲取h1標(biāo)簽的屬性值：

[圖片上傳失敗...(image-999a16-1656507738934)]

運(yùn)行結(jié)果:

h1標(biāo)簽的ID ：alink
h1標(biāo)簽的title ：getAttribute()獲取標(biāo)簽的屬值

6.setAttribute()方法

setAttribute() 方法增加一個(gè)指定名稱和值的新屬性，或者把一個(gè)現(xiàn)有的屬性設(shè)定為指定的值。

語(yǔ)法：

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">elementNode.setAttribute(name,value)</pre>

說(shuō)明：

1.name: 要設(shè)置的屬性名。

2.value: 要設(shè)置的屬性值。

注意：

1.把指定的屬性設(shè)置為指定的值。如果不存在具有指定名稱的屬性，該方法將創(chuàng)建一個(gè)新屬性。

2.類似于getAttribute()方法，setAttribute()方法只能通過(guò)元素節(jié)點(diǎn)對(duì)象調(diào)用的函數(shù)。

7.節(jié)點(diǎn)屬性

在文檔對(duì)象模型 (DOM) 中，每個(gè)節(jié)點(diǎn)都是一個(gè)對(duì)象。DOM 節(jié)點(diǎn)有三個(gè)重要的屬性 ：

1. nodeName : 節(jié)點(diǎn)的名稱

2. nodeValue ：節(jié)點(diǎn)的值

3. nodeType ：節(jié)點(diǎn)的類型

**一、nodeName 屬性: **節(jié)點(diǎn)的名稱，是只讀的。

  1. 元素節(jié)點(diǎn)的 nodeName 與標(biāo)簽名相同
  2. 屬性節(jié)點(diǎn)的 nodeName 是屬性的名稱
  3. 文本節(jié)點(diǎn)的 nodeName 永遠(yuǎn)是 #text
  4. 文檔節(jié)點(diǎn)的 nodeName 永遠(yuǎn)是 #document

二、nodeValue 屬性：節(jié)點(diǎn)的值

1. 元素節(jié)點(diǎn)的 nodeValue 是 undefined 或 null
2. 文本節(jié)點(diǎn)的 nodeValue 是文本自身
3. 屬性節(jié)點(diǎn)的 nodeValue 是屬性的值

**三、nodeType 屬性: **節(jié)點(diǎn)的類型，是只讀的。以下常用的幾種結(jié)點(diǎn)類型:

元素類型 節(jié)點(diǎn)類型
元素 1
屬性 2
文本 3
注釋 8
文檔 9

8.訪問(wèn)子結(jié)點(diǎn)childNodes

訪問(wèn)選定元素節(jié)點(diǎn)下的所有子節(jié)點(diǎn)的列表，返回的值可以看作是一個(gè)數(shù)組，他具有l(wèi)ength屬性。

語(yǔ)法：

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">elementNode.childNodes</pre>

注意：

如果選定的節(jié)點(diǎn)沒(méi)有子節(jié)點(diǎn)，則該屬性返回不包含節(jié)點(diǎn)的 NodeList。

我們來(lái)看看下面的代碼:

[圖片上傳失敗...(image-1ca514-1656507738933)]

運(yùn)行結(jié)果:

IE:

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;"> UL子節(jié)點(diǎn)個(gè)數(shù):3
節(jié)點(diǎn)類型:1</pre>

其它瀏覽器:

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;"> UL子節(jié)點(diǎn)個(gè)數(shù):7
節(jié)點(diǎn)類型:3</pre>

注意:

1. IE全系列、firefox、chrome、opera、safari兼容問(wèn)題

  1. 節(jié)點(diǎn)之間的空白符，在firefox、chrome、opera、safari瀏覽器是文本節(jié)點(diǎn)，所以IE是3，其它瀏覽器是7，如下圖所示:

[圖片上傳失敗...(image-a545ab-1656507738933)]

如果把代碼改成這樣:

<ul><li>javascript</li><li>jQuery</li><li>PHP</li></ul>

運(yùn)行結(jié)果:（IE和其它瀏覽器結(jié)果是一樣的）

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;"> UL子節(jié)點(diǎn)個(gè)數(shù):3
節(jié)點(diǎn)類型:1</pre>

9.訪問(wèn)子結(jié)點(diǎn)的第一和最后項(xiàng)

一、firstChild屬性返回‘childNodes’數(shù)組的第一個(gè)子節(jié)點(diǎn)。如果選定的節(jié)點(diǎn)沒(méi)有子節(jié)點(diǎn)，則該屬性返回 NULL。

語(yǔ)法：

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">node.firstChild</pre>

說(shuō)明：與elementNode.childNodes[0]是同樣的效果。

二、lastChild 屬性返回‘childNodes’數(shù)組的最后一個(gè)子節(jié)點(diǎn)。如果選定的節(jié)點(diǎn)沒(méi)有子節(jié)點(diǎn)，則該屬性返回 NULL。

語(yǔ)法：

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">node.lastChild</pre>

說(shuō)明：與elementNode.childNodes[elementNode.childNodes.length-1]是同樣的效果。

**注意: **上一節(jié)中，我們知道Internet Explorer 會(huì)忽略節(jié)點(diǎn)之間生成的空白文本節(jié)點(diǎn)，而其它瀏覽器不會(huì)。我們可以通過(guò)檢測(cè)節(jié)點(diǎn)類型，過(guò)濾子節(jié)點(diǎn)。 (以后章節(jié)講解)

10.訪問(wèn)父節(jié)點(diǎn)parentNode

獲取指定節(jié)點(diǎn)的父節(jié)點(diǎn)

語(yǔ)法：

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">elementNode.parentNode</pre>

注意:父節(jié)點(diǎn)只能有一個(gè)。

看看下面的例子,獲取 P 節(jié)點(diǎn)的父節(jié)點(diǎn)，代碼如下:

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;"><div id="text">
<p id="con"> parentNode 獲取指點(diǎn)節(jié)點(diǎn)的父節(jié)點(diǎn)</p>
</div>
<script type="text/javascript">
var mynode= document.getElementById("con");
document.write(mynode.parentNode.nodeName);
</script></pre>

運(yùn)行結(jié)果:

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">parentNode 獲取指點(diǎn)節(jié)點(diǎn)的父節(jié)點(diǎn)
DIV</pre>

訪問(wèn)祖節(jié)點(diǎn):

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">elementNode.parentNode.parentNode</pre>

看看下面的代碼:

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;"><div id="text">
<p>
parentNode
<span id="con"> 獲取指點(diǎn)節(jié)點(diǎn)的父節(jié)點(diǎn)</span>
</p>
</div>
<script type="text/javascript">
var mynode= document.getElementById("con");
document.write(mynode.parentNode.parentNode.nodeName);
</script></pre>

運(yùn)行結(jié)果:

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">parentNode獲取指點(diǎn)節(jié)點(diǎn)的父節(jié)點(diǎn)
DIV</pre>

注意: 瀏覽器兼容問(wèn)題，chrome、firefox等瀏覽器標(biāo)簽之間的空白也算是一個(gè)文本節(jié)點(diǎn)。

11.訪問(wèn)兄弟節(jié)點(diǎn)

  1. nextSibling 屬性可返回某個(gè)節(jié)點(diǎn)之后緊跟的節(jié)點(diǎn)（處于同一樹(shù)層級(jí)中）。

語(yǔ)法：

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">nodeObject.nextSibling</pre>

說(shuō)明：如果無(wú)此節(jié)點(diǎn)，則該屬性返回 null。

2. previousSibling 屬性可返回某個(gè)節(jié)點(diǎn)之前緊跟的節(jié)點(diǎn)（處于同一樹(shù)層級(jí)中）。

語(yǔ)法：

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">nodeObject.previousSibling </pre>

說(shuō)明：如果無(wú)此節(jié)點(diǎn)，則該屬性返回 null。

注意: 兩個(gè)屬性獲取的是節(jié)點(diǎn)。Internet Explorer 會(huì)忽略節(jié)點(diǎn)間生成的空白文本節(jié)點(diǎn)（例如，換行符號(hào)），而其它瀏覽器不會(huì)忽略。

解決問(wèn)題方法:

判斷節(jié)點(diǎn)nodeType是否為1, 如是為元素節(jié)點(diǎn)，跳過(guò)。

[圖片上傳失敗...(image-84e03d-1656507738933)]

運(yùn)行結(jié)果:

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">LI = javascript
nextsibling: LI = jquery</pre>

12.插入節(jié)點(diǎn)appendChild()

在指定節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)列表之后添加一個(gè)新的子節(jié)點(diǎn)。

語(yǔ)法:

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">appendChild(newnode)</pre>

參數(shù):

newnode：指定追加的節(jié)點(diǎn)。

我們來(lái)看看，div標(biāo)簽內(nèi)創(chuàng)建一個(gè)新的 P 標(biāo)簽，代碼如下:

[圖片上傳失敗...(image-ed99a2-1656507738933)]

運(yùn)行結(jié)果:

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">HTML
JavaScript
This is a new p</pre>

13.插入節(jié)點(diǎn)insertBefore()

insertBefore() 方法可在已有的子節(jié)點(diǎn)前插入一個(gè)新的子節(jié)點(diǎn)。

語(yǔ)法:

insertBefore(newnode,node);

參數(shù):

newnode: 要插入的新節(jié)點(diǎn)。

node: 指定此節(jié)點(diǎn)前插入節(jié)點(diǎn)。

我們?cè)趤?lái)看看下面代碼，在指定節(jié)點(diǎn)前插入節(jié)點(diǎn)。

[圖片上傳失敗...(image-ed6562-1656507738932)]

運(yùn)行結(jié)果:

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">This is a new p
JavaScript
HTML</pre>

注意: otest.insertBefore(newnode,node); 也可以改為: otest.insertBefore(newnode,otest.childNodes[0]);

14.刪除節(jié)點(diǎn)removeChild()

removeChild() 方法從子節(jié)點(diǎn)列表中刪除某個(gè)節(jié)點(diǎn)。如刪除成功，此方法可返回被刪除的節(jié)點(diǎn)，如失敗，則返回 NULL。

語(yǔ)法:

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">nodeObject.removeChild(node)</pre>

參數(shù):

node ：必需，指定需要?jiǎng)h除的節(jié)點(diǎn)。

我們來(lái)看看下面代碼，刪除子點(diǎn)。

[圖片上傳失敗...(image-47b4a9-1656507738932)]

運(yùn)行結(jié)果:

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">HTML
刪除節(jié)點(diǎn)的內(nèi)容: javascript</pre>

注意: 把刪除的子節(jié)點(diǎn)賦值給 x，這個(gè)子節(jié)點(diǎn)不在DOM樹(shù)中，但是還存在內(nèi)存中，可通過(guò) x 操作。

如果要完全刪除對(duì)象，給 x 賦 null 值，代碼如下:

[圖片上傳失敗...(image-c1823a-1656507738932)]

15.替換元素節(jié)點(diǎn)replaceChild()

replaceChild 實(shí)現(xiàn)子節(jié)點(diǎn)(對(duì)象)的替換。返回被替換對(duì)象的引用。

語(yǔ)法：

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">node.replaceChild (newnode,oldnew ) </pre>

參數(shù)：

newnode : 必需，用于替換 oldnew 的對(duì)象。
oldnew : 必需，被 newnode 替換的對(duì)象。

我們來(lái)看看下面的代碼:

[圖片上傳失敗...(image-70ffb3-1656507738932)]

效果: 將文檔中的 Java 改為 JavaScript。

**注意: **

  1. 當(dāng) oldnode 被替換時(shí)，所有與之相關(guān)的屬性內(nèi)容都將被移除。

2. newnode 必須先被建立。

16.創(chuàng)建元素節(jié)點(diǎn)createElement

createElement()方法可創(chuàng)建元素節(jié)點(diǎn)。此方法可返回一個(gè) Element 對(duì)象。

語(yǔ)法：

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">document.createElement(tagName)</pre>

參數(shù):

tagName：字符串值，這個(gè)字符串用來(lái)指明創(chuàng)建元素的類型。

注意：要與appendChild() 或 insertBefore()方法聯(lián)合使用，將元素顯示在頁(yè)面中。

我們來(lái)創(chuàng)建一個(gè)按鈕，代碼如下：

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;"><script type="text/javascript">
var body = document.body;
var input = document.createElement("input");
input.type = "button";
input.value = "創(chuàng)建一個(gè)按鈕";
body.appendChild(input);
</script> </pre>

效果：在HTML文檔中，創(chuàng)建一個(gè)按鈕。

我們也可以使用setAttribute來(lái)設(shè)置屬性，代碼如下：

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;"><script type="text/javascript">
var body= document.body;
var btn = document.createElement("input");
btn.setAttribute("type", "text");
btn.setAttribute("name", "q");
btn.setAttribute("value", "使用setAttribute");
btn.setAttribute("onclick", "javascript:alert('This is a text!');");
body.appendChild(btn);
</script> </pre>

效果：在HTML文檔中，創(chuàng)建一個(gè)文本框，使用setAttribute設(shè)置屬性值。 當(dāng)點(diǎn)擊這個(gè)文本框時(shí)，會(huì)彈出對(duì)話框“This is a text!”。

17.創(chuàng)建文本節(jié)點(diǎn)createTextNode

createTextNode() 方法創(chuàng)建新的文本節(jié)點(diǎn)，返回新創(chuàng)建的 Text 節(jié)點(diǎn)。

語(yǔ)法：

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">document.createTextNode(data)</pre>

參數(shù)：

data : 字符串值，可規(guī)定此節(jié)點(diǎn)的文本。

我們來(lái)創(chuàng)建一個(gè)<div>元素并向其中添加一條消息，代碼如下：

[圖片上傳失敗...(image-defe4f-1656507738932)]

運(yùn)行結(jié)果:

[圖片上傳失敗...(image-4d583e-1656507738931)]

18.瀏覽器窗口可視區(qū)域大小

獲得瀏覽器窗口的尺寸（瀏覽器的視口，不包括工具欄和滾動(dòng)條）的方法:

一、對(duì)于IE9+、Chrome、Firefox、Opera 以及 Safari：

? window.innerHeight - 瀏覽器窗口的內(nèi)部高度

? window.innerWidth - 瀏覽器窗口的內(nèi)部寬度

二、對(duì)于 Internet Explorer 8、7、6、5：

? document.documentElement.clientHeight表示HTML文檔所在窗口的當(dāng)前高度。

? document.documentElement.clientWidth表示HTML文檔所在窗口的當(dāng)前寬度。

或者

Document對(duì)象的body屬性對(duì)應(yīng)HTML文檔的<body>標(biāo)簽

? document.body.clientHeight

? document.body.clientWidth

在不同瀏覽器都實(shí)用的 JavaScript 方案：

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">var w= document.documentElement.clientWidth
|| document.body.clientWidth;
var h= document.documentElement.clientHeight
|| document.body.clientHeight;

</pre>

19.網(wǎng)頁(yè)尺寸scrollHeight

scrollHeight和scrollWidth，獲取網(wǎng)頁(yè)內(nèi)容高度和寬度。

一、針對(duì)IE、Opera:

scrollHeight 是網(wǎng)頁(yè)內(nèi)容實(shí)際高度，可以小于 clientHeight。

二、針對(duì)NS、FF:

scrollHeight 是網(wǎng)頁(yè)內(nèi)容高度，不過(guò)最小值是 clientHeight。也就是說(shuō)網(wǎng)頁(yè)內(nèi)容實(shí)際高度小于 clientHeight 時(shí)，scrollHeight 返回 clientHeight 。

三、瀏覽器兼容性

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">var w=document.documentElement.scrollWidth
|| document.body.scrollWidth;
var h=document.documentElement.scrollHeight
|| document.body.scrollHeight;</pre>

注意:區(qū)分大小寫(xiě)

scrollHeight和scrollWidth還可獲取Dom元素中內(nèi)容實(shí)際占用的高度和寬度。

20.網(wǎng)頁(yè)尺寸offsetHeight

offsetHeight和offsetWidth，獲取網(wǎng)頁(yè)內(nèi)容高度和寬度(包括滾動(dòng)條等邊線，會(huì)隨窗口的顯示大小改變)。

一、值

offsetHeight = clientHeight + 滾動(dòng)條 + 邊框。

二、瀏覽器兼容性

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">var w= document.documentElement.offsetWidth
|| document.body.offsetWidth;
var h= document.documentElement.offsetHeight
|| document.body.offsetHeight;

</pre>

21.網(wǎng)頁(yè)卷去的距離與偏移量

我們先來(lái)看看下面的圖：

[圖片上傳失敗...(image-47c044-1656507738930)]

scrollLeft:設(shè)置或獲取位于給定對(duì)象左邊界與窗口中目前可見(jiàn)內(nèi)容的最左端之間的距離 ，即左邊灰色的內(nèi)容。

scrollTop:設(shè)置或獲取位于對(duì)象最頂端與窗口中可見(jiàn)內(nèi)容的最頂端之間的距離 ，即上邊灰色的內(nèi)容。

offsetLeft:獲取指定對(duì)象相對(duì)于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算左側(cè)位置 。

offsetTop:獲取指定對(duì)象相對(duì)于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算頂端位置 。

注意:

1. 區(qū)分大小寫(xiě)

2. offsetParent：布局中設(shè)置postion屬性(Relative、Absolute、fixed)的父容器，從最近的父節(jié)點(diǎn)開(kāi)始，一層層向上找，直到HTML的body。

一、測(cè)試題-簡(jiǎn)答題

1、DOM中的方法區(qū)分大小寫(xiě)么？

解答：區(qū)分

2、DOM中元素和節(jié)點(diǎn)的關(guān)系式什么？

解答：元素就是標(biāo)簽，節(jié)點(diǎn)中有元素節(jié)點(diǎn)，也是標(biāo)簽，節(jié)點(diǎn)中還有其它節(jié)點(diǎn)

3、DOM 將HTML文檔呈現(xiàn)為帶有元素、屬性和文本的樹(shù)結(jié)構(gòu)（節(jié)點(diǎn)樹(shù)）。 這句話對(duì)么？

解答：對(duì)

4、舉一個(gè)屬性節(jié)點(diǎn)的例子？

解答：如<a>標(biāo)簽的鏈接屬性。屬性節(jié)點(diǎn):元素屬性，

5、屬性節(jié)點(diǎn)就是元素的屬性么？

解答：對(duì)的

6、一個(gè)節(jié)點(diǎn)，有哪三個(gè)最重要的屬性？

解答：nodeName，nodeType，nodeValue

7、document如何創(chuàng)建一個(gè)包含著給定文本的新文本節(jié)點(diǎn)？

解答：ｄｏｃｕｍｅｎｔ、ｃｒｅａｔｅＴｅｘｔＮｏｄｅ（）

8、tagName是什么？

解答：Tagname是標(biāo)簽的名稱，如p、a、img等標(biāo)簽名。

9、如何獲取DOM中所有集合類的長(zhǎng)度？

解答：length屬性

10、 如何獲取元素節(jié)點(diǎn)的屬性值？

解答：通過(guò)元素節(jié)點(diǎn)的屬性名稱獲取屬性的值。elementNode.getAttribute(name)

11、 nodeValue 是什么？

解答：節(jié)點(diǎn)的值

12、nodeName 是什么？

解答：節(jié)點(diǎn)的名稱

13、nodeType 是什么？

解答：節(jié)點(diǎn)的類型

14、元素節(jié)點(diǎn)的 nodeName是什么？

解答：與標(biāo)簽名相同

15、文本節(jié)點(diǎn)的 nodeName是什么？

解答：永遠(yuǎn)是 #text

16、文檔節(jié)點(diǎn)的 nodeName是什么？

解答：永遠(yuǎn)是 #document

17、元素節(jié)點(diǎn)、文本節(jié)點(diǎn)、屬性節(jié)點(diǎn)的nodeValue是什么？

解答：

1. 元素節(jié)點(diǎn)的 nodeValue 是 undefined 或 null
2. 文本節(jié)點(diǎn)的 nodeValue 是文本自身
3. 屬性節(jié)點(diǎn)的 nodeValue 是屬性的值

18、 節(jié)點(diǎn)的nodeName和nodeTyle是只讀的，那么節(jié)點(diǎn)的nodeValue是么？

解答：不是，所以可以賦值，可以修改

</article>

原文地址：https://www.cnblogs.com/Renyi-Fan/p/8088101.html
<article style="margin: 0px; padding: 0px;">

一、總結(jié)

一句話總結(jié)：

1、DOM中的方法區(qū)分大小寫(xiě)么？

解答：區(qū)分

2、DOM中元素和節(jié)點(diǎn)的關(guān)系式什么？

解答：元素就是標(biāo)簽，節(jié)點(diǎn)中有元素節(jié)點(diǎn)，也是標(biāo)簽，節(jié)點(diǎn)中還有其它節(jié)點(diǎn)

3、DOM 將HTML文檔呈現(xiàn)為帶有元素、屬性和文本的樹(shù)結(jié)構(gòu)（節(jié)點(diǎn)樹(shù)）。 這句話對(duì)么？

解答：對(duì)

4、舉一個(gè)屬性節(jié)點(diǎn)的例子？

解答：如<a>標(biāo)簽的鏈接屬性。屬性節(jié)點(diǎn):元素屬性，

5、屬性節(jié)點(diǎn)就是元素的屬性么？

解答：對(duì)的

6、一個(gè)節(jié)點(diǎn)，有哪三個(gè)最重要的屬性？

解答：nodeName，nodeType，nodeValue

7、document如何創(chuàng)建一個(gè)包含著給定文本的新文本節(jié)點(diǎn)？

解答：ｄｏｃｕｍｅｎｔ、ｃｒｅａｔｅＴｅｘｔＮｏｄｅ（）

8、tagName是什么？

解答：Tagname是標(biāo)簽的名稱，如p、a、img等標(biāo)簽名。

9、如何獲取DOM中所有集合類的長(zhǎng)度？

解答：length屬性

10、 如何獲取元素節(jié)點(diǎn)的屬性值？

解答：通過(guò)元素節(jié)點(diǎn)的屬性名稱獲取屬性的值。elementNode.getAttribute(name)

11、 nodeValue 是什么？

解答：節(jié)點(diǎn)的值

12、nodeName 是什么？

解答：節(jié)點(diǎn)的名稱

13、nodeType 是什么？

解答：節(jié)點(diǎn)的類型

14、元素節(jié)點(diǎn)的 nodeName是什么？

解答：與標(biāo)簽名相同

15、文本節(jié)點(diǎn)的 nodeName是什么？

解答：永遠(yuǎn)是 #text

16、文檔節(jié)點(diǎn)的 nodeName是什么？

解答：永遠(yuǎn)是 #document

17、元素節(jié)點(diǎn)、文本節(jié)點(diǎn)、屬性節(jié)點(diǎn)的nodeValue是什么？

解答：

1. 元素節(jié)點(diǎn)的 nodeValue 是 undefined 或 null
2. 文本節(jié)點(diǎn)的 nodeValue 是文本自身
3. 屬性節(jié)點(diǎn)的 nodeValue 是屬性的值

18、 節(jié)點(diǎn)的nodeName和nodeTyle是只讀的，那么節(jié)點(diǎn)的nodeValue是么？

解答：不是，所以可以賦值，可以修改

二、js的dom對(duì)象

1.認(rèn)識(shí)DOM

文檔對(duì)象模型DOM（Document Object Model）定義訪問(wèn)和處理HTML文檔的標(biāo)準(zhǔn)方法。DOM 將HTML文檔呈現(xiàn)為帶有元素、屬性和文本的樹(shù)結(jié)構(gòu)（節(jié)點(diǎn)樹(shù)）。

先來(lái)看看下面代碼:

[圖片上傳失敗...(image-82dcef-1656507744987)]

將HTML代碼分解為DOM節(jié)點(diǎn)層次圖:

[圖片上傳失敗...(image-4f1a90-1656507744987)]

HTML****文檔可以說(shuō)由節(jié)點(diǎn)構(gòu)成的集合，DOM節(jié)點(diǎn)有:

1. ****元素節(jié)點(diǎn)：上圖中<html>、<body>、<p>等都是元素節(jié)點(diǎn)，即標(biāo)簽。

2. ****文本節(jié)點(diǎn):向用戶展示的內(nèi)容，如<li>...</li>中的JavaScript、DOM、CSS等文本。

3. ****屬性節(jié)點(diǎn):元素屬性，如<a>標(biāo)簽的鏈接屬性。

節(jié)點(diǎn)屬性:

[圖片上傳失敗...(image-37400a-1656507744987)]

遍歷節(jié)點(diǎn)樹(shù):

[圖片上傳失敗...(image-79c13-1656507744987)]

以上圖ul為例，它的父級(jí)節(jié)點(diǎn)body,它的子節(jié)點(diǎn)3個(gè)li,它的兄弟結(jié)點(diǎn)h2、P。

DOM操作:

[圖片上傳失敗...(image-758038-1656507744987)]

注意:前兩個(gè)是document方法。

2.getElementsByName()方法

返回帶有指定名稱的節(jié)點(diǎn)對(duì)象的集合。

語(yǔ)法：

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">document.getElementsByName(name)</pre>

與getElementById() 方法不同的是，通過(guò)元素的 name 屬性查詢?cè)兀皇峭ㄟ^(guò) id 屬性。

注意:

  1. 因?yàn)槲臋n中的 name 屬性可能不唯一，所有 getElementsByName() 方法返回的是元素的數(shù)組，而不是一個(gè)元素。

  2. 和數(shù)組類似也有l(wèi)ength屬性，可以和訪問(wèn)數(shù)組一樣的方法來(lái)訪問(wèn)，從0開(kāi)始。

看看下面的代碼:

[圖片上傳失敗...(image-ad2a1a-1656507744987)]

運(yùn)行結(jié)果:

[圖片上傳失敗...(image-b5cf73-1656507744987)]

3.getElementsByTagName()方法

返回帶有指定標(biāo)簽名的節(jié)點(diǎn)對(duì)象的集合。返回元素的順序是它們?cè)谖臋n中的順序。

語(yǔ)法:

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">document.getElementsByTagName(Tagname)</pre>

說(shuō)明:

  1. Tagname是標(biāo)簽的名稱，如p、a、img等標(biāo)簽名。

2. 和數(shù)組類似也有l(wèi)ength屬性，可以和訪問(wèn)數(shù)組一樣的方法來(lái)訪問(wèn)，所以從0開(kāi)始。

看看下面代碼，通過(guò)getElementsByTagName()獲取節(jié)點(diǎn)。

[圖片上傳失敗...(image-6206dc-1656507744987)]

4.區(qū)別getElementByID,getElementsByName,getElementsByTagName

以人來(lái)舉例說(shuō)明，人有能標(biāo)識(shí)身份的身份證，有姓名，有類別(大人、小孩、老人)等。

1.** ID** 是一個(gè)人的身份證號(hào)碼，是唯一的。所以通過(guò)getElementById獲取的是指定的一個(gè)人。

  1. Name 是他的名字，可以重復(fù)。所以通過(guò)getElementsByName獲取名字相同的人集合。

  2. TagName可看似某類，getElementsByTagName獲取相同類的人集合。如獲取小孩這類人，getElementsByTagName("小孩")。

把上面的例子轉(zhuǎn)換到HTML中，如下:

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;"><input type="checkbox" name="hobby" id="hobby1"> 音樂(lè)</pre>

input標(biāo)簽就像人的類別。

name屬性就像人的姓名。

id屬性就像人的身份證。

方法總結(jié)如下:

[圖片上傳失敗...(image-22389e-1656507744986)]

注意：方法區(qū)分大小寫(xiě)

通過(guò)下面的例子(6個(gè)name="hobby"的復(fù)選項(xiàng)，兩個(gè)按鈕)來(lái)區(qū)分三種方法的不同:

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;"> <input type="checkbox" name="hobby" id="hobby1"> 音樂(lè)
<input type="checkbox" name="hobby" id="hobby2"> 登山
<input type="checkbox" name="hobby" id="hobby3"> 游泳
<input type="checkbox" name="hobby" id="hobby4"> 閱讀
<input type="checkbox" name="hobby" id="hobby5"> 打球
<input type="checkbox" name="hobby" id="hobby6"> 跑步
<input type="button" value = "全選" id="button1">
<input type="button" value = "全不選" id="button1"></pre>

1. document.getElementsByTagName("input")，結(jié)果為獲取所有標(biāo)簽為input的元素，共8個(gè)。

  1. document.getElementsByName("hobby")，結(jié)果為獲取屬性name="hobby"的元素，共6個(gè)。

  2. document.getElementById("hobby6")，結(jié)果為獲取屬性id="hobby6"的元素，只有一個(gè)，"跑步"這個(gè)復(fù)選項(xiàng)。

5.getAttribute()方法

通過(guò)元素節(jié)點(diǎn)的屬性名稱獲取屬性的值。

語(yǔ)法：

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">elementNode.getAttribute(name)</pre>

說(shuō)明:

1. elementNode：使用getElementById()、getElementsByTagName()等方法，獲取到的元素節(jié)點(diǎn)。

2. name：要想查詢的元素節(jié)點(diǎn)的屬性名字

看看下面的代碼，獲取h1標(biāo)簽的屬性值：

[圖片上傳失敗...(image-6d175a-1656507744986)]

運(yùn)行結(jié)果:

h1標(biāo)簽的ID ：alink
h1標(biāo)簽的title ：getAttribute()獲取標(biāo)簽的屬值

6.setAttribute()方法

setAttribute() 方法增加一個(gè)指定名稱和值的新屬性，或者把一個(gè)現(xiàn)有的屬性設(shè)定為指定的值。

語(yǔ)法：

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">elementNode.setAttribute(name,value)</pre>

說(shuō)明：

1.name: 要設(shè)置的屬性名。

2.value: 要設(shè)置的屬性值。

注意：

1.把指定的屬性設(shè)置為指定的值。如果不存在具有指定名稱的屬性，該方法將創(chuàng)建一個(gè)新屬性。

2.類似于getAttribute()方法，setAttribute()方法只能通過(guò)元素節(jié)點(diǎn)對(duì)象調(diào)用的函數(shù)。

7.節(jié)點(diǎn)屬性

在文檔對(duì)象模型 (DOM) 中，每個(gè)節(jié)點(diǎn)都是一個(gè)對(duì)象。DOM 節(jié)點(diǎn)有三個(gè)重要的屬性 ：

1. nodeName : 節(jié)點(diǎn)的名稱

2. nodeValue ：節(jié)點(diǎn)的值

3. nodeType ：節(jié)點(diǎn)的類型

**一、nodeName 屬性: **節(jié)點(diǎn)的名稱，是只讀的。

  1. 元素節(jié)點(diǎn)的 nodeName 與標(biāo)簽名相同
  2. 屬性節(jié)點(diǎn)的 nodeName 是屬性的名稱
  3. 文本節(jié)點(diǎn)的 nodeName 永遠(yuǎn)是 #text
  4. 文檔節(jié)點(diǎn)的 nodeName 永遠(yuǎn)是 #document

二、nodeValue 屬性：節(jié)點(diǎn)的值

1. 元素節(jié)點(diǎn)的 nodeValue 是 undefined 或 null
2. 文本節(jié)點(diǎn)的 nodeValue 是文本自身
3. 屬性節(jié)點(diǎn)的 nodeValue 是屬性的值

**三、nodeType 屬性: **節(jié)點(diǎn)的類型，是只讀的。以下常用的幾種結(jié)點(diǎn)類型:

元素類型 節(jié)點(diǎn)類型
元素 1
屬性 2
文本 3
注釋 8
文檔 9

8.訪問(wèn)子結(jié)點(diǎn)childNodes

訪問(wèn)選定元素節(jié)點(diǎn)下的所有子節(jié)點(diǎn)的列表，返回的值可以看作是一個(gè)數(shù)組，他具有l(wèi)ength屬性。

語(yǔ)法：

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">elementNode.childNodes</pre>

注意：

如果選定的節(jié)點(diǎn)沒(méi)有子節(jié)點(diǎn)，則該屬性返回不包含節(jié)點(diǎn)的 NodeList。

我們來(lái)看看下面的代碼:

[圖片上傳失敗...(image-48bc37-1656507744985)]

運(yùn)行結(jié)果:

IE:

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;"> UL子節(jié)點(diǎn)個(gè)數(shù):3
節(jié)點(diǎn)類型:1</pre>

其它瀏覽器:

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;"> UL子節(jié)點(diǎn)個(gè)數(shù):7
節(jié)點(diǎn)類型:3</pre>

注意:

1. IE全系列、firefox、chrome、opera、safari兼容問(wèn)題

  1. 節(jié)點(diǎn)之間的空白符，在firefox、chrome、opera、safari瀏覽器是文本節(jié)點(diǎn)，所以IE是3，其它瀏覽器是7，如下圖所示:

[圖片上傳失敗...(image-604772-1656507744985)]

如果把代碼改成這樣:

<ul><li>javascript</li><li>jQuery</li><li>PHP</li></ul>

運(yùn)行結(jié)果:（IE和其它瀏覽器結(jié)果是一樣的）

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;"> UL子節(jié)點(diǎn)個(gè)數(shù):3
節(jié)點(diǎn)類型:1</pre>

9.訪問(wèn)子結(jié)點(diǎn)的第一和最后項(xiàng)

一、firstChild屬性返回‘childNodes’數(shù)組的第一個(gè)子節(jié)點(diǎn)。如果選定的節(jié)點(diǎn)沒(méi)有子節(jié)點(diǎn)，則該屬性返回 NULL。

語(yǔ)法：

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">node.firstChild</pre>

說(shuō)明：與elementNode.childNodes[0]是同樣的效果。

二、lastChild 屬性返回‘childNodes’數(shù)組的最后一個(gè)子節(jié)點(diǎn)。如果選定的節(jié)點(diǎn)沒(méi)有子節(jié)點(diǎn)，則該屬性返回 NULL。

語(yǔ)法：

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">node.lastChild</pre>

說(shuō)明：與elementNode.childNodes[elementNode.childNodes.length-1]是同樣的效果。

**注意: **上一節(jié)中，我們知道Internet Explorer 會(huì)忽略節(jié)點(diǎn)之間生成的空白文本節(jié)點(diǎn)，而其它瀏覽器不會(huì)。我們可以通過(guò)檢測(cè)節(jié)點(diǎn)類型，過(guò)濾子節(jié)點(diǎn)。 (以后章節(jié)講解)

10.訪問(wèn)父節(jié)點(diǎn)parentNode

獲取指定節(jié)點(diǎn)的父節(jié)點(diǎn)

語(yǔ)法：

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">elementNode.parentNode</pre>

注意:父節(jié)點(diǎn)只能有一個(gè)。

看看下面的例子,獲取 P 節(jié)點(diǎn)的父節(jié)點(diǎn)，代碼如下:

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;"><div id="text">
<p id="con"> parentNode 獲取指點(diǎn)節(jié)點(diǎn)的父節(jié)點(diǎn)</p>
</div>
<script type="text/javascript">
var mynode= document.getElementById("con");
document.write(mynode.parentNode.nodeName);
</script></pre>

運(yùn)行結(jié)果:

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">parentNode 獲取指點(diǎn)節(jié)點(diǎn)的父節(jié)點(diǎn)
DIV</pre>

訪問(wèn)祖節(jié)點(diǎn):

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">elementNode.parentNode.parentNode</pre>

看看下面的代碼:

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;"><div id="text">
<p>
parentNode
<span id="con"> 獲取指點(diǎn)節(jié)點(diǎn)的父節(jié)點(diǎn)</span>
</p>
</div>
<script type="text/javascript">
var mynode= document.getElementById("con");
document.write(mynode.parentNode.parentNode.nodeName);
</script></pre>

運(yùn)行結(jié)果:

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">parentNode獲取指點(diǎn)節(jié)點(diǎn)的父節(jié)點(diǎn)
DIV</pre>

注意: 瀏覽器兼容問(wèn)題，chrome、firefox等瀏覽器標(biāo)簽之間的空白也算是一個(gè)文本節(jié)點(diǎn)。

11.訪問(wèn)兄弟節(jié)點(diǎn)

  1. nextSibling 屬性可返回某個(gè)節(jié)點(diǎn)之后緊跟的節(jié)點(diǎn)（處于同一樹(shù)層級(jí)中）。

語(yǔ)法：

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">nodeObject.nextSibling</pre>

說(shuō)明：如果無(wú)此節(jié)點(diǎn)，則該屬性返回 null。

2. previousSibling 屬性可返回某個(gè)節(jié)點(diǎn)之前緊跟的節(jié)點(diǎn)（處于同一樹(shù)層級(jí)中）。

語(yǔ)法：

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">nodeObject.previousSibling </pre>

說(shuō)明：如果無(wú)此節(jié)點(diǎn)，則該屬性返回 null。

注意: 兩個(gè)屬性獲取的是節(jié)點(diǎn)。Internet Explorer 會(huì)忽略節(jié)點(diǎn)間生成的空白文本節(jié)點(diǎn)（例如，換行符號(hào)），而其它瀏覽器不會(huì)忽略。

解決問(wèn)題方法:

判斷節(jié)點(diǎn)nodeType是否為1, 如是為元素節(jié)點(diǎn)，跳過(guò)。

[圖片上傳失敗...(image-ec8231-1656507744985)]

運(yùn)行結(jié)果:

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">LI = javascript
nextsibling: LI = jquery</pre>

12.插入節(jié)點(diǎn)appendChild()

在指定節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)列表之后添加一個(gè)新的子節(jié)點(diǎn)。

語(yǔ)法:

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">appendChild(newnode)</pre>

參數(shù):

newnode：指定追加的節(jié)點(diǎn)。

我們來(lái)看看，div標(biāo)簽內(nèi)創(chuàng)建一個(gè)新的 P 標(biāo)簽，代碼如下:

[圖片上傳失敗...(image-ebfcf5-1656507744985)]

運(yùn)行結(jié)果:

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">HTML
JavaScript
This is a new p</pre>

13.插入節(jié)點(diǎn)insertBefore()

insertBefore() 方法可在已有的子節(jié)點(diǎn)前插入一個(gè)新的子節(jié)點(diǎn)。

語(yǔ)法:

insertBefore(newnode,node);

參數(shù):

newnode: 要插入的新節(jié)點(diǎn)。

node: 指定此節(jié)點(diǎn)前插入節(jié)點(diǎn)。

我們?cè)趤?lái)看看下面代碼，在指定節(jié)點(diǎn)前插入節(jié)點(diǎn)。

[圖片上傳失敗...(image-bbd6b6-1656507744984)]

運(yùn)行結(jié)果:

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">This is a new p
JavaScript
HTML</pre>

注意: otest.insertBefore(newnode,node); 也可以改為: otest.insertBefore(newnode,otest.childNodes[0]);

14.刪除節(jié)點(diǎn)removeChild()

removeChild() 方法從子節(jié)點(diǎn)列表中刪除某個(gè)節(jié)點(diǎn)。如刪除成功，此方法可返回被刪除的節(jié)點(diǎn)，如失敗，則返回 NULL。

語(yǔ)法:

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">nodeObject.removeChild(node)</pre>

參數(shù):

node ：必需，指定需要?jiǎng)h除的節(jié)點(diǎn)。

我們來(lái)看看下面代碼，刪除子點(diǎn)。

[圖片上傳失敗...(image-e209e0-1656507744984)]

運(yùn)行結(jié)果:

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">HTML
刪除節(jié)點(diǎn)的內(nèi)容: javascript</pre>

注意: 把刪除的子節(jié)點(diǎn)賦值給 x，這個(gè)子節(jié)點(diǎn)不在DOM樹(shù)中，但是還存在內(nèi)存中，可通過(guò) x 操作。

如果要完全刪除對(duì)象，給 x 賦 null 值，代碼如下:

[圖片上傳失敗...(image-537892-1656507744984)]

15.替換元素節(jié)點(diǎn)replaceChild()

replaceChild 實(shí)現(xiàn)子節(jié)點(diǎn)(對(duì)象)的替換。返回被替換對(duì)象的引用。

語(yǔ)法：

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">node.replaceChild (newnode,oldnew ) </pre>

參數(shù)：

newnode : 必需，用于替換 oldnew 的對(duì)象。
oldnew : 必需，被 newnode 替換的對(duì)象。

我們來(lái)看看下面的代碼:

[圖片上傳失敗...(image-ec03f3-1656507744984)]

效果: 將文檔中的 Java 改為 JavaScript。

**注意: **

  1. 當(dāng) oldnode 被替換時(shí)，所有與之相關(guān)的屬性內(nèi)容都將被移除。

2. newnode 必須先被建立。

16.創(chuàng)建元素節(jié)點(diǎn)createElement

createElement()方法可創(chuàng)建元素節(jié)點(diǎn)。此方法可返回一個(gè) Element 對(duì)象。

語(yǔ)法：

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">document.createElement(tagName)</pre>

參數(shù):

tagName：字符串值，這個(gè)字符串用來(lái)指明創(chuàng)建元素的類型。

注意：要與appendChild() 或 insertBefore()方法聯(lián)合使用，將元素顯示在頁(yè)面中。

我們來(lái)創(chuàng)建一個(gè)按鈕，代碼如下：

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;"><script type="text/javascript">
var body = document.body;
var input = document.createElement("input");
input.type = "button";
input.value = "創(chuàng)建一個(gè)按鈕";
body.appendChild(input);
</script> </pre>

效果：在HTML文檔中，創(chuàng)建一個(gè)按鈕。

我們也可以使用setAttribute來(lái)設(shè)置屬性，代碼如下：

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;"><script type="text/javascript">
var body= document.body;
var btn = document.createElement("input");
btn.setAttribute("type", "text");
btn.setAttribute("name", "q");
btn.setAttribute("value", "使用setAttribute");
btn.setAttribute("onclick", "javascript:alert('This is a text!');");
body.appendChild(btn);
</script> </pre>

效果：在HTML文檔中，創(chuàng)建一個(gè)文本框，使用setAttribute設(shè)置屬性值。 當(dāng)點(diǎn)擊這個(gè)文本框時(shí)，會(huì)彈出對(duì)話框“This is a text!”。

17.創(chuàng)建文本節(jié)點(diǎn)createTextNode

createTextNode() 方法創(chuàng)建新的文本節(jié)點(diǎn)，返回新創(chuàng)建的 Text 節(jié)點(diǎn)。

語(yǔ)法：

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">document.createTextNode(data)</pre>

參數(shù)：

data : 字符串值，可規(guī)定此節(jié)點(diǎn)的文本。

我們來(lái)創(chuàng)建一個(gè)<div>元素并向其中添加一條消息，代碼如下：

[圖片上傳失敗...(image-b02cf8-1656507744984)]

運(yùn)行結(jié)果:

[圖片上傳失敗...(image-fa662b-1656507744984)]

18.瀏覽器窗口可視區(qū)域大小

獲得瀏覽器窗口的尺寸（瀏覽器的視口，不包括工具欄和滾動(dòng)條）的方法:

一、對(duì)于IE9+、Chrome、Firefox、Opera 以及 Safari：

? window.innerHeight - 瀏覽器窗口的內(nèi)部高度

? window.innerWidth - 瀏覽器窗口的內(nèi)部寬度

二、對(duì)于 Internet Explorer 8、7、6、5：

? document.documentElement.clientHeight表示HTML文檔所在窗口的當(dāng)前高度。

? document.documentElement.clientWidth表示HTML文檔所在窗口的當(dāng)前寬度。

或者

Document對(duì)象的body屬性對(duì)應(yīng)HTML文檔的<body>標(biāo)簽

? document.body.clientHeight

? document.body.clientWidth

在不同瀏覽器都實(shí)用的 JavaScript 方案：

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">var w= document.documentElement.clientWidth
|| document.body.clientWidth;
var h= document.documentElement.clientHeight
|| document.body.clientHeight;

</pre>

19.網(wǎng)頁(yè)尺寸scrollHeight

scrollHeight和scrollWidth，獲取網(wǎng)頁(yè)內(nèi)容高度和寬度。

一、針對(duì)IE、Opera:

scrollHeight 是網(wǎng)頁(yè)內(nèi)容實(shí)際高度，可以小于 clientHeight。

二、針對(duì)NS、FF:

scrollHeight 是網(wǎng)頁(yè)內(nèi)容高度，不過(guò)最小值是 clientHeight。也就是說(shuō)網(wǎng)頁(yè)內(nèi)容實(shí)際高度小于 clientHeight 時(shí)，scrollHeight 返回 clientHeight 。

三、瀏覽器兼容性

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">var w=document.documentElement.scrollWidth
|| document.body.scrollWidth;
var h=document.documentElement.scrollHeight
|| document.body.scrollHeight;</pre>

注意:區(qū)分大小寫(xiě)

scrollHeight和scrollWidth還可獲取Dom元素中內(nèi)容實(shí)際占用的高度和寬度。

20.網(wǎng)頁(yè)尺寸offsetHeight

offsetHeight和offsetWidth，獲取網(wǎng)頁(yè)內(nèi)容高度和寬度(包括滾動(dòng)條等邊線，會(huì)隨窗口的顯示大小改變)。

一、值

offsetHeight = clientHeight + 滾動(dòng)條 + 邊框。

二、瀏覽器兼容性

<pre class="code" style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding-top, padding-bottom, margin-top, margin-bottom, color, opacity; overflow: auto;">var w= document.documentElement.offsetWidth
|| document.body.offsetWidth;
var h= document.documentElement.offsetHeight
|| document.body.offsetHeight;

</pre>

21.網(wǎng)頁(yè)卷去的距離與偏移量

我們先來(lái)看看下面的圖：

[圖片上傳失敗...(image-4d41df-1656507744981)]

scrollLeft:設(shè)置或獲取位于給定對(duì)象左邊界與窗口中目前可見(jiàn)內(nèi)容的最左端之間的距離 ，即左邊灰色的內(nèi)容。

scrollTop:設(shè)置或獲取位于對(duì)象最頂端與窗口中可見(jiàn)內(nèi)容的最頂端之間的距離 ，即上邊灰色的內(nèi)容。

offsetLeft:獲取指定對(duì)象相對(duì)于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算左側(cè)位置 。

offsetTop:獲取指定對(duì)象相對(duì)于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算頂端位置 。

注意:

1. 區(qū)分大小寫(xiě)

2. offsetParent：布局中設(shè)置postion屬性(Relative、Absolute、fixed)的父容器，從最近的父節(jié)點(diǎn)開(kāi)始，一層層向上找，直到HTML的body。

一、測(cè)試題-簡(jiǎn)答題

1、DOM中的方法區(qū)分大小寫(xiě)么？

解答：區(qū)分

2、DOM中元素和節(jié)點(diǎn)的關(guān)系式什么？

解答：元素就是標(biāo)簽，節(jié)點(diǎn)中有元素節(jié)點(diǎn)，也是標(biāo)簽，節(jié)點(diǎn)中還有其它節(jié)點(diǎn)

3、DOM 將HTML文檔呈現(xiàn)為帶有元素、屬性和文本的樹(shù)結(jié)構(gòu)（節(jié)點(diǎn)樹(shù)）。 這句話對(duì)么？

解答：對(duì)

4、舉一個(gè)屬性節(jié)點(diǎn)的例子？

解答：如<a>標(biāo)簽的鏈接屬性。屬性節(jié)點(diǎn):元素屬性，

5、屬性節(jié)點(diǎn)就是元素的屬性么？

解答：對(duì)的

6、一個(gè)節(jié)點(diǎn)，有哪三個(gè)最重要的屬性？

解答：nodeName，nodeType，nodeValue

7、document如何創(chuàng)建一個(gè)包含著給定文本的新文本節(jié)點(diǎn)？

解答：ｄｏｃｕｍｅｎｔ、ｃｒｅａｔｅＴｅｘｔＮｏｄｅ（）

8、tagName是什么？

解答：Tagname是標(biāo)簽的名稱，如p、a、img等標(biāo)簽名。

9、如何獲取DOM中所有集合類的長(zhǎng)度？

解答：length屬性

10、 如何獲取元素節(jié)點(diǎn)的屬性值？

解答：通過(guò)元素節(jié)點(diǎn)的屬性名稱獲取屬性的值。elementNode.getAttribute(name)

11、 nodeValue 是什么？

解答：節(jié)點(diǎn)的值

12、nodeName 是什么？

解答：節(jié)點(diǎn)的名稱

13、nodeType 是什么？

解答：節(jié)點(diǎn)的類型

14、元素節(jié)點(diǎn)的 nodeName是什么？

解答：與標(biāo)簽名相同

15、文本節(jié)點(diǎn)的 nodeName是什么？

解答：永遠(yuǎn)是 #text

16、文檔節(jié)點(diǎn)的 nodeName是什么？

解答：永遠(yuǎn)是 #document

17、元素節(jié)點(diǎn)、文本節(jié)點(diǎn)、屬性節(jié)點(diǎn)的nodeValue是什么？

解答：

1. 元素節(jié)點(diǎn)的 nodeValue 是 undefined 或 null
2. 文本節(jié)點(diǎn)的 nodeValue 是文本自身
3. 屬性節(jié)點(diǎn)的 nodeValue 是屬性的值

18、 節(jié)點(diǎn)的nodeName和nodeTyle是只讀的，那么節(jié)點(diǎn)的nodeValue是么？

解答：不是，所以可以賦值，可以修改

</article>

原文地址：https://www.cnblogs.com/Renyi-Fan/p/8088101.html

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 一、集合 （一）.set集合 Set繼承于Collection接口，是一個(gè)不允許出現(xiàn)重復(fù)元素，并且無(wú)序的集合，主要...
    平淡cool閱讀 139評(píng)論 0贊 0
  • 向上取整ceil() ceil() 方法可對(duì)一個(gè)數(shù)進(jìn)行向上取整。 向下取整floor() floor() 方法可對(duì)...
    小撓許閱讀 276評(píng)論 0贊 0
  • <!DOCTYPE html> Leon 序號(hào) 姓名 年齡 性別 ...
    小胖子_d7d8閱讀 198評(píng)論 0贊 0
  • 周日 DOM和BOM DOM （Document Object Model，簡(jiǎn)稱DOM），是W3C組織推薦的處理可...
    布吉閣閱讀 240評(píng)論 0贊 0
  • 第10章 DOM 1. 節(jié)點(diǎn)層次 文檔節(jié)點(diǎn)是每個(gè)文檔的根節(jié)點(diǎn)。 (1) Node 類型 每個(gè)節(jié)點(diǎn)都有一個(gè) node...
    yinxmm閱讀 406評(píng)論 0贊 0