一文詳解JavaScript之DOM節點導航

本文主要介紹如何利用DOM節點獲取頁面元素，頁面檔案中的所有事物都是節點：包括元素節點、文位元組點、屬性節點、檔案節點、註釋節點。下面介紹獲取節點的兩大類方法：

（1）獲取節點（包含文位元組點、元素節點等所有節點）

1.parentNode:獲取父節點

2.childNodes：獲取子節點，通過索引值獲取各個子節點

3.firstChild：獲取父節點的第一個子節點

4.lastChild：獲取父節點的最後一個子節點

5.nextSibling：獲取子節點相鄰的下一個兄弟節點

6.previousSibling：獲取子節點相鄰的前一個兄弟節點

7.attributes:獲取屬性節點

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>由節點關係獲取元素</title>
    <style>
 
    </style>
</head>
 
<body>
    <div name="div1">
        <p name='p1'>文位元組點</p>
        <p>2</p>
        <ul>
            <li>3</li>
            <li id="li4">4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </div>
    <section>7</section>
    <main><span>8</span><i>9</i></main>
    <script>
        //注意換行和空格也屬於結點，屬於文位元組點，按節點關係存取時需要考慮。屬性節點無須考慮。
        //1. parentNode獲取div
        console.log(document.querySelector('p').parentNode);
        console.log(document.querySelector('p').parentNode.attributes[0]);
        console.log(document.querySelector('p').parentNode.nodeName); //DIV
        console.log(document.querySelector('p').parentNode.nodeValue); //null
        console.log(document.querySelector('p').parentNode.nodeType); //1 元素節點
        // 2.通過childNodes獲取第一個p
        console.log(document.querySelector('div').childNodes[1]);
        console.log(document.querySelector('div').childNodes[1].firstChild.nodeName);
        console.log(document.querySelector('div').childNodes[1].firstChild.nodeType); //2 文位元組點
        console.log(document.querySelector('div').childNodes[1].firstChild.nodeValue);
        // 3.firstChild獲取main中的第一個子節點
        console.log(document.querySelector('main').firstChild);
        // 4.lastChild獲取main中的最後一個子節點
        console.log(document.querySelector('main').lastChild);
        // 5.nextSibling獲取相鄰下一個兄弟元素
        console.log(document.querySelector('#li4').nextSibling.nextSibling);
        // 6.previousSibling獲取相鄰上一個兄弟元素
        console.log(document.querySelector('#li4').previousSibling.previousSibling);
        // 總結：除parentNode外，其他方法謹慎選擇，一旦程式碼格式有變，就會出現錯誤
        // 通過nodeName獲取節點名稱
        //通過nodeValue獲取節點值
        // 通過nodeType返回節點型別
    </script>
</body>
 
</html>

（2）獲取元素節點

1.parentElement:獲取父元素節點

2.children：獲取子元素節點，通過索引值獲取各個子元素節點

3.firstElementChild：獲取父級的第一個子元素節點

4.lastElementChild：獲取父級的最後一個子元素節點

5.nextElementSibling：獲取相鄰的下一個兄弟元素節點

6.previousElementSibling：獲取相鄰的前一個兄弟元素節點

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>獲取子元素節點</title>
</head>
 
<body>
    <div>
        <p>123</p>
        <p>456</p>
        <p>789</p>
    </div>
    <script>
        //p標籤總體算一個節點，內部的「123」不算
        console.log(document.querySelector('div').childNodes);
        console.log(document.querySelector('div').childNodes.length);
        // 獲取子元素節點
        console.log(document.querySelector('div').children);
        console.log(document.querySelector('div').children[1]);
        console.log(document.querySelector('div').firstElementChild);
        console.log(document.querySelector('div').firstElementChild.nextElementSibling);
        console.log(document.querySelector('div').lastElementChild);
        console.log(document.querySelector('div').lastElementChild.previousElementSibling);
        console.log(document.querySelector('div').children[1].parentElement);
    </script>
</body>
 
</html>