DOM基本操作

一、对节点(Node)的增删改查

• 查

方法类
document.getElementById( );
docuemnt.getElementsByTagName( );
document.getElementsByName( );
docuemnt.getElementsByClassName( );
document.querySelector( );    //query系列是副本，不会实时变动
document.querySelectorAll( );

　　

非方法类

(1)遍历(NODE)节点树(兼容性好，文本节点和注释节点也算)
parentNode
childNodes
firstChild
lastChild
nextSibling
previousSibling

(2)遍历（Elements）元素节点树
parentElement
children //这个兼容性最好，其他ie9及以下都不兼容
firstElementChild
lastElementChild
nextElementSibling
previousElementSibling

　　

节点的属性
nodeName
nodeValue
nodeType 
attributes

//nodeType返回的值
//元素节点 1
//属性节点 2
//文本节点 3
//注释节点 8
//document 9
//DocumentFragment 11

查看一个节点上有没有子节点的方法 NODE.hasChildNodes()　　

• 增

document.createElement();
document.createTextNode();
document.createComment();
document.createDocumentFragment();

• 插

PARENTNODE.appendChild( );//可理解成数组的push方法
PARENTNODE.insertBefore(a, b);//在PARENTNODE上插入a，在b之前

• 删

PARENTNODE.removeChild(); //谋杀，只是被剪切出来了，没有完全销毁
CHILD.remove();//自杀，自我销毁，彻底被删除

 

• 替换

PARENT.replace(new, origin);  //用新的new去置换旧origin

　　

Element节点的属性

innerHTML 可取，可写，可赋值
innerText 可取，可赋值（textContent 火狐专用）

 

Element节点的方法

ele.setAttribute("class", "demo");
ele.getAttribute("style");