七.节点操作

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

创建节点
语法：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的尺寸