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、

原文地址:https://www.cnblogs.com/1500418882qqcom/p/9993771.html