Document Object Model 文档对象模型

查

查看元素节点

document 代表整个文档
document.getElementsByTagName() 标签名
document.getElementsByName() 需注意，只有部分标签name可生效（表单，表单元素，img，iframe）
document.getElementsByClassName() 类名，IE8和IE8以下的版本无效，可以多个class一起
document.getElementById() 元素id在IE8以下的浏览器，不区分id大小写，而且也返回匹配name属性的元素。
document.querySelector() CSS选择器 在IE7及IE7以下无效。
document.querySelectorAll() CSS选择器 在IE7及IE7以下无效。

遍历节点树

parentNode 父节点（最顶端的parentNode为#document）
childNode 子节点们
firstChild 第一个子节点
lastChild 最后一个子节点
nextSibling 后一个兄弟节点
previousSibling 前一个兄弟节点

基于元素节点树的遍历

parentElement 返回当前元素的父元素节点（IE不兼容）
children 只返回当前元素的元素子节点
node.childElementCount === node.children.length 当前元素节点的子元素个数 （IE不兼容）
firstElementChild 返回的是第一个元素节点（IE不兼容）
lastElementChild 返回的是最后一个元素节点（IE不兼容）
nextElementSibling / previousElementSibling 返回后一个 / 前一个兄弟元素节点（IE不兼容）

节点的四个属性

nodeName 元素的标签名，以大写形式表示，只读
nodeValue Text节点或Comment节点的文本内容，可读写
nodeType 该节点的类型，只读
attributes Element节点的属性集合

节点的一个方法

Node.hasChildNodes()

节点的类型

1. 元素节点 *
2. 文本节点
3. 属性节点 *
4. 注释节点
5. 文档节点

DOM Tree

增

document.createElement() 创建元素节点
document.createTextNode() 创建文字节点
document.createComment() 创建注释节点
document.createDocumentFragment()

插

ParentNode.appendChild() 在最后面插入，和数组的push很像
ParentNode.insertBefore(a, b) 在a的前面插入b

删

parent.removeChild()
child.remove()

替换

parent.replaceChild(new, origin) 用new替换origin

Element属性

innerHTML 改变元素内的内容。
innerText 改变元素内的文本

Element方法

ele.setAttribute("属性名", "属性值") 设置一个属性
ele.getAttribute("属性名")

获取窗口属性

查看滚动条的滚动距离

window.pageXOffset/pageYOffset IE8及以下浏览器不兼容

document.body.scrollLeft/scrollTop
document.documentElement.scrollLeft/scrollTop 兼容性混乱，在IE8及以下版本用时取两个值相加。并且，两个值不会同时有值，一个有值，另一个值为零。

document.body.scrollLeft + document.documentElement.scrollLeft

可视区窗口的尺寸

window.innerWidth/innerHeight IE8及以下浏览器不兼容

document.documentElement.clientWidth/clientHeight 标准模式下，任何浏览器都兼容

document.body.clientWidth/clientHeight 适用于怪异/混杂模式下的浏览器

查看元素的尺寸

ele.offsetWidth/offsetHeight

查看元素的位置

1. ele.offsetLeft/offsetTop
   对于无定位的父级元素，返回相对于文档的坐标。
   对于有定位的父级元素，返回相对于有定位的父元素的坐标。

2. ele.offsetParent
   返回最近有定位的父级元素，如无返回body
body的offsetParent返回null

让滚动条滚动

window上有三个方法

1. scroll(x, y)/scrollTo(x, y) 两种用法相同，用谁都行。
2. scrollBy(x, y)

x: 为横轴
y: 为纵轴
三个方法功能类似，用法都是将x, y坐标传入。即实现让滚动条滚动到当前位置。

区别：scrollBy()会在之前的数据基础之上做累加

脚本化CSS

读写元素CSS属性

dom.style.prop

1. 可读写行间样式，没有兼容性问题，碰到float这样的保留字属性，前面应该加css
   eg: float => cssFloat
2. 复合属性必须拆解，组合单词变成小驼峰式写法
3. 写入的值必须是字符串格式

dom.style.color = "red"
dom.style.fontSize = "12px"

查询计算样式

1. window.getComputedStyle(ele, null)或后面跟.[prop]
null这个参数是调取元素伪类用的。
   参数null是干嘛用的
   第一条是获取div宽度，第二条是获取div伪类的宽度
2. 计算样式只读，不可修改
3. 返回的计算样式的值都是绝对值，没有相对单位
4. IE8及以下不兼容

查询样式

1. ele.currentStyle
2. 计算样式只读，不可修改
3. 返回的计算样式的值不是经过转换的绝对值
4. IE独有的属性