携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第14天，点击查看活动详情
2、具体概念
①各个组成部分的类型
整个文档中的一切都可以看做Node。各个具体组成部分的具体类型可以看做Node类型的子类。
其实严格来说，JavaScript并不支持真正意义上的『继承』，这里我们借用Java中的『继承』概念，从逻辑上来帮助我们理解各个类型之间的关系。
| 组成部分 | 节点类型 | 具体类型 |
|---|
| 整个文档 | 文档节点 | Document |
| HTML标签 | 元素节点 | Element |
| HTML标签内的文本 | 文本节点 | Text |
| HTML标签内的属性 | 属性节点 | Attr |
| 注释 | 注释节点 | Comment |
②父子关系
③先辈后代关系
3、DOM操作
由于实际开发时基本上都是使用JavaScript的各种框架来操作，而框架中的操作方式和我们现在看到的原生操作完全不同，所以下面罗列的API仅供参考，不做要求。
①在整个文档范围内查询元素节点
| 功能 | API | 返回值 |
|---|
| 根据id值查询 | document.getElementById(“id值”) | 一个具体的元素节 |
| 根据标签名查询 | document.getElementsByTagName(“标签名”) | 元素节点数组 |
| 根据name属性值查询 | document.getElementsByName(“name值”) | 元素节点数组 |
②在具体元素节点范围内查找子节点
| 功能 | API | 返回值 |
|---|
| 查找全部子节点 | element.childNodes 【W3C考虑换行，IE≤8不考虑】 | 节点数组 |
| 查找第一个子节点 | element.firstChild 【W3C考虑换行，IE≤8不考虑】 | 节点对象 |
| 查找最后一个子节点 | element.lastChild 【W3C考虑换行，IE≤8不考虑】 | 节点对象 |
③查找指定元素节点的父节点
| 功能 | API | 返回值 |
|---|
| 查找指定元素节点的父节点 | element.parentNode | 节点对象 |
④查找指定元素节点的兄弟节点
| 功能 | API | 返回值 |
|---|
| 查找前一个兄弟节点 | node.previousSibling 【W3C考虑换行，IE≤8不考虑】 | 节点对象 |
| 查找后一个兄弟节点 | node.nextSibling 【W3C考虑换行，IE≤8不考虑】 | 节点对象 |
⑤属性操作
| 需求 | 操作方式 |
|---|
| 读取属性值 | 元素对象.属性名 |
| 修改属性值 | 元素对象.属性名=新的属性值 |
⑥文本操作
| 需求 | 操作方式 |
|---|
| 读取文本值 | element.firstChild.nodeValue |
| 修改文本值 | element.firstChild.nodeValue=新文本值 |
⑦DOM增删改操作
| API | 功能 |
|---|
| document.createElement(“标签名”) | 创建元素节点并返回，但不会自动添加到文档中 |
| document.createTextNode(“文本值”) | 创建文本节点并返回，但不会自动添加到文档中 |
| element.appendChild(ele) | 将ele添加到element所有子节点后面 |
| parentEle.insertBefore(newEle,targetEle) | 将newEle插入到targetEle前面 |
| parentEle.replaceChild(newEle, oldEle) | 用新节点替换原有的旧子节点 |
| parentEle.removeChild(childNode) | 删除指定的子节点 |
| element.innerHTML | 读写HTML代码 |
