Javascript進階篇——(DOM—節點---屬性、訪問節點)—筆記整理

本文轉載自查看原文 2016-03-11 17:52 1357 Javascript

節點屬性
在文檔對象模型 (DOM) 中，每個節點都是一個對象。DOM 節點有三個重要的屬性：
　　1. nodeName : 節點的名稱
　　2. nodeValue ：節點的值
　　3. nodeType ：節點的類型

一、nodeName 屬性: 節點的名稱，是只讀的。
　　1. 元素節點的 nodeName 與標簽名相同
　　2. 屬性節點的 nodeName 是屬性的名稱
　　3. 文本節點的 nodeName 永遠是 #text
　　4. 文檔節點的 nodeName 永遠是 #document

二、nodeValue 屬性：節點的值
　　1. 元素節點的 nodeValue 是 undefined 或 null
　　2. 文本節點的 nodeValue 是文本自身
　　3. 屬性節點的 nodeValue 是屬性的值

三、nodeType 屬性: 節點的類型，是只讀的。以下常用的幾種結點類型:
　　元素類型節點類型
　　元素　　　　1
　　屬性　　　　 2
　　文本　　　　 3
　　注釋　　　　 8
　　文檔　　　　9

獲取所有LI標簽，並輸出相應節點的名稱、節點的值、節點的類型：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>節點屬性</title>
 6 </head>
 7 <body>
 8     <ul>
 9         <li>javascript</li>
10         <li>HTML/CSS</li>
11         <li>jQuery</li>     
12     </ul>
13     <script type="text/javascript">
14         var node = document.getElementsByTagName("li");
15         for(var i = 0; i < node.length; i++){
16             document.write("節點名稱：" + node[i].nodeName + "<br/>");
17             document.write("節點的值：" + node[i].nodeValue + "<br/>");
18             document.write("節點類型：" + node[i].nodeType + "<br/>");
19     }
20     </script>
21 </body>
22 </html>

運行結果：

訪問子結點childNodes
訪問選定元素節點下的所有子節點的列表，返回的值可以看作是一個數組，他具有length屬性。
語法：

elementNode.childNodes

如果選定的節點沒有子節點，則該屬性返回不包含節點的 NodeList。

代碼如下:

運行結果:
IE:

UL子節點個數:3
節點類型:1

其它瀏覽器:

UL子節點個數:7
節點類型:3

注意:
　　1. IE全系列、firefox、chrome、opera、safari兼容問題
　　2. 節點之間的空白符，在firefox、chrome、opera、safari瀏覽器是文本節點，所以IE是3，其它瀏覽器是7

如下圖所示:

如果把代碼改成這樣:

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

運行結果:（IE和其它瀏覽器結果是一樣的）

UL子節點個數:3
節點類型:1

Internet Explorer 會忽略節點之間生成的空白文本節點，而其它瀏覽器不會。我們可以通過檢測節點類型，過濾子節點。
判斷節點nodeType是否為1, 如是為元素節點，跳過。

訪問子結點的第一和最后項
一、firstChild 屬性返回‘childNodes’數組的第一個子節點。如果選定的節點沒有子節點，則該屬性返回 NULL。
語法：

1 node.firstChild
2 //與elementNode.childNodes[0]是同樣的效果。

二、 lastChild 屬性返回‘childNodes’數組的最后一個子節點。如果選定的節點沒有子節點，則該屬性返回 NULL。
語法：

1 node.lastChild
2 //與elementNode.childNodes[elementNode.childNodes.length-1]是同樣的效果。

找到指定元素(div)的第一個和最后一個子節點:

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>無標題文檔</title>
 6 </head>
 7 <body>
 8     <div id="con"><p>javascript</p><div>jQuery</div><h5>PHP</h5></div>
 9     <script type="text/javascript">
10         var x=document.getElementById("con");
11         document.write(x.firstChild.nodeName + "<br/>");
12         document.write(x.lastChild.nodeName + "<br/>");
13     </script>
14 </body>
15 </html>

訪問父節點parentNode
獲取指定節點的父節點
語法：

1 elementNode.parentNode
2 //父節點只能有一個。

獲取 P 節點的父節點，代碼如下:

1 <div id="text">
2     <p id="con"> parentNode 獲取指點節點的父節點</p>
3 </div> 
4 <script type="text/javascript">
5     var mynode= document.getElementById("con");
6     document.write(mynode.parentNode.nodeName);
7 </script>

運行結果:

parentNode 獲取指點節點的父節點
DIV

訪問祖節點:

elementNode.parentNode.parentNode

代碼如下:

 1 <div id="text"> 
 2     <p>
 3     parentNode 
 4     <span id="con"> 獲取指點節點的父節點</span>
 5     </p>
 6 </div> 
 7 <script type="text/javascript">
 8     var mynode= document.getElementById("con");
 9     document.write(mynode.parentNode.parentNode.nodeName);
10 </script>

運行結果:

parentNode獲取指點節點的父節點
DIV

瀏覽器兼容問題，chrome、firefox等瀏覽器標簽之間的空白也算是一個文本節點。

使用訪問父節點parentNode，將"HTML/CSS"課程內容輸出：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>無標題文檔</title>
 6 </head>
 7 <body>
 8     <ul id="con">
 9     <li id="lesson1">javascript
10         <ul> 
11             <li id="tcon"> 基礎語法</li>
12             <li>流程控制語句</li>
13             <li>函數</li>
14             <li>事件</li>
15             <li>DOM</li>
16         </ul>
17     </li>
18     <li id="lesson2">das</li>
19     <li id="lesson3">dadf</li>
20     <li id="lesson4">HTML/CSS 
21     <ul>
22         <li>文字</li>
23         <li>段落</li>
24         <li>表單</li>
25         <li>表格</li>  
26     </ul> 
27     </li></ul>  
28     <script  type="text/javascript">    
29         var mylist = document.getElementById("tcon"); 
30         document.write(tcon.parentNode.parentNode.parentNode.lastChild.innerHTML)
31     </script> 
32 </body>
33 </html>

訪問兄弟節點
1. nextSibling 屬性可返回某個節點之后緊跟的節點（處於同一樹層級中）。
語法：

nodeObject.nextSibling
//如果無此節點，則該屬性返回 null。

2. previousSibling 屬性可返回某個節點之前緊跟的節點（處於同一樹層級中）。
語法：

nodeObject.previousSibling 
//如果無此節點，則該屬性返回 null。

兩個屬性獲取的是節點。Internet Explorer 會忽略節點間生成的空白文本節點（例如，換行符號），而其它瀏覽器不會忽略。
解決問題方法:
判斷節點nodeType是否為1, 如是為元素節點，跳過。

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>nextSibling</title>
 6 </head>
 7 <body>
 8     <ul id="u1">   
 9         <li id="a">javascript</li>
10         <li id="b">jquery</li>   
11         <li id="c">html</li>   
12     </ul>   
13     <ul id="u2">   
14         <li id="d">css3</li>   
15         <li id="e">php</li>   
16         <li id="f">java</li>   
17     </ul>   
18     <script type="text/javascript">
19         function get_nextSibling(n){
20             var x=n.nextSibling;
21             while (x && x.nodeType!=1){
22                 x=x.nextSibling;
23             }
24             return x;
25         }
26     
27         var x=document.getElementsByTagName("li")[0];
28         document.write(x.nodeName);
29         document.write(" = ");
30         document.write(x.innerHTML);
31         
32         var y=get_nextSibling(x);
33         
34         if(y!=null){
35             document.write("<br />nextsibling: ");
36             document.write(y.nodeName);
37             document.write(" = ");
38             document.write(y.innerHTML);
39         }else{
40           document.write("<br>已經是最后一個節點");      
41         }
42     </script>
43 </body>
44 </html>

運行結果:

LI = javascript
nextsibling: LI = jquery

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Javascript進階篇——(DOM—節點---插入、刪除和替換元素、創建元素、創建文本節點)—筆記整理 Jenkins 進階篇 - 節點配置 javascript 插入DOM節點 DOM遍歷節點以及屬性 Javascript 對DOM節點的操作 JavaScript 進階篇的學習~ JavaScript學習筆記 - 進階篇（1）- JS基礎語法 DOM系列---進階篇【轉】 jQuery及javascript DOM創建節點(三) javascript DOM操作節點的遍歷