DOM常用操作

查找节点

// 返回拥有指定id的第一个对象的引用
document.getElementById('id属性值');

//返回拥有指定class的对象集合
document/element.getElementsByClassName('class属性值');

//返回拥有指定标签名的对象集合
document/element.getElementsByTagName('标签名');

//返回拥有指定名称的对象结合
document.getElementsByName('name属性值');

//仅返回第一个匹配的元素
document/element.querySelector('CSS选择器');

//返回所有匹配的元素
document/element.querySelectorAll('CSS选择器');

//获取页面中的HTML标签
document.documentElement

//获取页面中的BODY标签
document.body

创建节点

// 创建新的元素节点
document.createElement('元素名');

//创建新的属性节点
document.createAttribute('属性名');

//创建新的文本节点
document.createTextNode('文本内容');

//创建新的注释节点
document.createComment('注释节点');

//创建文档片段节点
document.createDocumentFragment( );

添加新节点

//向父节点的最后一个子节点后追加新节点
parent.appendChild( element/txt/comment/fragment );

//向父节点的某个特定子节点之前插入新节点
parent.insertBefore( newChild, existingChild );

//给元素增加属性节点
element.setAttributeNode( attributeName );

//给元素增加指定属性，并设定属性值
element.setAttribute( attributeName, attributeValue );

删除节点

// 删除已有的子节点，返回值为删除节点
parentNode.removeChild( existingChild );

// 删除具有指定属性名称的属性，无返回值
element.removeAttribute('属性名');

// 删除指定属性，返回值为删除的属性 
element.removeAttributeNode( attrNode );

修改节点

// 用新节点替换父节点中已有的子节点
parentNode.replaceChild( newChild, existingChild );

//若原元素已有该节点，此操作能达到修改该属性值的目的
element.setAttributeNode( attributeName );	

//若原元素已有该节点，此操作能达到修改该属性值的目的
element.setAttribute( attributeName, attributeValue );