DOM 节点
| 节点(Node) | 释义 | 对象 |
| 文档节点 | 整个文档 | Document 对象 |
| 元素节点 | 每个HTML元素 | Eelement 对象 |
| 文本节点 | HTML元素内的文本 | Text 对象 |
| 属性节点 | 每个HTML的属性 | Attribute 对象 |
| 注释节点 | 文档的注释内容 | Comment 对象 |
Attributes属性节点
| 属性 | 释义 |
| nodeType | 节点类型 |
| nodeValue | 节点值 |
| nodeName | 节点名称 |
| innerHTML | 节点(元素)的文本值 |
导航属性
| 属性 | 释义 |
| parentNode | 节点(元素)的父节点 |
| firstChild | 节点下第一个子元素 |
| lastChild | 节点下最后一个子元素 |
| childNodes | 节点(元素)的子节点 |
Node标签的增删改查
方法
| 方法 | 描述 |
| createElement(name) | 创建元素 |
| appendChild() | 添加元素 |
| removeChild() | 删除元素 |
添加标签节点(createElement)和删除节点标签(removeChild)都是在父级节点上操作的
综合示例
Node样式的增删改查
方法
| 方法 | 描述 |
| [ele].classList.add() | 添加样式 |
| [ele].classList.remove() | 删除样式 |
| [ele].style.[ClassName] | 修改样式 |
添加标签节点(classList.add)和删除节点标签(classList.remove)都是在当前节点上操作的
综合示例
选项选择
二级联动
