一文透析js节点操作（吐血整理）

最新推荐文章于 2024-05-03 11:47:20 发布

DazzlingWen.

最新推荐文章于 2024-05-03 11:47:20 发布

阅读量803

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_52372698/article/details/122768661

版权

节点操作

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

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

一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性

元素节点 nodeType为1
属性节点nodeType为2
文本节点 nodeTpye为3（文本节点包含文字、空格、换行等）

实际开发中，节点操作主要操作的是元素节点

节点层级

利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系

父节点操作

html结构

<body>
    <div class="box">
        <span class="erweima"></span>
    </div>
</body>

script代码

<script>
    var erweima = document.querySelector('.erweima');
    console.log(erweima.parentElement);
</script>

注意：

parentNode属性可返回某节点的父节点，但注意返回的是距离最近的一个父节点
如果指定的节点没有父节点则返回null

子节点

parentNode.childNodes（标准）

parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合

注意：

返回值里面包含了所有的子节点，包括元素节点，文本节点等

如果只想要获得里面的元素节点，则需要专门处理。所以我们一般不提倡使用childNodes

可以通过特殊的代码块进行处理，如下：

var ul = document. querySelector(‘ul’);
for(var i = 0; i < ul.childNodes.length;i++) {
if (ul.childNodes[i].nodeType == 1) {    // ul.childNodes[i] 是元素节点
    console.log(ul.childNodes[i]);}
}

那么要真正获取子元素节点该怎么办呢？

用parentNode.children(非标准)实现

parentNode.children是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回（这个是我们重点掌握的）。

虽然children 是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用

parentNode.firstChild

firstChild返回第一个子节点，找不到则返回null。包含所有节点（空格、换行那些）

parentNode.lastChild

lastChild返回最后一个子节点，找不到则返回null。包含所有节点

parentNode.firstElementChild

firstElementChild返回第一个子元素节点，找不到则返回null

parentNode.lastElementChild

lastElementChild返回最后一个子元素节点，找不到则返回null

灵魂拷问

实际开发中，firstChild 和 lastChild 包含其他节点，操作不方便，而 firstElementChild 和 lastElementChild 又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢？

解决方案：

如果想要第一个子元素节点，可以使用 parentNode.chilren[0]
如果想要最后一个子元素节点，可以使用parentNode.chilren[parentNode.chilren.length - 1]

兄弟节点

<body>
    <div></div>
    <span></span>
</body>

span就可以称为是div的兄弟节点

node.nextSibling

nextSibling返回当前元素的下一个兄弟元素节点，找不到则返回null。包含所有节点

node.previousSibling

previousSibling返回当前元素上一个兄弟元素节点，找不到则返回null。包含所有节点

node.nextElementSibling

nextElementSibling 返回当前元素下一个兄弟元素节点，找不到则返回null

node.previousElementSibling

previousElementSibling 返回当前元素上一个兄弟节点，找不到则返回null

自己也不是不可以解决兼容性问题hh

function getNextElementSibling(element) {
      var el = element;
      while (el = el.nextSibling) {
        if (el.nodeType === 1) {
            return el;
        }
      }
      return null;
    }

创建节点

document.createElement('tagName')

document.createElement() 方法创建由 tagName 指定的 HTML 元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点

添加节点

node.appendChild(child)

node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。类似于 CSS 里面的 after 伪元素

注意创建节点和添加节点是完全不同的两个概念

<body>
    <ul>
        <li>123</li>
    </ul>

    <script>
        var ul = document.querySelector('ul');
        var li = document.createElement('li');
        ul.appendChild(li);
    </script>
</body>

node.insertBefore(child, 指定元素)

node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的 before 伪元素

<body>
    <ul>
        <li>123</li>
    </ul>

    <script>
        var ul = document.querySelector('ul');
        var li = document.createElement('li');
        ul.appendChild(li);
        var lili = document.createElement('li');
        ul.insertBefore(lili, ul.children[0]);
    </script>
</body>

DazzlingWen.

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
一文透析js节点操作（吐血整理）

利用节点层级关系获取元素利用父子兄节点关系获取元素逻辑性强，但是兼容性稍差一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性
复制链接

扫一扫

一文透析js节点操作（吐血整理）

节点操作

父节点操作

子节点

灵魂拷问

解决方案：

兄弟节点

创建节点

添加节点

“相关推荐”对你有帮助么？