DOM 操作 API

JavaScript 常见原生 DOM 操作 API 总结

节点查找 API

方法 示例 描述
querySelector var el = document.querySelector(".myclass"); 返回第一个匹配 selector 的元素
querySelectorAll var matches = document.querySelectorAll("p"); 返回一个匹配的 NodeList 数组
getElementById var elem = document.getElementById('para'); 返回匹配 IDElement
getElementsByClassName document.getElementsByClassName('red test') 返回匹配 class 的一个 array-like 的元素数组
getElementsByTagName var allParas = document.getElementsByTagName('p'); 返回指定 TagHTMLCollection
getElementsByName var up_names = document.getElementsByName("up"); 返回一个匹配元素 name 属性的 NodeList

创建节点 API

方法 示例 描述
createElement const newDiv = document.createElement("div"); 创建一个新的元素
createTextNode var newtext = document.createTextNode("hello") 创建一个新的文本节点
createDocumentFragment var fragment = document.createDocumentFragment(); 创建文档片段

修改节点 API

方法 描述
appendChild 添加一个新的节点到这个节点的孩子列表的末尾
insertBefore 在指定节点之前添加一个节点
removeChild 移除某个孩子节点
replaceChild 替换某个孩子节点

父子/兄弟节点 API

方法 描述
Node.parentNode 返回父节点
ParentNode.children 返回孩子节点的 HTMLCollection
Node.firstChild 第一个孩子
Node.lastChild 最后一个孩子
Node.nextSibling 节点的下一个节点
Node.previousSibling 节点的上一个节点

属性 API

方法 描述
Element.setAttribute(name, value) 设置元素属性
Element.getAttribute(name) 获取元素属性

参考