DOM操作

DOM是文档对象模型 ： 就是document提供了一些API赋予开发者操作页面的能力

节点类型 ：

　

 

childNodes ： 某个节点下的所有子节点、类数组

children : 不是标准的属性，但是所有浏览器都支持，找到某个元素下的所有元素子节点

 

parentNode：查找某个元素的父节点

nextElementSibling : 上一个兄弟节点

previousElementSlibing ： 下一个兄弟节点

firstElementChild : 第一个子节点

lastElementChild ： 最后一个子节点

 

offsetParent ： 最近的有定位的祖先节点，如果都没有定位，则是body

offsetLeft/offsetTop ：外边框到有定位父级的内边框的距离

getBoundingClientRect() : 获取某个元素的信息，返回值为对象 （left,top,bottom,right,width,height）获取的值是会根据滚动条变化的

 

getAttribute(‘attr’) ：获取元素行间的属性

setAttribute(‘attr’,’value’) ： 设置元素行间属性

removeAttribute(‘attr’) : 删除元素行间属性

elem.clientWidth / elem.clientHeight : 获取某个元素的宽高，不计算边框，加上padding

elem.offsetWidth /elem.offsetHeight :计算边框，加上padding

document.documentElement.clientWidth /Height: 可视区的宽度/高度

 

createElement(tagName) ： 创建元素

appendChild(要插入的元素) ： 向级末尾加入元素

insertBefore(新添加的元素，已有的元素) : 向父级已有的元素前插入一个元素，如果第二个参数为假的，那么会添加到末尾

removeChild(指定的子节点) ：删除指定的子节点，如果子节点没有，会报错

replaceChild(要替换成什么，谁被替换) : 替换子节点

cloneNode() : 克隆节点，默认只克隆指定元素本身，不会克隆该元素下的所有子节点，加个参数true就可以，默认是false 。事件是不会被克隆的