html DOM 02 獲取節點
示例1:
通過id獲取元素節點
在設計html的時候，一個元素對應的id應該是唯一的。
可以通過document.getElementById 獲取某個元素對應的元素節點物件
<html> <div id="d1">hello HTML DOM</div> <script> var div1 = document.getElementById("d1"); document.write(div1); </script> </html>
示例2:
通過標籤名稱獲取元素節點
所有的元素都有標籤名
通過 getElementsByTagName根據標籤名稱獲取一個元素陣列。
<html> <div >hello javascript</div> <div >hello BOM</div> <div >hello DOM</div> <br> <script> var divs = document.getElementsByTagName("div"); for(i=0;i<divs.length;i++){ document.write(divs[i]); document.write("<br>"); } </script> </html>
示例3:
通過類名獲取元素節點
與 getElementsByTagName 類似的，也可以通過 getElementsByClassName根據class返回一個節點陣列
<html> <h1 class="d" >hello javascript</h1> <h2 class="d" >hello BOM</h2> <div class="d" >hello DOM</div> <br> <script> var elements= document.getElementsByClassName("d"); for(i=0;i<elements.length;i++){ document.write(elements[i]); document.write("<br>"); } </script> </html>
示例4:
通過表單元素的name獲取元素節點
表單元素都有name屬性，通過getElementsByName可以根據name屬性的值，獲取元素節點。
<html> 使用者名稱 <input name="userName"> <br> 密碼 <input name="userPassword"> <br> <script> var elements= document.getElementsByName("userName"); for(i=0;i<elements.length;i++){ document.write(elements[i]); document.write("<br>"); } </script> </html>
示例5:
為什麼會獲取不到?
參考本例程式碼，和通過id獲取元素節點同樣的程式碼 document.getElementById卻無法獲取元素節點。
這是因為javascript是解釋語言，是順序執行的。 在執行到 document.getElementById的時候，div標籤還沒有載入，所以無法獲取。
<html> <script> var div1 = document.getElementById("d1"); document.write(div1); </script> </html> <div id="d1">hello HTML DOM</div>
示例6:
獲取屬性節點
首先通過getElementById獲取元素節點，然後通過元素節點的attributes獲取其下所有的屬性節點。
因為屬性節點是多個，所以是以陣列的形式返回出來的，接著通過for迴圈遍歷，檢視每個節點的nodeName和nodeValue
如果要獲取一個指定屬性的值，可以採用如下風格，as表示所有的屬性，as["id"]取出名稱是id的屬性
as["id"].nodeValue
nodeName和nodeValue表示一個節點的名稱和值
<html> <div id="d1" align="center" class="abc">hello HTML DOM</div> <script> var div1 = document.getElementById("d1"); var as = div1.attributes; document.write("div總共有"+as.length +" 個屬性"); document.write("分別是:"); for(i = 0; i< as.length; i++){ document.write("<br>"); document.write(as[i].nodeName); document.write(":"); document.write(as[i].nodeValue); } document.write("<br>"); document.write("div的id屬性值是："+ as["id"].nodeValue); </script> </html>
示例7:
獲取內容節點
首先通過document.getElementById獲取元素節點，然後通過childNodes獲取其所有的子節點。 其中第一個子節點，就是其內容節點。
然後藉助nodeName和nodeValue把內容節點的名稱和值打印出來。
nodeName和nodeValue表示一個節點的名稱和值
<html> <div id="d1" align="center" class="abc">hello HTML DOM</div> <script> var div1 = document.getElementById("d1"); var content = div1.childNodes[0]; document.write("div的內容節點名是:"+content.nodeName); document.write("<br>"); document.write("div的內容節點值是:"+content.nodeValue); </script> </html>