节点之间的关系

承諾太轻

已于 2023-03-24 18:51:13 修改

阅读量392

点赞数

文章标签： javascript html 前端

于 2023-03-24 18:47:39 首次发布

本文链接：https://blog.csdn.net/m0_67901663/article/details/129756252

版权

本文详细介绍了DOM中节点间的关系，包括父节点、父元素节点、子节点、子元素节点、第一个和最后一个子节点及其元素版本，以及上一个和下一个子节点的元素版本。重点阐述了它们的区别，如父节点与父元素节点、子节点与子元素节点等。

摘要由CSDN通过智能技术生成

节点之间的关系

1、父节点 parentNode

代码如下（示例）：

//html代码：
  <ul id="list">
        <p>夜夏墨时沈</p>
        <li id="li_1">1</li>
        <li id="li_2">2</li>
        <li id="li_3">3</li>
        <li id="li_4">4</li>
        <li id="li_5">5</li>
        <li id="li_6">6</li>
        <li id="li_7">7</li>
        倔强 
  </ul>
//js代码：
    var list = document.getElementById("ul");
    var li_1 = document.getElementById("li_1");
    var li_2 = document.getElementById("li_2");
    var li_3 = document.getElementById("li_3");
    var li_4 = document.getElementById("li_4");
    var li_5 = document.getElementById("li_5");
    var li_6 = document.getElementById("li_6");
    var li_7 = document.getElementById("li_7");
    console.log(list.parentNode.parentNode.parentNode)

2.父元素节点 parentElement

代码如下（示例）：

//html代码：
  <ul id="list">
        <p>夜夏墨时沈</p>
        <li id="li_1">1</li>
        <li id="li_2">2</li>
        <li id="li_3">3</li>
        <li id="li_4">4</li>
        <li id="li_5">5</li>
        <li id="li_6">6</li>
        <li id="li_7">7</li>
        倔强 
  </ul>
//js代码：
    var list = document.getElementById("ul");
    var li_1 = document.getElementById("li_1");
    var li_2 = document.getElementById("li_2");
    var li_3 = document.getElementById("li_3");
    var li_4 = document.getElementById("li_4");
    var li_5 = document.getElementById("li_5");
    var li_6 = document.getElementById("li_6");
    var li_7 = document.getElementById("li_7");
    console.log(list.parentElement.parentElement.parentElement)

父节点和父元素节点的区别:
html的父节点是#document
html的父元素节点是null

3、子节点 childNodes

代码如下（示例）：

//html代码：
  <ul id="list">
        <p>夜夏墨时沈</p>
        <li id="li_1">1</li>
        <li id="li_2">2</li>
        <li id="li_3">3</li>
        <li id="li_4">4</li>
        <li id="li_5">5</li>
        <li id="li_6">6