创建型API总结
创建型api主要包括createElement
,createTextNode
,cloneNode
和createDocumentFragment
四个方法,需要注意下面几点:
(1)它们创建的节点只是一个孤立的节点,要通过appendChild
添加到文档中
(2)cloneNode
要注意如果被复制的节点是否包含子节点以及事件绑定等问题
(3)使用createDocumentFragment
来解决添加大量节点时的性能问题
页面修改型API
修改页面内容的api主要包括:appendChild
,insertBefore
,removeChild
,replaceChild
。
要注意几个特点:
(1)不管是新增还是替换节点,如果新增或替换的节点是原本存在页面上的,则其原来位置的节点将被移除,也就是说同一个节点不能存在于页面的多个位置
(2)节点本身绑定的事件会不会消失,会一直保留着。
节点查询型API
document.getElementById
document.getElementsByTagName
document.getElementsByName
document.getElementsByClassName
document.querySelector和document.querySelectorAll:通过css选择器来查找元素,注意选择器要符合CSS选择器的规则,使用的深度优先搜索来获取元素
节点关系型api
1.父关系型api
- parentNode:Element的父节点可能是Element,Document或DocumentFragment。
- parentElement:与parentNode的区别在于,其父节点必须是一个Element,如果不是,则返回null
2.兄弟关系型api
- previousSibling:节点的前一个节点,如果该节点是第一个节点,则为null。注意有可能拿到的节点是文本节点或注释节点,与预期的不符,要进行处理一下。
- previousElementSibling:返回前一个元素节点,前一个节点必须是Element,注意IE9以下浏览器不支持。
- nextSibling:节点的后一个节点,如果该节点是最后一个节点,则为null。注意有可能拿到的节点是文本节点,与预期的不符,要进行处理一下。
- nextElementSibling:返回后一个元素节点,后一个节点必须是Element,注意IE9以下浏览器不支持。
3.子关系型api
- childNodes:返回一个即时的NodeList,表示元素的子节点列表,子节点可能会包含文本节点,注释节点等。
- children:一个即时的HTMLCollection,子节点都是Element,IE9以下浏览器不支持。
- firstNode:第一个子节点
- lastNode:最后一个子节点
- hasChildNodes方法:可以用来判断是否包含子节点。
元素属性型api
setAttribute:根据名称和值修改元素的特性eg:element.setAttribute(name, value);
getAttribute返回指定的特性名相应的特性值,如果不存在,则返回null或空字符串.
元素样式型api
window.getComputedStyle
是用来获取应用到元素后的样式,假设某个元素并未设置高度而是通过其内容将其高度撑开,这时候要获取它的高度就要用到getComputedStyle
,用法如下:
var style = window.getComputedStyle(element[, pseudoElt]);
element是要获取的元素,pseudoElt指定一个伪元素进行匹配。
返回的style是一个CSSStyleDeclaration对象。
通过style可以访问到元素计算后的样式
getBoundingClientRect
getBoundingClientRect用来返回元素的大小以及相对于浏览器可视窗口的位置,用法如下:
var clientRect = element.getBoundingClientRect();
clientRect是一个DOMRect对象,包含left,top,right,bottom,它是相对于可视窗口的距离,滚动位置发生改变时,它们的值是会发生变化的。除了IE9以下浏览器,还包含元素的height和width等数据,具体可查看链接