DOM复习篇

此文章为自我复习，在下学识浅薄，经验不足，文章中可能出现错误或语义不对的地方，欢迎指正。长期更新中（什么时候学到了新的再补充）…

DOM

DOM节点操作

getAttribute()获取，只能通过元素节点调用，不能被document调用
setAttribute()新增/设置，需要传入两个参数，属性名称和内容

操作节点

childNodes：获取所有子节点
children：获取所有元素子节点
parent：获取父节点
firstchild：获取第一个子节点
lastchild：获取最后一个子节点
firstElementchild：获取第一个元素子节点
lastElementchild：获取最后一个元素子节点
previousSibling：获取上一个兄弟节点
nextSibling：获取下一个兄弟节点
previousElementSibling：获取上一个兄弟元素节点
nextElementSibling：获取下一个兄弟元素节点

增删改

createElement()创建一个元素节点对象
例：

var li=document.createElement("li")

createTextNode()：创建一个文本节点对象
appendchild()：向父节点中添加一个节点
insertBefore()：在子节点前插入新的子节点
语法：父节点.insertBefore(新节点，指定子节点)
replaceChild()：使指定子节点替换已有子节点
语法：父节点.replaceChild(新节点，旧节点)
removeChild()：删除一个子节点
语法：父节点.removeChild(子节点) 或 子节点.parentNode.removeChild(子节点)
cloneNode()：克隆节点，括号内为空或者false，则为浅拷贝，为true则深拷贝

DOM操作css

通过js修改元素样式

语法：
元素.className=newClassName
元素.style.样式名=样式值（内联样式）

读取元素样式

语法：
元素.style.样式名
getComputedstyle()可以读取到样式表中的样式

其它样式操作属性

clientWidth/clientHeight
获取元素宽高，包括内容区，内边距，但不包括边框，不带单位（px），可直接计算，只读
offsetWidth/offsetHeight
获取元素宽高，包括内容区，内边距，包括边框，不带单位（px），可直接计算，只读
offsetLeft/offsetTop
获取自身左/上边框到定位父元素左/上内边框的距离
offsetparent
获取当前元素的定位父元素
scrollWidth/scrollHeight
获取元素可滚动区域的宽高
scrollLeft/scrollTop
获取水平/垂直滚动条可滚动的距离
tip：当scrollHeight减去scrollTop=clientHeight说明滚动条滚到底了

相关事件

onscroll：元素滚动条滚动时触发
clientX/clientY：获取鼠标在当前可见窗口的坐标
pageX/pageY：获取鼠标相对于当前页面的坐标

offset系列经常用于获得元素位置
client系列经常用于获取元素大小
scroll系列经常用于获取滚动距离
页面的滚动距离可通过window.pageXoffset获得

待续…