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() | 获取某个节点的最后一个子节点 |
网友评论