JS节点操作（1） - 父节点，子节点，兄弟节点

Moony (考研版)

已于 2022-02-07 11:33:04 修改

阅读量4.1k

点赞数 3

分类专栏： js 文章标签： javascript 前端 dom

于 2022-02-07 11:23:40 首次发布

本文链接：https://blog.csdn.net/Moony_wy/article/details/122802860

版权

节点操作的作用

获取元素通常使用的两种方式：

1. 利用DOM提供的方法获取元素

document.getElementById()
document.getElementsByTagName()
document.querySelector() 等等
逻辑性不强，繁琐

2. 利用节点层级关系获取元素

利用父子兄弟节点关系获取元素
逻辑性墙，但是兼容性稍差

这两种方法都可以获取元素，但是节点操作更简单。

获取节点

1. 父节点

1.1 node.parentNode 返回的是距离最近的父节点

<body>
    <div class="parent">
        <em class="child">JavaScript</em>
    </div>
    <script>
        var child = document.querySelector('.child');
        // 返回的是距离最近的父节点
        // 如果没有父节点则返回null
        var parent = child.parentNode;
        console.log(parent);
    </script>
</body>

以上代码输出结果为：

返回了距离child最近的父节点。

2. 子节点

2.1 node.childNode 返回所有的子节点，包括所有的文本节点和元素节点

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>

最低0.47元/天解锁文章

Moony (考研版)

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JS节点操作（1） - 父节点，子节点，兄弟节点

JS节点操作（1） - 父节点，子节点，兄弟节点节点操作的作用获取元素通常使用的两种方式：1. 利用DOM提供的方法获取元素逻辑性不强，繁琐2. 利用节点层级关系获取元素利用父子兄弟节点关系获取元素逻辑性墙，但是兼容性稍差这两种方法都可以获取元素，但是节点操作更简单。
复制链接

扫一扫