DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> 13.2 DOM對象節點屬性
13.2 DOM對象節點屬性
編輯:JavaScript基礎知識     

從上一節我們知道,在DOM中,每一個元素節點都被看成一個對象。既然是對象,那肯定有相關屬性和方法。這一節,我們先來介紹DOM對象節點的屬性。

DOM常用的節點屬性 屬性 說明 parentNode 獲取當前節點的父節點 childNodes 獲取當前節點的子節點集合 firstChild 獲取當前節點的第一個子節點 lastChild 獲取當前節點的最後一個子節點 previousSibling 獲取當前節點的前一個兄弟節點 nextSibling 獲取當前節點的後一個兄弟節點 attributes 元素的屬性列表

其實除了上表列舉的屬性之外,還有nodeName、nodeValue和nodeType等幾個比較重要的屬性。不過對於初學者而言,這幾個屬性很少用到。等大家過了JavaScript入門教程JavaScript入門這一關,我們再在JavaScript進階教程詳細給大家講解。

一、遍歷DOM文檔樹

在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>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved