DOM的小结

（一）标签的属性操作

①标签.setAttribute(键，值) - 设置属性

②标签.getAttribute(键) - 获取属性

③标签.removeAttribute(键) - 删除属性

将获取到的标签看做是一个对象，console.dir()输出可以看到对象，就可以使用对象的属性操作，添加属性、删除属性、获取属性..

从节点的角度看待整个html文档，html文档的每个组成部分都叫节点。

(二)获取节点

获取所有子标签节点：父.children

获取第一个字标签节点：父.fristElementCHild

获取最后一个字标签节点：父.lastElementChild

获取上一个兄弟标签：兄弟.previousElementSibling

获取下一个兄弟标签：兄弟.nextElementSibling

获取父标签节点：子.parentElement

(三)节点操作

创建节点：document.createElement(标签名)

插入节点：父.appendChild ； 父.inserBefore(新的子，旧的子)

替换节点：父.replaceChild(新的子，旧的子)

复制节点：节点.cloneNode(true)

删除节点：父.removeChild(子)

获取节点的坐标位置：标签.offsetLeft   ；  标签.offsetHeight

获取到的是纯数字，位置是相对于设置过定位的父标签

获取节点的大小：

包含边框：①标签.offserWidth  ；  ②标签.offsetHeight

不包含边框：①标签.clientWidth  ；  ②标签.clientHeight

获取窗口大小：

不包含滚动条大小：document.documentElement.clientWidth ； document.documentElement.clientHeight

获取滚动过得距离：

有文档声明时：document.docuemntElement.ScrollTop

没有文档声明的时候：document.body.scrollTop

兼容写法：

document.documentElement.scrollTop   ||    document.body.scrollTop

短路运算符：

var a = 0 || ‘abc’

var a = ‘’ || false

var a = ‘aaa’ || false

var a = ‘aaa’ && false

var a = ‘’ && false