操作DOM节点
常规意义上 ‘增删改查’
再向页面增加一个节点，首先，你应该先有一个节点
操作分类：
1.在JS中创建一个节点
语法：document.createElement('要创建的标签名')
2.向页面增加一个节点
语法1：元素.appendChild(要添加的节点)
作用：向元素的末尾追加一个节点
语法2：元素.insertBefore(要插入的节点,插入到哪个节点的前面)
作用：向元素中追加一个节点
注意：两个参数都是必填项
第二个参数传递正常节点时，代表插入到这个节点的前面
第二个参数传递的是null 的时，表示插入到“元素”的末尾
<body>
<div class="box">
<p>我是通过 HTML 手写出来的 P 标签</p>
</div>
<script>
// 0. 获取元素
var myDiv = document.getElementsByClassName('box')[0]
var oP = document.querySelector('p')
// 1.1 创建一个元素节点
var oDiv = document.createElement('div')
var oSpan = document.createElement('span')
// console.log(oDiv)
// console.log(oSpan)
// 1.2 创建一个文本节点（了解）
var oText = document.createTextNode('我是通过 JS 创建出来的文本节点')
// console.log(oText)
// 1.3 将刚才创建的文本节点添加到元素节点内 元素.appendChild(要添加的节点)
oDiv.appendChild(oText)
oSpan.innerText = '我是通过 innerText 直接赋值的字符串'
// 2 向页面中增加一个节点
// 2.1 元素.appendChild(要添加的节点)
// myDiv.appendChild(oDiv) //伪数组.appendChild
// myDiv.appendChild(oSpan)
// 2.2 元素.insertBefore(要插入的节点,插入到哪个节点的前面)
myDiv.insertBefore(oDiv, oP) //将我们通过JS创建的div标签，插入到页面的P标签前面
myDiv.insertBefore(oSpan, null) //第二个参数传递null，表示插入到“元素”的末尾
</script>
</body>
3.删除页面的某一个节点
语法1：父节点.removeChild('要删除的子节点')
语法2：节点.remove()
4.修改页面的某一个节点
语法：父节点.replaceChild('新节点','旧节点/要被修改的节点')
作用：将页面中的某一个节点做一个替换
5.获取页面的某一个节点
之前获取元素的方法
6.克隆一个节点（把一个节点复制出一个一模一样的）
语法：节点.cloneNode(参数)
参数：默认是false，表示不克隆后代节点
选填是true，表示克隆后代节点
<body>
<div class="box">
<p>我是第一个P 标签</p>
<p>我是第二个 P 标签</p>
</div>
<script>
// 0. 获取节点
var box = document.querySelector('.box')
var oP = document.querySelector('p') //满足条件的第一个P标签
console.log(oP)
// 3.删除页面的某一个节点 父节点.removeChild('要删除的子节点')
// 父节点.removeChild('要删除的子节点')
// box.removeChild(oP)
// 节点.remove()
box.remove()
// 4.修改页面的某一个节点
// var oSpan = document.createElement('span') //创建一个span标签
// oSpan.innerText = '我是通过JS创建出来的span标签' //给span标签添加文字
// box.replaceChild(oSpan, oP) //用刚刚创建出来的span标签，替换原来的p标签
// 6.克隆一个节点
// var cloneP = oP.cloneNode() //克隆出来一个和oP节点一模一样的新节点 不包含后代节点
// var cloneP = oP.cloneNode(true) //克隆出来一个和oP节点一模一样的新节点 包含后代节点
// box.appendChild(cloneP)
/**
* box.appendChild(oP)
*
* 错误理解：将oP这个节点，添加到box的末尾，然后页面就有3个标签了
* 正确理解：将oP这个节点，添加到box的末尾
* ! 因为DOM节点在页面中只会具有一个(核心)
* 所以这一步相当于将原本排列在box内部的第一个P标签，移动到了box内部的最后一个
*/
</script>
</body>
获取非行内样式（了解）
语法：window.getComputedStyle(元素).要查询的css属性名
IE 的语法：元素.currentStyle.要查询的css属性名 (了解)
获取元素偏移量
获取元素在页面上相对参考父级的左边和上边的距离
参考父级：其实就是假设你要给一个元素'绝对定位'，它是根据谁来进行定位，那么这个元素的偏移量参考父级就是谁
1.元素.offsetParent 获取元素的相对父级
2.元素.offsetLeft 获取元素距离左边的距离
3.元素.offsetTop 获取元素距离顶部的距离
获取元素尺寸（元素的占地面积）
语法1：
元素.offsetWidth
元素.offsetHeight
语法2：
元素.clientWidth
元素.clientHeight
区别：
offsetXXX --- 实际的宽度/高度 + padding + border
clientXXX --- 实际的宽度/高度 + padding
获取浏览器窗口尺寸
1.window.innerXXX(Width/Height) --- 计算的时候，会包含浏览器的滚动条
2.document.documentElement.clientXXX((Width/Height)) --- 计算的时候，不会计算滚动条（只计算浏览器的可是区域）
