自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

詳解JavaScript DOM中的Node節(jié)點(diǎn)

作者：佚名
開發(fā) 前端
在DOM（文檔對(duì)象模型）中，HTML文檔的層次結(jié)構(gòu)被表示為樹形結(jié)構(gòu)，HTML文檔的樹形表示主要包含表示元素或標(biāo)記的節(jié)點(diǎn)和標(biāo)識(shí)文本串的節(jié)點(diǎn)構(gòu)成。文章將詳細(xì)的介紹JavaScript DOM中的Node節(jié)點(diǎn)。

在DOM（文檔對(duì)象模型）中，HTML文檔的層次結(jié)構(gòu)被表示為樹形結(jié)構(gòu)，HTML文檔的樹形表示主要包含表示元素或標(biāo)記的節(jié)點(diǎn)和標(biāo)識(shí)文本串的節(jié)點(diǎn)構(gòu)成。在JavaScript DOM中，Node常常被翻譯成節(jié)點(diǎn)，下面我們通過實(shí)例，來了解一下Node的屬性及方法。

51CTO推薦閱讀：深入解讀JavaScript中BOM和DOM

Node的屬性介紹：

  1. nodeType：顯示節(jié)點(diǎn)的類型  
  2. nodeName：顯示節(jié)點(diǎn)的名稱  
  3. nodeValue：顯示節(jié)點(diǎn)的值  
  4. attributes：獲取一個(gè)屬性節(jié)點(diǎn)  
  5. firstChild：表示某一節(jié)點(diǎn)的***個(gè)節(jié)點(diǎn)  
  6. lastChild：表示某一節(jié)點(diǎn)的***一個(gè)子節(jié)點(diǎn)  
  7. childNodes：表示所在節(jié)點(diǎn)的所有子節(jié)點(diǎn)  
  8. parentNode：表示所在節(jié)點(diǎn)的父節(jié)點(diǎn)  
  9. nextSibling：緊挨著當(dāng)前節(jié)點(diǎn)的下一個(gè)節(jié)點(diǎn)  
  10. previousSibling：緊挨著當(dāng)前節(jié)點(diǎn)的上一個(gè)節(jié)點(diǎn) 

Node有各種各樣的節(jié)點(diǎn)，我們先花一些時(shí)間認(rèn)識(shí)他們，同時(shí)一并了解nodeType，nodeName和nodeValue屬性：

名稱：元素節(jié)點(diǎn)

◆nodeType：ELEMENT_NODE

◆nodeType值：1

◆nodeName：元素標(biāo)記名

◆nodeValue：null

  1. <body> 
  2. <div id = "t" ><span></span></div> 
  3. </body> 
  4. <script> 
  5. var d = document.getElementById("t");  
  6. document.write(d.nodeType);  
  7. document.write(d.nodeName);  
  8. document.write(d.nodeValue);  
  9. //顯示 1 DIV null  
  10. </script> 

名稱：屬性節(jié)點(diǎn)

◆nodeType：ATTRIBUTE_NODE

◆nodeType值：2

◆nodeName：屬性名

◆nodeValue：屬性值

  1. <body> 
  2. <div id = "t" name="aaa"><span></span></div> 
  3. </body> 
  4. <script> 
  5. var d = document.getElementById("t").getAttributeNode("name");  
  6. document.write(d.nodeType);  
  7. document.write(d.nodeName);  
  8. document.write(d.nodeValue);  
  9. //顯示 2 name aaa  
  10. </script> 

名稱：文本節(jié)點(diǎn)

◆nodeType：TEXT_NODE

◆nodeType值：3

◆nodeName：#text

◆nodeValue：文本內(nèi)容

  1. <body> 
  2. <div id = "t">bbb</div> 
  3. </body> 
  4. <script> 
  5. var d = document.getElementById("t").firstChild;  
  6. document.write(d.nodeType);  
  7. document.write(d.nodeName);  
  8. document.write(d.nodeValue);  
  9. //顯示 3 #text bbb  
  10. </script> 

名稱：CDATA文本節(jié)點(diǎn)（XML中傳遞文本的格式）

◆nodeType：CDATA_SECTION_NODE

◆nodeType值：4

◆nodeName：#cdata-section

◆nodeValue：CDATA文本內(nèi)容

attributes屬性，直接獲取一個(gè)屬性節(jié)點(diǎn)，注意這里要使用[]，保持IE和FF的兼容性。

  1. <body name="ddd"> 
  2. <div id = "t" name = "aaa"><span>aaa</span><span>bbb</span><span>ccc</span></div> 
  3. </body> 
  4. <script> 
  5. var d = document.getElementById("t").attributes["name"];  
  6. document.write(d.name);  
  7. document.write(d.value);  
  8. //顯示 name aaa  
  9. </script> 

firstChild和lastChild屬性，表示某一節(jié)點(diǎn)的***個(gè)和***一個(gè)子節(jié)點(diǎn)：

  1. <body> 
  2. <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div> 
  3. </body> 
  4. <script> 
  5. var d = document.getElementById("t");  
  6. document.write(d.firstChild.innerHTML);  
  7. document.write(d.lastChild.innerHTML);  
  8. //顯示 aaa ccc  
  9. </script> 

childNodes和parentNode屬性，表示所在節(jié)點(diǎn)的所有子節(jié)點(diǎn)和所在節(jié)點(diǎn)的父節(jié)點(diǎn)，這里的childNodes注意是一個(gè)數(shù)組：

  1. <body name="ddd"> 
  2. <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div> 
  3. </body> 
  4. <script> 
  5. var d = document.getElementById("t");  
  6. document.write(d.childNodes[1].innerHTML);  
  7. document.write(d.parentNode.getAttribute("name"));  
  8. //顯示 bbb ddd  
  9. </script> 

nextSibling和previousSibling屬性，分別表示在parentNode的childNodes[]數(shù)組中，緊挨著當(dāng)前節(jié)點(diǎn)的上一個(gè)和下一個(gè)節(jié)點(diǎn)：

  1. <body name="ddd"> 
  2. <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div> 
  3. </body> 
  4. <script> 
  5. var d = document.getElementById("t").childNodes[1];  
  6. document.write(d.nextSibling.innerHTML);  
  7. document.write(d.previousSibling.innerHTML);  
  8. //顯示 ccc aaa  
  9. </script> 

#p#

Node的方法介紹：

◆hasChildNodes()：判定一個(gè)節(jié)點(diǎn)是否有子節(jié)點(diǎn)

◆removeChild()：去除一個(gè)節(jié)點(diǎn)

◆appendChild()：添加一個(gè)節(jié)點(diǎn)

◆replaceChild()：替換一個(gè)節(jié)點(diǎn)

◆insertBefore()：指定節(jié)點(diǎn)位置插入一個(gè)節(jié)點(diǎn)

◆cloneNode()：復(fù)制一個(gè)節(jié)點(diǎn)

◆normalize()：（不知）

◆hasChildNodes()方法：判定一個(gè)節(jié)點(diǎn)是否有子節(jié)點(diǎn)，有返回true，沒有返回false

  1. <body name="ddd"> 
  2. <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div> 
  3. <div id = "m"></div> 
  4. </body> 
  5. <script> 
  6. alert(document.getElementById("t").hasChildNodes());  
  7. alert(document.getElementById("m").hasChildNodes());  
  8. // ***個(gè)true，第二個(gè)false  
  9. </script> 

removeChild()方法：去除一個(gè)節(jié)點(diǎn)：

  1. <body name="ddd"> 
  2. <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div> 
  3. </body> 
  4. <script> 
  5. var d = document.getElementById("t").firstChild;  
  6. document.getElementById("t").removeChild(d);  
  7. // <span>aaa</span>被去除  
  8. </script> 

appendChild()方法：添加一個(gè)節(jié)點(diǎn)，如果文檔樹中已經(jīng)存在該節(jié)點(diǎn)，則將它刪除，然后在新位置插入。

  1. <body name="ddd"> 
  2. <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div> 
  3. </body> 
  4. <script> 
  5. var d = document.getElementById("t").firstChild;  
  6. document.getElementById("t").appendChild(d);  
  7. // <span>aaa</span>成了***一個(gè)節(jié)點(diǎn)  
  8. </script> 

replaceChild()方法：從文檔樹中刪除（并返回）指定的子節(jié)點(diǎn)，用另一個(gè)節(jié)點(diǎn)來替換它。

  1. <body name="ddd"> 
  2. <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div> 
  3. </body> 
  4. <script> 
  5. var newd = document.createElement("span");  
  6. newd.innerHTML = "eee";  
  7. var oldd = document.getElementById("t").lastChild;  
  8. document.getElementById("t").replaceChild(newd,oldd);  
  9. // ***一項(xiàng)成了 eee  
  10. </script> 

insertBefore()方法：在指定節(jié)點(diǎn)的前面插入一個(gè)節(jié)點(diǎn)，如果已經(jīng)存在，則刪除原來的，然后在新位置插入。

  1. <body name="ddd"> 
  2. <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div> 
  3. </body> 
  4. <script> 
  5. var newd = document.createElement("span");  
  6. newd.innerHTML = "eee";  
  7. var where = document.getElementById("t").lastChild;  
  8. document.getElementById("t").insertBefore(newd,where);  
  9. // 在***一項(xiàng)的前面多了一項(xiàng) eee  
  10. </script> 

cloneNode()方法：復(fù)制一個(gè)節(jié)點(diǎn)，該方法有一個(gè)參數(shù)，true表示同時(shí)復(fù)制所有的子節(jié)點(diǎn)，false表示近復(fù)制當(dāng)前節(jié)點(diǎn)。

  1. <body name="ddd"> 
  2. <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div><div id = "m"></div> 
  3. </body> 
  4. <script> 
  5. var what = document.getElementById("t").cloneNode(false).innerHTML;  
  6. document.getElementById("m").innerHTML = what;  
  7. // 增加了一個(gè)aaabbbccc  
  8. </script> 

【編輯推薦】

  1. 減少瀏覽器重解析 JavaScript DOM操作優(yōu)化方案
  2. 詳解jQuery對(duì)象與DOM對(duì)象的相互轉(zhuǎn)換
  3. 深入解讀JavaScript中BOM和DOM
  4. IE中JavaScript DOM ready應(yīng)用技巧
責(zé)任編輯：王曉東 來源： CSDN
Node節(jié)點(diǎn)Node屬性
相關(guān)推薦

2010-09-13 16:46:29

JavaScriptHTML DOM節(jié)點(diǎn)

2010-09-10 16:21:58

JavaScript

2023-02-23 19:32:03

DOMJavascript開發(fā)

2013-05-08 10:36:07

JavaScriptJS詳解JavaScrip

2010-08-17 15:04:37

JavaScriptDOM ready

2010-06-07 16:55:00

JavaScript

2010-09-08 16:50:11

JavaScriptDOM操作

2017-03-20 14:45:42

JavaScript詳解

2016-04-06 11:29:58

JavaScriptDOM操作

2020-10-19 11:49:32

NodeJavaScript

2021-09-09 10:26:26

Javascript 文檔對(duì)象前端

2009-06-18 12:21:07

javascriptdom

2020-04-15 15:48:03

Node.jsstream前端

2017-07-19 14:26:01

前端JavaScriptDOM

2010-09-28 14:12:50

Javascript

2016-10-11 20:33:17

JavaScriptThisWeb

2009-09-21 16:59:29

Array擴(kuò)展

2010-09-08 17:26:46

JavaScript

2023-06-16 07:48:51

DOM對(duì)象JS

2016-12-27 10:19:42

JavaScriptindexOf
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)