JS原生DOM基本操作(下)

七.节点操作

• 创建 节点
• 插入 节点
• 删除 节点
• 替换 节点
• 克隆 节点

创建节点
语法：document.createElement(‘标签名称’)
作用：创建一个指定的标签元素
返回值：一个创建好的元素节点

        //创建一个div标签
        var div=document.createElement('div')
        //控制台输出
        console.log(div)

插入节点
语法1：父节点.appendChild(子节点)
作用：把子节点放入父节点的内部，并且放在最后的位置

    <div>
        <p>我是div内部的一个p标签</p>
    </div>
    <script>
        //创建一个span标签
        var span=document.createElement('span')
        //向span标签内添加一些文本内容
        span.innerText='我是创建出来的span标签'
        //获取页面上的div元素
        var div=document.querySelector('div')
        //把创建的span插入到div内部
        div.appendChild(span)
    </script>

语法2：父节点.insertBefore(要插入的节点，哪一个子节点的前面)
作用：把子节点放入父节点的内部，并且放在指定的某一个子节点的前面

    <div>
        <p>我是div内部的一个p标签</p>
    </div>
    <script>
        //创建一个span标签
        var span=document.createElement('span')
        //向span标签内添加一些文本内容
        span.innerText='我是创建出来的span标签'
        //获取页面上的div元素和p元素
        var div=document.querySelector('div')
        var p=document.querySelector('p')
        //把创建的span插入到div内部p标签前
        div.insertBefore(span,p)
    </script>

删除节点
语法1：父节点.removeChild(子节点)
作用：从父节点内删除某一个子节点

    <div>
        <p>我是div内部的一个p标签</p>
        <span>我是div内部的一个sapn标签</span>
    </div>
    <script>
        //获取页面上的div元素和p元素
        var div=document.querySelector('div')
        var p=document.querySelector('p')
        //从div内删除p元素
        div.removeChild(p)
    </script>

语法2：节点.remove()
作用：把自己删除

    <div>
        <p>我是div内部的一个p标签</p>
        <span>我是div内部的一个sapn标签</span>
    </div>
    <script>
        //获取页面上的p元素
        var p=document.querySelector('p')
        //删除p元素
        p.remove()
    </script>

替换节点
语法：
作用：在父节点内，使用换上节点替换掉换下节点

    <div>
        <p>我是div内部的一个p标签</p>
        <span>我是div内部的一个sapn标签</span>
        <p>我是div内部的一个p标签</p>
    </div>
    <script>
        //创建一个 i 节点
        var i=document.createElement('i')
        //给i标签内添加一些文本
        i.innerText='我是创建出来的i标签'
        //获取到页面的div元素
        var div=document.querySelector('div')
        //获取到页面的span元素
        var span=document.querySelector('span')
        //使用创建的i标签替换div内的span标签
        div.replaceChild(i,span)
    </script>

克隆节点
语法：节点.cloneNode(是否克隆节点)
ps：是true 否false
作用：把该节点复制一份一模一样的内容
返回值：克隆好的节点

    <div>
        <p>我是div内部的一个p标签</p>
    </div>
    <script>
        //获取页面的div元素
        var div=document.querySelector('div')
        //克隆一个div元素，不克隆后代元素
        var clone1=div.cloneNode(false)
        //克隆一个div元素，克隆后代元素
        var clone2=div.cloneNode(true)
        //输出
        console.log('不克隆后代元素:',clone1)
        console.log('克隆后代元素:',clone2)
    </script>

八.获取元素尺寸

语法1：

• 元素.offsetHeight
• 元素.offsetWidth

作用：获取元素 内容 + padding + border区域的尺寸

语法2：

• 元素.clientHeight
• 元素.clientWidth

作用：获取元素 内容 + padding 区域的尺寸

两套语法的区别在于获不获取border的尺寸