JavaScript DOM 父子节点常用属性

最新推荐文章于 2024-08-27 13:38:21 发布

ordinary90

最新推荐文章于 2024-08-27 13:38:21 发布

阅读量490

点赞数 14

分类专栏：前端全栈开发文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/zxcv321zxcv/article/details/139311281

版权

前端全栈开发专栏收录该内容

152 篇文章 0 订阅

订阅专栏

在JavaScript中，DOM（文档对象模型）表示HTML文档的层次结构。DOM提供了一组属性和方法，用于访问和操作HTML元素。

在DOM中，元素之间可以有父子关系。每个元素都有若干子元素和一个父元素（除了根元素）。常用的父子节点属性包括父节点（parentNode）、子节点（childNodes）和子元素（children）。

parentNode:
- parentNode属性返回指定元素的父节点。
- 如果元素没有父节点（例如根元素），parentNode属性返回null。
- 通过parentNode属性，可以获取到元素的直接父节点。

// 获取元素的父节点
const parent = element.parentNode;

childNodes:
- childNodes属性返回包含指定元素所有子节点的NodeList对象。
- NodeList对象类似于数组，可以通过下标访问每个子节点。
- 子节点包括元素节点、文本节点、注释节点等。
- 注意：childNodes属性返回的NodeList对象是动态的，即当DOM结构发生改变时，NodeList对象也会相应更新。

// 获取元素的所有子节点
const childNodes = element.childNodes;

children:
- children属性返回包含指定元素所有子元素的HTMLCollection对象。
- HTMLCollection对象类似于数组，可以通过下标访问每个子元素。
- 子元素只包括元素节点。
- 注意：children属性返回的HTMLCollection对象是动态的，即当DOM结构发生改变时，HTMLCollection对象也会相应更新。

// 获取元素的所有子元素
const children = element.children;

通过这些父子节点属性，我们可以对DOM进行深度遍历、查找指定节点、添加、删除和替换节点等操作。

以下是一个示例代码，用于演示如何使用父子节点属性：

<!DOCTYPE html>
<html>
<body>
  <h1>DOM父子节点属性示例</h1>
  <ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>

  <script>
    // 获取父节点
    const list = document.getElementById('list');
    const parent = list.parentNode;
    console.log(parent); // <body>...</body>

    // 获取子节点
    const childNodes = list.childNodes;
    console.log(childNodes); // NodeList(7) [text, <li>, text, <li>, text, <li>, text]

    // 获取子元素
    const children = list.children;
    console.log(children); // HTMLCollection(3) [<li>, <li>, <li>]

    // 遍历子元素
    for (let i = 0; i < children.length; i++) {
      console.log(children[i]); // <li>...</li>
    }
  </script>
</body>
</html>

以上代码中，我们通过getElementById方法获取了id为"list"的ul元素，然后使用父子节点属性分别获取了父节点、子节点和子元素，并进行了输出。

ordinary90

关注

14
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
JavaScript DOM 父子节点常用属性

在DOM中，元素之间可以有父子关系。每个元素都有若干子元素和一个父元素（除了根元素）。常用的父子节点属性包括父节点（parentNode）、子节点（childNodes）和子元素（children）。以上代码中，我们通过getElementById方法获取了id为"list"的ul元素，然后使用父子节点属性分别获取了父节点、子节点和子元素，并进行了输出。DOM提供了一组属性和方法，用于访问和操作HTML元素。通过这些父子节点属性，我们可以对DOM进行深度遍历、查找指定节点、添加、删除和替换节点等操作。
复制链接

扫一扫