<body>
    <div>
        <div>
            <div></div>
        </div>
    </div>
    <script>
        var divs=document.querySelector(".s")
        console.log(divs.parentNode);
    </script>
</body>

效果：
在這里插入圖片描述

二：子節(jié)點

1:返回子節(jié)點

element.children,是一個只讀屬性，返回所有子元素節(jié)點，其余節(jié)點不返回
代碼：

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        var ul=document.querySelector("ul")
        console.log(ul.children);
    </script>
</body>

效果:
在這里插入圖片描述

2：返回第一個和最后一個子節(jié)點

2.1:

element.firstElementChild,element.lastElementChild分別返回第一個和最后一個子元素節(jié)點，IE9+
代碼：

<body>
    <ul>
        <li>我第一</li>
        <li></li>
        <li></li>
        <li></li>
        <li>我最后</li>
    </ul>
    <script>
        var ul=document.querySelector("ul")
        console.log(ul.firstElementChild);
        console.log(ul.lastElementChild);
    </script>
</body>

效果：
在這里插入圖片描述

2.2：

element.children[0] , element.children[element.children.length-1]分別返回第一個和最后一個子元素節(jié)點
代碼：

<body>
    <ul>
        <li>我第一</li>
        <li></li>
        <li></li>
        <li></li>
        <li>我最后</li>
    </ul>
    <script>
        var ul=document.querySelector("ul")
        console.log(ul.children[0]);
        console.log(ul.children[ul.children.length-1]);
    </script>
</body>

效果：
在這里插入圖片描述

三：兄弟節(jié)點

1：返回兄弟節(jié)點

element.nextElementSibling，返回當前元素下一個兄弟元素節(jié)點，找不到則返回null
element.previousElementSiblig，返回當前元素上一個兄弟元素節(jié)點，找不到則返回null
IE9+

四：創(chuàng)建和添加元素節(jié)點

1：創(chuàng)建元素節(jié)點

1.1：

document.createElement()，動態(tài)創(chuàng)建元素節(jié)點

1.2：

innerHtml，創(chuàng)建節(jié)點

1.3：

document.write,創(chuàng)建節(jié)點，但導致頁面重繪

2：添加節(jié)點

2.1:

fartherelement.appendChild(childelement)，將一個節(jié)點添加到指定父節(jié)點的子節(jié)點列表末尾
注意事項：創(chuàng)建和添加元素節(jié)點需要聯(lián)合使用

1&2：
添加前代碼：

<body>
    <ul>
        <li>我第一</li>
        <li></li>
        <li></li>
        <li></li>
        <li>我最后</li>
    </ul>
    <script>
    </script>
</body>

效果：
在這里插入圖片描述
添加后代碼：

<body>
    <ul>
        <li>我第一</li>
        <li></li>
        <li></li>
        <li></li>
        <li>我最后</li>
    </ul>
    <script>
      var ul=document.querySelector("ul")
      var li=document.createElement("li");
      ul.appendChild(li)
    </script>
</body>

注意：appendChild()中無引號。因為：規(guī)定變量或對象是不用加引號的
效果：
在這里插入圖片描述

2.2:

element.insertBefore(child,指定元素)，將一個節(jié)點添加到父節(jié)點指定節(jié)點前面
代碼：

<body>
    <ul>
        <li>我第一</li>
        <li></li>
        <li></li>
        <li></li>
        <li>我最后</li>
    </ul>
    <script>
      var ul=document.querySelector("ul")
      var li=document.createElement("li");
      ul.insertBefore(li,ul.children[0])
    </script>
</body>

效果：
在這里插入圖片描述

五：刪除節(jié)點

1：刪除元素節(jié)點

element.removeChild()
代碼：

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style type="text/css">
    button{
        width: 100px;
        height: 100px;
    }
    </style>
</head>
<body>
    <button></button>
    <ul>
        <li>我第一</li>
        <li></li>
        <li></li>
        <li></li>
        <li>我最后</li>
    </ul>
    <script>
        var button=document.querySelector("button")
        var ul=document.querySelector("ul")
        button.onclick=function(){
        ul.removeChild(ul.children[0])
      }
    </script>
</body>
</html>