DOM常用API

Node类型

NODE.ELEMENT_NODE:1

NODE.ATTRIBUTE_NODE:2

NODE.TEXT_NODE:3

NODE.COMMENT_NODE:8

NODE.DOCUMENT_NODE:9

NODE.DOCUMENT_FRAGMENT_NODE:11

Element类型

1.nodeType为 1

2.nodeName为元素标签名,tagName也是返回标签名

3.nodeValue为null

Attr类型

1.nodeType为2

2.nodeName也是特性的名称

3.nodeValue是特性的值

Text类型

1.nodeType为3

2.nodeName为#text,

3.nodeValue为文本内容

Comment类型

1.nodeType为8

2.nodeName为#comment

3.nodeValue为注释的内容

Document类型

1.nodeType为9

2.nodeName为#document

3.nodeValue为null

DocumentFragment

1.nodeType为11

2.nodeName为#document-fragment

3.nodeValue为null

节点创建型API

createElement    通过传入指定的标签创建一个元素

createTextNode  创建一个文本节点

cloneNode 复制一节点，接受一个bool参数，表示是否复制子元素

var parent = document.getElementById("parentElement"); 
var parent2 = parent.cloneNode(true);// 传入true
parent2.id = "parent2";
document.body.appendChild( parent2 );

creatDocumentFragment  用于添加大量节点到文档中时使用。

document.getElementById("btnAdd").onclick = function(){
    var list = document.getElementById("list");    
    var fragment = document.createDocumentFragment();
 
    for(var i = 0;i ){
      var li = document.createElement("li");
        li.textContent = i;
        fragment.appendChild(li);
    }
 
    list.appendChild(fragment);
}

页面修改型API

appendChild 添加子节点

insertBefore 添加一个节点到一个参照物之前 parent.insertBefore(newNode，refNode)

removeChild 添加一个子节点

replaceChild 代替一个子节点

页面修改型API总结


页面修改型api主要是这四个接口，要注意几个特点：
（1）不管是新增还是替换节点，如果新增或替换的节点是原本存在页面上的，则其原来位置的节点将被移除，也就是说同一个节点不能存在于页面的多个位置
（2）节点本身绑定的事件会不会消失，会一直保留着

节点查询型API

document.getElementById() 通过ID查找元素

document.getElementsByTagName 通过元素标签查找元素

document.querySelector和document.querySelectorAll

关系型API

parentNode

parentElement

previousSibling

previousElementSibling

nextSibling

nextElementSibling

childNodes

children

firstNode

lastNode

hasChildNodes

元素属性型API

setAttribute

getAttribute

元素样式型API

window.getComputedStyle( element[pseudoElt]) element是要获取的元素，pseudoElt指定一个伪元素进行匹配

getBoundingClientRect 获取元素的大小及相对于浏览器可视窗口的位置