23 JS 中DOM的基本操作之操作节点(增删改查)

1. 在 JS 中创建节点

• 语法:document.createElement('要创建的标签名称')

<div class="box">
    <p>我是通过html手写出来的p标签</p>
</div>

    //1.1 创建一个元素节点
    var oDiv = document.createElement('div')
    var oSpan = document.createElement('span')
    // console.log(oDiv)
    // console.log(oSpan)

    //1.2创建一个文本节点(了解)
    var oText = document.createTextNode('我是通过JS创建出来的文本节点')
    // console.log(oText)

    //1.3将刚才创建的文本节点,添加到元素节点内  元素.appendChild(要添加的节点)
    oDiv.appendChild(oText)
    oSpan.innerText = '我是通过innerText直接赋值的字符串'

2.向页面增加一个节点

• 语法1:元素.appendChild(要添加的节点)

• 作用:向元素的末尾追加一个节点

• 语法2:元素.insertBefore(要插入的节点, 插入到哪个节点的前面)

• 注意:两个参数都是必填项

• 第二个参数传递正常节点时,代表插入到这个节点的前面

• 第二个参数传递的是 null 时,代表插入到 "元素"的末尾

    //0.获取元素
    var div = document.getElementsByClassName('box')[0]
    var p = document.querySelector('p')

    //2.向页面中增加一个节点
    //2.1元素.appendChild(要添加的节点)
    // div.appendChild(oDiv) 
    // div.appendChild(oSpan) 
    
    //2.2元素.insertBefore(要插入的节点, 插入到哪个节点的前面)
    div.insertBefore(oDiv, p) //将通过JS创建的div标签,插入到页面的 p 标签前面
    div.insertBefore(oSpan, null) // 第二个参数传递的是 null 时,代表插入到 "元素"的末尾

3.删除页面某一个节点

• 语法1: 父节点.removeChild(要删除的子节点)
• 语法2: 节点.remove()

<div class="box">
    <p>我是通过html手写出来的p标签</p>
</div>

    //0.获取节点
    var box = document.querySelector('.box')
    var p = document.querySelector('p') // 满足条件的第一个p标签
    
    //3.删除页面某一个节点
    // box.removeChild(p)
    box.remove()

4.修改页面某一个节点

• 语法: 父节点.replaceChild(新节点,旧节点/要被修改的节点)
• 作用:将页面中的某一个节点 做一个替换

    var span = document.createElement('span') //创建一个 span 标签 
    span.innerText = '我是通过 js 创建出来的span 标签'
    box.replaceChild(span,p) // 用刚刚创建出来的 span 标签,替换 原本的 p 标签

5.获取页面某一个节点(之前获取元素的方法)

6.克隆一个节点(把一个节点复制出一个一模一样的)

• 语法: 节点.cloneNode(参数)
• 参数:默认是 false,表示不可隆后代节点;选填是 true,表示克隆后代节点

<div class="box">
    <p>我是第一个p</p>
    <p>我是第二个p</p>
  </div>

    //0.获取节点
    var p = document.querySelector('p') // 满足条件的第一个p标签
    
    //6.克隆
    // box.appendChild(p) // 将p这个节点 添加到box的末尾
    /**
     * box.appendChild(p) 
     *    错误理解:将p这个节点 添加到box的末尾,然后页面就有3 个标签了
     *    正确节点:将p这个节点 添加到box的末尾
     *            因为DOM节点在页面中只会有一个(核心)
     *            所以这一步相当于将原本排列在box内部第一个的p标签移动到box内部的最后一个 
     * 
    */

    var cloneP = p.cloneNode() // 克隆出来一个和p这个节点一模一样的新节点   不包含后代节点
    var cloneP = p.cloneNode(true) // 克隆出来一个和p这个节点一模一样的新节点   包含后代节点
    box.appendChild(cloneP)