Dom（3）——创建文本节点、元素节点、appendChild()、childNodes及时更新、querySelector、删除.remove()与.removeChild()、克隆

本文链接：https://blog.csdn.net/weixin_48796690/article/details/127483577

本文介绍了如何在JavaScript中创建文本节点和元素节点，并结合使用。探讨了appendChild()方法在DOM更新中的作用，以及querySelector的选择器功能。同时，详细阐述了删除节点的.remove()和.removeChild()方法，以及如何克隆节点。通过实例展示了删除表格内容和整个表格的操作，以及克隆表格行的方法。

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

1、先创建 `元素节点`、`文本节点`，

再将元素节点和文本节点 `用appendChild()`结合起来

<body>
    <a href="">增加</a>
    <a href="">删除</a>
    <a href="">查找</a>
</body>

<script>
    //HTMLCollection:及时更新
    let a_list=document.getElementsByTagName('a') //获取标签名，用getElementsByTagName()
    console.log(a_list);

    //创建一个元素节点
    let a_dom=document.createElement('a')
    //设置属性
    a_dom.setAttribute('href','#')
    a_dom.setAttribute('href','提示')
    a_dom.style.color='red'
    a_dom.style.textDecoration='none'

    //创建文本节点
    let text_dom=document.createTextNode('修改')
    //让元素节点和这个文本节点产生关系，让元素节点把这个文本节点包裹起来，这样这个元素节点就丰满了
    a_dom.appendChild(text_dom)

    //获取body节点
    let body_dom=document.body
    //让body节点和刚刚那个已经丰满了的元素节点结合起来，整个过程就完成了
    body_dom.appendChild(a_dom)

</script>

运行结果：
在这里插入图片描述
详细展示：

2、验证 `childNodes` 的确可以让 `childList`及时更新!

<body>
    <div id="mydiv">
        <a href="">增加</a>
        <a href="">删除</a>
        <a href="">查找</a>
    </div>
</body>

<script>
//标签选择器：querySelector('#标签名') 获取元素，等价于 getElementById('标签名')  获取元素
        let div_dom=document.querySelector('#mydiv')
        let childNodes=div_dom.childNodes
        //这里，我们先打印一下原来的childNodes,看看结果有几条？
        console.log(childNodes)

       //接下来，我们为代码增加一个元素节点，看看效果会怎么样？
       //验证一下 childNodes是否真的能让childList及时更新？
       //答案是：childNodes 的确能 让childList及时更新


       //创建一个元素节点
       let a_dom=document.createElement('a')
       //设置属性：
       a_dom.setAttribute('href','#')
       a_dom.setAttribute('href','提示')
       a_dom.style.color='red'
       a_dom.style.textDecoration='none'
       //接下来，创建文本节点：
       let text_dom=document.createTextNode('修改')
       //让元素节点和这个文本节点产生关系，让元素节点把这个文本节点包裹起来，这样这个元素节点就丰满了
       a_dom.appendChild(text_dom)
       //让div_dom与这个已经丰满的元素节点结合起来
       div_dom.appendChild(a_dom)
       //此刻，再一次在控制台打印出来childNodes，我们观察一下结果：
       console.log(childNodes)

//通过控制台显示出来的两个结果的对比，发现：childNodes的确可以让childList及时更新!!！
       
</script>

在这里插入图片描述

3、`querySelectorAll()`不能使`childList`及时更新

<body>
    <div id="mydiv">
        <a href="">增加</a>
        <a href="">删除</a>
        <a href="">查找</a>
    </div>
</body>

<script>
        let a_list=document.querySelectorAll('a')
        console.log(a_list)
       
       
        //创建一个元素节点
        let a_dom=document.createElement('a')
        a_dom.setAttribute('href','#')
        a_dom.setAttribute('title','提示')
        a_dom.setAttribute('style','color:red;text_decration:none')
        //创建一个文本节点
        let text=document.createTextNode('修改')
        //将元素节点与文本节点相结合起来，构成一个健壮的元素节点
        a_dom.appendChild(text)

        let div_dom=document.querySelector('#mydiv')
        div_dom.appendChild(a_dom)
        console