js中DOM节点的增删改查

最新推荐文章于 2024-09-11 11:12:17 发布

清尘沐歌

最新推荐文章于 2024-09-11 11:12:17 发布

阅读量399

点赞数

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

本文链接：https://blog.csdn.net/weixin_45017726/article/details/121172792

版权

笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

js中DOM节点的增删改查

注：后面附有源码，可自行测试。

创建节点：

<div id="app2">这是spp2</div>
<script>
    let app2 = document.querySelector('#app2')
    let span2 = document.createElement('span')
    span2.innerHTML = 'houdunren你好'
    app2.append(span2);//最后插入到#app2里面的最后
</script>

结果：
在这里插入图片描述

查：节点获取

<div id="app">
    <div class="houdunren" data="hd">houdunren.com</div>
    <div class="houdunwang">houdunwang.com</div>
    <div class="xiangjun"><!-- 111 --></div>
</div>
      
<script>
    const app = document.querySelector(`#app`)
    console.log(app.children) //所有子元素
    console.log(app.firstElementChild) //第一个子元素 div.houdunren
    console.log(app.lastElementChild) //最后一个子元素 div.xiangjun

    const houdunwang = document.querySelector('.houdunwang')
    console.log(houdunwang.parentElement) //父元素 div#app

    console.log(houdunwang.previousElementSibling) //上一个兄弟元素 div.houdunren
    console.log(houdunwang.nextElementSibling) //下一个兄弟元素 div.xiangjun
</script>

改：

改属性：

直接设置元素的属性

<div id="app1">
	  <div data="hd1">houdunren.com</div>
	  <div>houdunwang.com</div>
</div>
<script>
	  const app1 = document.querySelector(`#app1`)
	  app1.className = 'houdunren2';
</script>

结果：
在这里插入图片描述

通过setAttribute设置属性

<div id="app3">
    <div data="hd">houdunren.com</div>
    <div>houdunwang.com</div>
</div>
<script>
    const app3 = document.querySelector(`#app3`)
    app3.setAttribute('className', "houdunren3");
</script>

结果：
在这里插入图片描述

改内容innerHTML：

<div id="app5">
    houdunren.com
</div>
<script>
    let app5 = document.querySelector('#app5')
    let h5 = document.createElement('h4')
    h5.append('houdunwang.com改内容5');
    app5.innerHTML=h5.innerHTML;
</script>

结果：
在这里插入图片描述

改内容和标签replaceWith，把节点也换了

<div id="app4">
    houdunren.com
</div>
<script>
    let app4 = document.querySelector('#app4')
    let h4 = document.createElement('h4')
    h4.append('houdunwang.com改内容4');
    app4.replaceWith(h4);
</script>

结果：
在这里插入图片描述

增：

<div id="app6">
    这里是元素
</div>
<script>
    let app6 = document.querySelector('#app6')

    //插入字符串或节点,不能够直接解析html标签,所以需要创建
    let afterDom = "<h5>"
    afterDom += "-houdunwang.com6元素本身后面</h5>"

    let beforep=document.createElement('p');
    beforep.className='beforep';
    beforep.innerHTML='-houdunwang.com6元素本身前面';  

    app6.before(beforep);
    app6.prepend('-houdunwang.com6元素内部前面')
    app6.append('-houdunwang.com6元素内部后面')
    app6.after(afterDom)

    //会解析html标签
    let before6='本身'
    let beforebegin6='<h4>'+
        '元素'+before6+'前面'+
        '</h4>'

    let abgin='内部'
    let afterbegin6=`
                     <div>
                       <h4>
                         元素${abgin}前面
                       </h4>        
                     </div>
                    `
    let afterend6='<div>'
    afterend6+='<h4>元素本身后面</h4>'
    afterend6+='</div>'
    app6.insertAdjacentHTML('beforebegin', beforebegin6)//元素本身前面
    app6.insertAdjacentHTML('afterbegin', afterbegin6)//元素内部前面
    app6.insertAdjacentHTML('beforeend', '<h4>元素内部后面</h4>')
    app6.insertAdjacentHTML('afterend', afterend6)//元素本身后面
</script>

结果：
在这里插入图片描述

删：

<div id="app7">
    <p>删除</p>
    <p>这是要删除的节点1</p>
    <span>这是要删除的节点2</span>
</div>
<script>
    //直接删
    let app7 = document.querySelector('#app7>p:nth-of-type(2)')
    app7.remove();//第二个p已经删除了

    //先获取父元素,再获取本身元素,根据父元素来删
    let Fuapp7=document.querySelector('#app7');
    let chapp7=document.querySelector('#app7>span')
    Fuapp7.removeChild(chapp7);//span也已经删除
</script>

复制，克隆

<h2>复制</h2>
<div id="app8">复制,克隆1</div>
<script>
    let app8 = document.querySelector('#app8')
    let newApp8 = app8.cloneNode(true)
    document.body.appendChild(newApp8)
</script>

附上全部源码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 创建 -->
    <h2>创建</h2>
    <div id="app2">这是spp2</div>
    <script>
        let app2 = document.querySelector('#app2')
        let span2 = document.createElement('span')
        span2.innerHTML = 'houdunren你好'
        app2.append(span2);
    </script>
    <hr>
    <!--  
        节点属性 	             说明
        parentElement 	        获取父元素
        children 	            获取所有子元素
        previousElementSibling 	上一个兄弟标签
        nextElementSibling 	    下一个兄弟标签
        childElementCount 	    子标签元素的数量
        firstElementChild 	    第一个子标签
        lastElementChild 	    最后一个子标签
        contains 	            返回布尔值，判断传入的节点是否为该节点的后代节点
     -->
    <!--查  -->
    <h2>查</h2>
    <div id="app">
        <div class="houdunren" data="hd">houdunren.com</div>
        <div class="houdunwang">houdunwang.com</div>
        <div class="xiangjun">
            
        </div>
    </div>
    <script>
        const app = document.querySelector(`#app`)
        console.log(app.children) //所有子元素
        console.log(app.firstElementChild) //第一个子元素 div.houdunren
        console.log(app.lastElementChild) //最后一个子元素 div.xiangjun

        const houdunwang = document.querySelector('.houdunwang')
        console.log(houdunwang.parentElement) //父元素 div#app

        console.log(houdunwang.previousElementSibling) //上一个兄弟元素 div.houdunren
        console.log(houdunwang.nextElementSibling) //下一个兄弟元素 div.xiangjun
    </script>
    <hr>

    <!-- 改 -->
    <!-- 改属性 -->
    <h2>改</h2>
    <div id="app1">
        <div data="hd1">houdunren.com</div>
        <div>houdunwang.com</div>
    </div>
    <script>
        const app1 = document.querySelector(`#app1`)
        app1.className = 'houdunren2';
    </script>
    <div id="app3">
        <div data="hd">houdunren.com</div>
        <div>houdunwang.com</div>
    </div>
    <script>
        const app3 = document.querySelector(`#app3`)
        app3.setAttribute('className', "houdunren3");
    </script>
    <!-- 改内容:替换 -->
    <div id="app4">
        houdunren.com
    </div>
    <script>
        let app4 = document.querySelector('#app4')
        let h4 = document.createElement('h4')
        h4.append('houdunwang.com改内容4');
        app4.replaceWith(h4);
    </script>
    <div id="app5">
        houdunren.com
    </div>
    <script>
        let app5 = document.querySelector('#app5')
        let h5 = document.createElement('h4')
        h5.append('houdunwang.com改内容5');
        app5.innerHTML = h5.innerHTML;
    </script>
    <hr>

    <!-- 增 -->
    <h2>增</h2>
    <div id="app6">
        这里是元素
    </div>
    <script>
        let app6 = document.querySelector('#app6')

        //插入字符串或节点,不能够直接解析html标签,所以需要创建
        let afterDom = "<h5>"
            afterDom += "-houdunwang.com6元素本身后面</h5>"

        let beforep=document.createElement('p');
        beforep.className='beforep';
        beforep.innerHTML='-houdunwang.com6元素本身前面';  

        app6.before(beforep);
        app6.prepend('-houdunwang.com6元素内部前面')
        //用古老的方式只能插入节点,不能够直接插入字符串appendChild
        app6.append('-houdunwang.com6元素内部后面')
        app6.after(afterDom)
        
        //会解析html标签
        let before6='本身'
        let beforebegin6='<h4>'+
                '元素'+before6+'前面'+
                '</h4>'

        let abgin='内部'
        let afterbegin6=`
            <div>
                <h4>
                    元素${abgin}前面
                </h4>        
            </div>
        `
        let afterend6='<div>'
            afterend6+='<h4>元素本身后面</h4>'
            afterend6+='</div>'
        app6.insertAdjacentHTML('beforebegin', beforebegin6)
        app6.insertAdjacentHTML('afterbegin', afterbegin6)
        app6.insertAdjacentHTML('beforeend', '<h4>元素内部后面</h4>')
        app6.insertAdjacentHTML('afterend', afterend6)
    </script>
    <hr>

    <!-- 删除 -->
    <h2>删除</h2>
    <div id="app7">
        <p>删除</p>
        <p>这是药删除的节点1</p>
        <span>这是药删除的节点2</span>
    </div>
    <script>
        //直接删
        let app7 = document.querySelector('#app7>p:nth-of-type(2)')
        app7.remove();//第二个p已经删除了

        //先获取父元素,再获取本身元素,根据父元素来删
        let Fuapp7=document.querySelector('#app7');
        let chapp7=document.querySelector('#app7>span')
        Fuapp7.removeChild(chapp7);//span也已经删除
    </script>
    <hr>

    <!-- 复制,克隆 -->
    <h2>复制</h2>
    <div id="app8">复制,克隆1</div>
    <script>
        let app8 = document.querySelector('#app8')
        let newApp8 = app8.cloneNode(true)
        document.body.appendChild(newApp8)
    </script>
</body>

</html>