带你了解 JavaScript 的节点操作

fly in the sky !

已于 2024-03-06 14:25:23 修改

阅读量391

点赞数 15

分类专栏：前端文章标签： javascript 开发语言 ecmascript

于 2024-03-06 14:22:43 首次发布

本文链接：https://blog.csdn.net/m0_73740682/article/details/136505041

版权

前端专栏收录该内容

31 篇文章 2 订阅

订阅专栏

详解 JavaScript 的节点操作

新增节点

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

1.创建元素节点

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

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

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

示例代码

<script>
    let elememt = document.createElement('h3')
    // 添加对应的属性
    elememt.innerHTML = "这是创建的一个新节点"
</script>

注：新创建的节点由于没有加入到 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>

运行效果

(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>

运行结果

删除节点

使用 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>