标签属性操作
设置属性
1，添加属性 - 标签.setAttribute(键，值)
div.setAttribute('abc', 'aaa')
2，修改属性 - 标签.setAttribute(键，值)
div.setAttribute('abc', 'bbb')
3，获取属性的值 - 标签.getAttribute(键)
console.log( div.getAttribute('abc') )
4， 删除属性 - 标签.removeAttribute(键)
div.removeAttribute('abc')
5，利用属性操作设置样式
div.setAttribute('style', 'width:100px;height:100px;background-color:#0f0;')
6，利用属性操作设置类名
div.setAttribute('class', 'border')
属性和样式分清楚
总结;
setAttribute()
getAttribute()
removeAttribute()
属性有标签属性和对象属性
获取到的标签其实都是对象。需要用console.dir()来输出
标签对象也是有属性的，可以使用 对象属性的操作方式来操作标签对象
有些标签的某些标签属性会跟标签对象中的属性重合，我们就可以使用两种方式来操作标签的了
节点获取
获取所有子节点 - 父.childNodes
var childNodes = ul.childNodes
获取了所有子标签节点 - 父.children
var children = ul.children
获取父的第一个子节点 - 父.firstChild
var firstChild = ul,firstChild
获取父的第一个子标签节点 - 父.firstElementChild
var firstElementChild = ul.firstElementChild
获取最后一个子节点 - 父.lastChild
var lastChild = ul.lastChild;
获取最后一个子标签节点 - 父.lastElementChild
var lastElementChild = ul.lastElementChild
获取父节点 - 子.parentNode
var parentNode = lastElementChild.parentNode;
获取父标签节点 - 子.parentElement
var parentElement = lastElementChild.parentElement;
获取下一个兄弟节点 - 哥哥.nextSibling
var nextSibling = firstElementChild.nextSibling
获取下一个兄弟标签节点 - 哥哥标签.nextElementSibling
var next = firstElementChild.nextElementSibling
获取上一个兄弟节点 - 弟弟.previousSibling
var previousSibling = lastElementChild.previousSibling
获取上一个兄弟标签节点 - 弟弟标签.previousElementSibling
var prev = lastElementChild.previousElementSibling
总结：
获取所有子标签：父.children
获取第一个子标签：父.firstElementChild
获取最后一个子标签：父.lastElementChild
获取父标签：子.parentElement
获取下一个兄弟标签：哥哥.nextElementSibling
获取上一个兄弟标签：弟弟.previousElementSibling
节点操作
1.创建节点 - document.createElement('标签名')
var div = document.createElement('div')
2.插入节点
①将标签放到父标签的末尾作为子标签 - 父标签.appendChild(子标签-标签对象)
将b标签放到body中
document.body.appendChild(b)
②将新标签放到某个已经存在的子标签的前面 - 父标签.insertBefore(新标签, 已经存在的子标签)
把i标签放在b标签的前面
document.body.insertBefore(i, b)
3.替换节点 - 父标签.replaceChild(新的标签, 已经存在的子标签)
用s将i替换掉
document.body.replaceChild(s, i)
4.复制节点 - 标签.cloneNode() - 默认只能复制空标签
var newB = b.cloneNode()
如果要将标签内部的内容也复制出来，需要给cloneNode方法添加参数 - true
var newB = b.cloneNode(true)
5.删除节点 - 父标签.removeChild(被删除的子标签)
document.body.removeChild(s)
总结：
创建节点：document.createElement()
插入节点：
父.appendChild()
父.insertBefore(新的子, 旧的子)
替换节点：父.replaceChild(新的子, 旧的子)
复制节点：节点.cloneNdoe(true)
删除节点：父.removeChild(子)
获取元素
获取元素的样式
window.getComputedStyle(标签)
获取元素的位置（坐标）
标签.offsetLeft ，标签.offsetTop
获取元素的大小：
标签.clientWidth 标签.clientHeight - 获取到的是不包含边框的大小
标签.offsetWidth 标签.offsetHeight - 获取到的是包含边框的大小
DOM获取窗口大小
BOM有获取浏览器窗口大小的方法：
window.innerWidth
window.innerHeight
这两个获取窗口大小的时候，包含了滚动条的范围。
DOM也有获取窗口大小的方法
document.documentElement.ClientWidth
document.documentElement.clientHeight
DOM获取的大小中不包含滚动条的范围。
DOM获取body的尺寸
document.body.clientWidth
document.body.ClientHeight
获取窗口滚动过的距离：
卷去的高度
var t = document.documentElement.scrollTop
卷去的宽度
var l = document.documentElement.scrollLeft
有文档声明的写法
var t = document.documentElement.scrollTop
没有文档声明的写法
var t = document.body.scrollTop
不管什么情况都能获取到滚动过的距离
var t = document.documentElement.scrollTop || document.body.scrollTop
短路运算
利用 || 和 && 给变量根据不同的情况赋予不同的值
var a = 1 || 2
var a = 0 || false
|| 或者，左边的数据会转成布尔值，根据或者来进行判断是否能得到true，如果左边是true，或者 连接的整体已经可以得到true，此时就会将第一个数据赋值给变量
如果左边是false，就会将第二个数据赋值给变量了
短路运算就是一种赋值操作，只是其中有&&和||参与了。将连接的两个值经过判断选择其中一个赋值给变量
