七.节点操作
- 创建 节点
- 插入 节点
- 删除 节点
- 替换 节点
- 克隆 节点
创建节点
语法: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的尺寸