DOM节点操作

1、获取节点

document.getElementById('id属性值');	返回拥有指定id的第一个对象的引用
document.getElementsByClassName('class属性值');	返回拥有指定class的对象集合
documentt.getElementsByTagName('标签名');	返回拥有指定标签名的对象集合
document.getElementsByName('name属性值');	返回拥有指定名称的对象结合
document.querySelector('CSS选择器');	仅返回第一个匹配的元素
document.querySelectorAll('CSS选择器');	返回所有匹配的元素
document.documentElement	获取页面中的HTML标签
document.body	获取页面中的BODY标签
document.all['']	获取页面中的所有元素节点的对象集合型

2、获取当前元素同级元素

element.nextSibling	返回当前元素的下一个同级元素 没有就返回null
element.previousSibling	返回当前元素上一个同级元素 没有就返回null

 

3、获取当前元素的子节点

element.chlidren	返回当前元素所有子元素节点对象，只返回HTML节点
element.chilidNodes	返回当前元素多有子节点，包括文本，HTML，属性节点。（回车也会当做一个节点）
element.firstChild	返回当前元素的第一个子节点对象
element.lastChild	返回当前元素的最后一个子节点对象

 

 

4、新建节点

document.createElement('元素名');	创建新的元素节点
document.createAttribute('属性名');	创建新的属性节点
document.createTextNode('文本内容');	创建新的文本节点
document.createComment('注释节点');	创建新的注释节点
document.createDocumentFragment( );	创建文档片段节点

 

 

 

 

 

 

 

 

 

5、添加新节点

parent.appendChild( element/txt/comment/fragment );	向父节点的最后一个子节点后追加新节点
parent.insertBefore( newChild, existingChild );	向父节点的某个特定子节点之前插入新节点
element.setAttributeNode( attributeName );	给元素增加属性节点
element.setAttribute( attributeName, attributeValue );	给元素增加指定属性，并设定属性值

 

 

 

 

 

 

 

5、