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 。事件是不会被克隆的