JavaScript 节点操作

最新推荐文章于 2023-05-10 18:13:39 发布

摆烂波比

最新推荐文章于 2023-05-10 18:13:39 发布

阅读量455

点赞数

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

本文链接：https://blog.csdn.net/xihuanLilia/article/details/122913351

版权

本文详细介绍了JavaScript中对HTML节点的操作，包括节点概述、节点层级（父级节点、子节点、兄弟节点）、创建、添加、删除和克隆节点的方法，以及创建元素的三种方式：document.write(), innerHTML, 和createElement()。对于实际开发中获取第一个和最后一个子元素节点的技巧也进行了阐述。" 116506912,10536111,Oracle高版本导出低版本数据库：步骤详解,"['Oracle数据库', '数据迁移', '版本兼容性']

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

节点概述

网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。

HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。

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

节点层级

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

父级节点

node.parentNode

返回值是最近的一个父节点（亲爸爸）
如果指定的节点没有父节点则需要返回null

<div class="demo">
        <div class="box">
            <span class="erweima">×</span>
        </div>
    </div>
    <script>
        // 1. 父节点 parentNode
        var erweima = document.querySelector('.erweima');
        // var box = document.querySelector('.box');
        // 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null
        console.log(erweima.parentNode);
    </script>

子节点

所有子节点

parentNode.childNodes(标准)

parentNode.childNodes 返回包含指定节点的子节点的集合
该集合是即时更新的集合
注意：返回值里面包含了所有的子节点包括元素节点文本节点等等；
如果只想要获取里面的元素节点则需要专门的处理所以我们一般不提倡使用childNodes

子元素节点

parentNode.children(非标准)

parentNode.children是一个只读属性返回所有的子元素节点它只返回子元素节点其他节点不返回
虽然children是一个非标准但是得到了各个浏览器的支持
因此我们可以放心使用
案例如下

  <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <script>
        // DOM 提供的方法（API）获取
        var ul = document.querySelector('ul');
        var lis = ul.querySelectorAll('li');
        // 1. 子节点  childNodes 所有的子节点 包含 元素节点 文本节点等等
        console.log(ul.childNodes);
        console.log(ul.childNodes[0].nodeType);
        console.log(ul.childNodes[1].nodeType);
        // 2. children 获取所有的子元素节点 也是我们实际开发常用的
        console.log(ul.children);
    </script>

第一个子节点

parentNode.firstChild

返回的是第一个子节点找不到就返回null
同样也是包含了所有节点

最后一个子节点

parentNode.lastChild

返回的是最后一个子节点找不到就返回null
同样也是包含了所有节点

第一个元素节点

parentNode.firstElementChild

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

最后一个元素节点

parentNode.lastElementChild

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

常用

实际开发中，firstChild 和 lastChild 包含其他节点，操作不方便，而 firstElementChild 和 lastElementChild 又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢？
解决方案
如果想要第一个子元素节点
可以使用 parentNode.children[0];
如果想要最后一个子元素节点
可以使用 parentNode.children[parentNode.children.length-1];

兄弟节点

下一个兄弟节点

 node. nextslibling 得到下一个兄弟元素节点 没有则返回null
``

```javascript
 node.nextElementSibling 得到下一个兄弟元素节点 没有则返回null

上一个兄弟节点

node.previousElementSibling

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

创建节点

documen.createElement(创建的节点名字')

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

添加节点

node.appendChild(child)

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

node.insertBefore(child,指定元素)

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

删除节点

node.removeChild()

node.removeChild() 方法从node节点中删除一个子节点
返回删除的节点

<button>删除</button>
<ul>
    <li>熊大</li>
    <li>熊二</li>
    <li>光头强</li>
</ul>
<script>
    // 1.获取元素
    var ul = document.querySelector('ul');
    var btn = document.querySelector('button');
    // 2. 删除元素  node.removeChild(child)
    // ul.removeChild(ul.children[0]);
    // 3. 点击按钮依次删除里面的孩子
    btn.onclick = function() {
        if (ul.children.length == 0) {
            this.disabled = true;
        } else {
            ul.removeChild(ul.children[0]);
        }
    }
</script>