JavaScript 常见原生 DOM 操作 API 总结
节点查找 API
| 方法 | 示例 | 描述 |
|---|---|---|
| querySelector | var el = document.querySelector(".myclass"); |
返回第一个匹配 selector 的元素 |
| querySelectorAll | var matches = document.querySelectorAll("p"); |
返回一个匹配的 NodeList 数组 |
| getElementById | var elem = document.getElementById('para'); |
返回匹配 ID 的 Element |
| getElementsByClassName | document.getElementsByClassName('red test') |
返回匹配 class 的一个 array-like 的元素数组 |
| getElementsByTagName | var allParas = document.getElementsByTagName('p'); |
返回指定 Tag 的 HTMLCollection |
| 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) | 获取元素属性 |