DOM
DOM是JavaScript操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个JavaScript对象，从而可以用脚本进行各种操作（比如增删内容）。
节点
DOM的最小组成单位叫做节点（node）。文档的树形结构（DOM树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。
增
| 方法 |
说明 |
| document.createElement(x) |
创建元素 |
| document.createAttribute(x) |
创建属性节点 |
| document.createTextNode(x) |
创建文本节点 |
| parent.appendChild(x) |
向节点添加最后一个子节点。 |
| parent.insertBefore(new,old) |
在指定的已有子节点之前插入新的子节点。 |
| ele.classList.add(x) |
为元素添加 class |
删
| 方法 |
说明 |
| ele.remove() |
删除某个元素 |
| ele.removeChild(x) |
删除某个元素的子节点 |
| ele.removeAttribute(attr) |
删除某个元素的属性 |
| ele.style.removeProperty(attr) |
删除某个元素的属性 |
| ele.classList.remove(x) |
为元素删除class |
改
| 方法 |
说明 |
| ele.innerHTML |
设置或获取某个元素内的内容 包括html标签 |
| ele.outerHTML |
设置或获取某个元素内的内容 还包含标签本身 |
| ele.innerText |
设置或获取某个元素内的文本 Firefox不支持 |
| ele.textContent |
设置或获取某个元素内的文本 |
| ele.setAttribute(name,value) |
设置或修改某个元素的属性 |
| ele.style.property |
设置或修改某个元素的样式 |
| ele.nodeValue |
设置或获取属性节点和文本节点的值 |
| parent.replaceChild(new, old) |
替换某个元素的子节点 |
查
| 方法 |
说明 |
| document.getElementById(x) |
获取指定 ID 的元素 |
| document.getElementsByTagName(x) |
获取指定标签名的对象的集合 |
| document.getElementsByClassName(x) |
获取所有指定类名的元素集合 |
| document.querySelector(x) |
获取匹配指定选择器的第一个元素 |
| document.querySelectorAll(x) |
获取匹配指定选择器的元素集合 |
| ele.getAttribute(x) |
获取某个元素属性的值 |
| node.parentNode() |
获取指定节点的父节点 |
| node.childNodes() |
获取指定节点的子节点集合 |
| node.firstNode() |
获取某个节点的首个子节点 |
| node.lastNode() |
获取某个节点的最后一个子节点 |
