0026 JS的 节点的操作

4、节点的增删改

标签就是对象，css相当于装饰器，js可以增删改查标签的属性，增删css， 

document对象对于js而言，也是可以增删改查对象，

在js中称为节点，在js查找标签中，标签元素相当于数组元素，

标签的父级标签就是嵌套元素是数组   就可以追加节点，插入节点，替换节点，删除节点。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="c1">
        <div class="c2"> 第一节课程</div>
        <div class="c4"> 第二节课程</div>
</div>
<div class="func">
    <button class="add"    > 添加节点</button>
    <button class="delete" > 删除节点 </button>
    <button class="update" > 更新节点</button>
</div>
<script>
    var ele = document.querySelector('.c1')
    var c2 = document.querySelector('.c1 .c2')

    var add = document.querySelector('.func .add')
    var del = document.querySelector('.func .delete')
    var update = document.querySelector('.func .update')

    add.onclick = function () {
        // 先创建标签 比如图片标签,
        // 创建一个空的 图片标签的对象
        var img_document = document.createElement('img')
        img_document.src='./12.jpg'

        // 添加节点动作， 追加到父级标签内的最后一个儿子
        // ele.appendChild(img_document)

        // 添加节点动作， 添加到 c2的前面 新的document 是第一个传参
        ele.insertBefore(img_document,c2)

    }

    del.onclick = function () {
        // 删除节点  给定一个document对象直接删除
        ele.removeChild(c2)

    }

    update.onclick = function () {
        // 替换节点 包含3个动作
        // 1、创建 替换的 一个节点
        var imgers = document.createElement('img')
        imgers.src = './12.jpg'
        // 在父级document 下，  新的document ，替换成旧的document
        ele.replaceChild(imgers,c2)
    }
</script>
</body>
</html>
posted @ 2023-03-15 14:59  mmszxc  阅读(19)  评论(0)    收藏  举报