七.节点操作
- 创建 节点
- 插入 节点
- 删除 节点
- 替换 节点
- 克隆 节点
创建节点
语法：document.createElement(‘标签名称’)
作用：创建一个指定的标签元素
返回值：一个创建好的元素节点
//创建一个div标签
var div=document.createElement('div')
//控制台输出
console.log(div)
插入节点
语法1：父节点.appendChild(子节点)
作用：把子节点放入父节点的内部，并且放在最后的位置
我是div内部的一个p标签
<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标签
<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内部的一个sapn标签
<script>
//获取页面上的div元素和p元素
var div=document.querySelector('div')
var p=document.querySelector('p')
//从div内删除p元素
div.removeChild(p)
</script>
语法2：节点.remove()
作用：把自己删除
我是div内部的一个p标签
我是div内部的一个sapn标签
<script>
//获取页面上的p元素
var p=document.querySelector('p')
//删除p元素
p.remove()
</script>
替换节点
语法：
作用：在父节点内，使用换上节点替换掉换下节点
我是div内部的一个p标签
我是div内部的一个sapn标签
我是div内部的一个p标签
<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标签
<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的尺寸