创建节点
插入节点
<body>
<div>
<p>我是 div 内本身的 p 标签</p>
</div>
<script>
/*
创建节点
语法：document.createElement('标签名称')
作用：创建一个指定标签元素
返回值：一个创建好的元素节点
*/
var div = document.createElement('div')
console.log(div)
/*
插入节点
语法1：父节点.appendChild(子节点)
作用：把子节点放在父节点内部，并且放在最后的位置
语法2：父节点.insertBefore(要插入的子节点，哪一个子节点的前面)
作用：把子节点放在父节点内部，并且放在指定某一个子节点前面
*/
// 语法1：
var span = document.createElement('span')
span.innerText = '我是创建出来的 span 标签'
var div = document.querySelector('div')
div.appendChild(span)
// 语法2：
var span = document.createElement('span')
span.innerText = '我是创建出来的 span 标签'
var div = document.querySelector('div')
var p = document.querySelector('p')
div.insertBefore(span,p)
</script>
</body>
删除节点
<body>
<div>
<p>我是 div 内本身的 p 标签</p>
<span>我是 div 内本身的 span 标签</span>
</div>
<script>
/*
删除节点
语法1：父节点.removeChild(子节点)
作用：从父节点内部删除某一个子节点
语法2：节点.remove()
作用：把自己删除
*/
// 语法1：
var div = document.querySelector('div')
var p = document.querySelector('p')
div.removeChild(p)
// 语法2：
var span = document.querySelector('span')
span.remove()
</script>
</body>
替换节点
<body>
<div>
<p>我是 div 内本身的 p 标签</p>
<span>我是 div 内本身的 span 标签</span>
</div>
<script>
/*
替换节点
语法：父节点.replaceChild(换上节点，换下节点)
作用：前者替换后者
*/
// 语法：
var i = document.createElement('i')
i.innerText = '我是i节点'
var div = document.querySelector('div')
var p = document.querySelector('p')
div.replaceChild(i,p)
</script>
</body>
克隆节点
<body>
<div>
<p>我是 div 内本身的 p 标签</p>
<span>我是 div 内本身的 span 标签</span>
</div>
<script>
/*
克隆节点
语法：节点.cloneNode(是否克隆 该节点 的后代节点)，默认是 false
作用：把改节点克隆出一份
返回值：克隆好的新节点
*/
// 语法：
var div = document.querySelector('div')
console.log(div.cloneNode(false))
console.log(div.cloneNode(true))
</script>
</body>
节点操作.png
获取元素尺寸
获取元素尺寸.png
