Javascript之DOM的三大節點及部分用法


DOM有三種節點:元素節點、屬性節點、文本節點。

 

一、用nodeType可以檢測節點的類型

節點類型 nodeType屬性值
元素節點 1
屬性節點 2
文本節點 3

 

 

 

 

 

 

 

這樣方便在js中對各個節點進行操作。

 

元素節點:html中的標簽。

屬性節點:html便簽中的屬性值。

文本節點:元素節點之間的文本。

 

二、用body的childNodes來測試

1  <body>/*第一個文本元素 2    */<div></div>/*第二個文本元素 3    */<div></div>/*第三個文本元素 4    */<ul>
5          <li></li>
6          <li></li>
7          <li></li>
8      </ul>/*第四個文本元素 9  */</body>

 

來看body的childNodes中各個節點的個數。

先說一下childNodes,這個屬性用來獲取任何一個元素的所有子元素,它是一個包含這個元素的全部子元素的數組。

用js測試:

1 window.onload = function (){ 2     var oBody = document.getElementsByTagName('body')[0]; 3     var aChild = oBody.childNodes; 4     alert(aChild.length);//7
5     for(var i = 0; i < aChild.length; i++) { 6         alert(aChild[i].nodeType);//3 1 3 1 3 1 3
7  } 8 };

由此看來:

body的子元素有div、div、ul。

body的文本元素有四個,代碼中注釋出出來的,我故意將*/換了一行寫出來,是想表明在<body>和<div>之間是一個文本節點。

 

有人會覺得疑惑,不是說元素節點之間就是文本節點嗎?為什么像<div></div>之間的文本節點沒有算進去呢?

對的,那個也算文本節點,但我們計算的是body的子節點,像<div></div>之間的那是<div>的子節點啦,並不是body的子節點。

 

三、用nodeValue來得到和設置一個節點的值

三大節點中,屬性節點和文本節點都是可能有值的,但是元素節點是沒有值的。

用node.nodeValue得到node的值,那么有一個問題,nodeValue和innerHTML有什么區別呢?

nodeValue獲取的是節點的值,innerHTML是以字符串形式返回該節點的所有子節點及其值。可以看做是部分與大體的一個區別。

舉個例子:

1 <body>
2     <div id="div1">
3  這是div的第一個子節點,是一個文本節點 4         <p>div的第二個子節點p,這是p的第一個文本節點</p>
5     </div>
6 </body>

我們用js來測試一下nodeValue和innerHTML的結果

1 window.onload = function (){ 2     var oDiv = document.getElementById('div1'); 3     var aChild = oDiv.childNodes; 4             
5     alert(aChild[0].nodeValue); 6  alert(oDiv.innerHTML); 7 };

測試結果如下:

第一個alert彈出“這是div的第一個子節點,是一個文本節點”

第二個alert彈出“這是div的第一個子節點,是一個文本節點 <p>div的第二個子節點p,這是p的第一個文本節點</p>”

 

三、用nodeName來獲取節點的

nodeName屬性含有某個節點的名稱。

對於元素節點,nodeName=標簽名(返回的名稱是大寫的)。

對於文本節點,nodeName=#text。

對於屬性節點,nodeName=屬性名(返回的名稱是大寫的)。

使用方法:elemt.nodeName;

 


免責聲明!

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



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM