带你了解 JavaScript 的节点操作

客官°小女子只卖身不卖艺 2024-05-06 21:25 77阅读 0赞

## 详解 JavaScript 的节点操作 ##

### 新增节点 ###

分成两个步骤: 1. 创建元素节点 2. 把元素节点插入到 dom 树中

#### 1.创建元素节点 ####

使用 `createElement` 方法来创建一个元素

let element = document.createElement(tagName[, options])

> 其它类型节点的创建：  
> `createTextNode` 创建文本节点  
> `createComment` 创建注释节点  
> `createAttribute` 创建属性节点

示例代码

注：新创建的节点由于没有加入到 DOM 树中，在页面中就没有显示

#### 2.插入节点到 dom 树中 ####

(1) 使用 `appendChild` 将节点插入到指定节点的最后一个孩子之后

element.appendChild(aChild)

示例代码

<body>
        <div>
            <p>这是一个p标签</p>
            <p>这是一个p标签</p>
            <p>这是一个p标签</p>
        </div>
    </body>
    <script>
        let elememt = document.createElement('h3')
        elememt.innerHTML = "这是创建的一个新节点"
        let div = document.querySelector('div')
        div.appendChild(elememt)
    </script>

运行效果

![image-20240305222509671][]

(2) 使用 `insertBefore` 将节点插入到指定节点之前

let insertedNode = parentNode.insertBefore(newNode, referenceNode);

> `insertedNode` ：被插入节点(newNode)  
> `parentNode` ：新插入节点的父节点  
> `newNode` ：用于插入的节点  
> `referenceNode`： newNode 将要插在这个节点之前  
> 注：如果 `referenceNode` 为 null 则 newNode 将被插入到子节点的末尾

示例代码

<body>
        <div>
            <p class="p1">这是一个p标签</p>
            <p>这是一个p标签</p>
            <p>这是一个p标签</p>
        </div>
    </body>
    <script>
        let elememt = document.createElement('h3')
        elememt.innerHTML = "这是创建的一个新节点"
        let div = document.querySelector('div')
        div.insertBefore(elememt, document.querySelector('.p1'))
    </script>

运行结果

![image-20240306094938137][]

### 删除节点 ###

使用 `removeChild` 删除子节点

oldChild = element.removeChild(child);

> 1.`child` 为待删除节点 ，`element` 为 `child` 的父节点 ，返回值`oldChild`为该被删除节点  
> 2.被删除节点只是从 dom 树被删除了，但是仍然在内存中，可以随时加入到 dom 树的其他位置  
> 3.如果上例中的 `child`节点 不是 `element` 节点的子节点,则该方法会抛出异常

示例代码

<body>
        <div class="container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div id="delete">4</div>
        </div>    
    </body>
    <script>
        let parent = document.querySelector(".container")
        let child = document.querySelector("#delete")
        // 通过父级元素删除子级节点
        let elememt= parent.removeChild(child)
        // 再次把删除的元素插入到父节点里面
         parent.appendChild(child)
    </script>

[image-20240305222509671]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/f6d10c7abfec4b86a208e3007a53e554.png
[image-20240306094938137]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/111a39e140fb4166ab64b5e7d05934ea.png