【JavaScript】常见DOM操作整理

1、访问节点
document.getElementById(id);
document.getElementsByName(name);
document.getElementsByTagName(tagName);
document.getElementsByClassName(className);
document.querySelector(query); // 找到的第一个符合条件的节点
document.querySelectorAll(query); //所有符合条件的节点

2、查找节点
parentNode.firstChild
parentNode.lastChild
parentNode.childNodes
node.parentNode // 父节点
node.nextSibling // 下一个兄弟节点
node.previousSibling // 前一个兄弟节点

3、生成节点
document.createElement(elementName);
document.createAttribute(attrName); // 创建属性节点
document.createTextNode(test); // 创建文本节点
document.createComment(comment); // 创建注释节点

4、添加节点
parent.appendChild( element/txt/comment/fragment );
parent.insertBefore( newChild, existingChild );
element.setAttributeNode( attrNodeName );
element.setAttribute( attributeName, attributeValue );

5、删除节点
parentNode.removeChild( existingChild );
element.removeAttribute(attrName);
element.removeAttributeNode( attrNode );

6、修改节点
parentNode.replaceChild( newChild, existingChild );
element.setAttributeNode( attributeName );
element.setAttribute( attributeName, attributeValue );