從上一節我們知道,在DOM中,每一個元素節點都被看成一個對象。既然是對象,那肯定有相關屬性和方法。這一節,我們先來介紹DOM對象節點的屬性。
其實除了上表列舉的屬性之外,還有nodeName、nodeValue和nodeType等幾個比較重要的屬性。不過對於初學者而言,這幾個屬性很少用到。等大家過了JavaScript入門教程JavaScript入門這一關,我們再在JavaScript進階教程詳細給大家講解。
在DOM中,遍歷HTML文檔樹,我們可以通過使用parentNode、firstChild、lastChild、previousSibling和nextSibling等屬性來實現。
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <div id="main"> <div id="div1">歡迎來到 學習網</div> <ul id="list"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <p id="p1">歡迎下次光臨</p> </div> <script type="text/javascript"> var e = document.getElementById("list"); if (e.parentNode) { alert("該節點有父節點"); } </script> </body> </html>
在浏覽器預覽效果如下:
分析:
很多人很疑惑,為什麼把js代碼放在底部(body結束之前),而不是head標簽內呢?我們建議大家先看看“JavaScript頁面相關事件”這一節中的window.onload就會明白(一定要看)。一定要看看,對後續課程很重要
上面例子的js代碼也可以放到head標簽內的,但是要加上“window.onload=function(){}”。在線測試工具中,windown.onload無效,請大家在本地編輯器中自行測試。
上代碼等價於下面代碼:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript"> window.onload = function () { var e = document.getElementById("list"); if (e.parentNode) { alert("該節點有父節點"); } } </script> </head> <body> <div id="main"> <div id="div1">歡迎來到 學習網</div> <ul id="list"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <p id="p1">歡迎下次光臨</p> </div> </body> </html>