JS（DOM对象）
1. DOM 概述
定义：文档对象模型，HTML/XML文档的编程接口
作用：提供访问和操作网页内容、结构和样式的方法
结构：树形结构（节点树）
2. DOM 节点类型
| 节点类型 | nodeType | nodeName | nodeValue |
|---|---|---|---|
| 文档节点 | 9 | #document | null |
| 元素节点 | 1 | 标签名 | null |
| 属性节点 | 2 | 属性名 | 属性值 |
| 文本节点 | 3 | #text | 文本内容 |
| 注释节点 | 8 | #comment | 注释内容 |
3. 获取节点对象的方法
| 方法 | 描述 | 返回值 |
|---|---|---|
getElementById() | 通过ID获取 | 单个元素 |
getElementsByTagName() | 通过标签名获取 | 元素集合 |
getElementsByClassName() | 通过类名获取 | 元素集合 |
getElementsByName() | 通过name属性获取 | 元素集合 |
querySelector() | CSS选择器获取第一个 | 单个元素 |
querySelectorAll() | CSS选择器获取所有 | 元素集合 |
4. 节点关系属性
| 属性 | 描述 |
|---|---|
parentNode | 父节点 |
childNodes | 所有子节点（包含文本节点） |
children | 所有子元素（不包含文本节点） |
firstChild / lastChild | 第一个/最后一个子节点 |
firstElementChild / lastElementChild | 第一个/最后一个子元素 |
previousSibling / nextSibling | 前一个/后一个兄弟节点 |
previousElementSibling / nextElementSibling | 前一个/后一个兄弟元素 |
5. 操作节点属性
| 方法 | 描述 |
|---|---|
getAttribute(name) | 获取属性值 |
setAttribute(name, value) | 设置属性值 |
removeAttribute(name) | 删除属性 |
hasAttribute(name) | 检查是否存在属性 |
element.dataset.* | 访问data-*属性 |
6. 操作节点内容
| 属性 | 描述 |
|---|---|
innerHTML | 获取/设置元素的HTML内容 |
textContent | 获取/设置元素的文本内容 |
innerText | 获取/设置元素的可见文本内容 |
value | 获取/设置表单元素的值 |
7. 节点操作
| 方法 | 描述 |
|---|---|
createElement(tagName) | 创建新元素 |
createTextNode(text) | 创建文本节点 |
appendChild(node) | 添加子节点 |
removeChild(node) | 删除子节点 |
replaceChild(newNode, oldNode) | 替换子节点 |
insertBefore(newNode, referenceNode) | 在指定节点前插入 |
cloneNode(deep) | 克隆节点 |
8. 样式操作
| 方法 | 描述 |
|---|---|
element.style.property | 操作内联样式 |
classList.add() / classList.remove() | 添加/删除类 |
classList.toggle() | 切换类 |
classList.contains() | 检查是否包含类 |
9. 元素尺寸和位置
| 属性 | 描述 |
|---|---|
offsetWidth / offsetHeight | 元素宽度/高度（包含边框和内边距） |
clientWidth / clientHeight | 元素宽度/高度（不包含边框） |
offsetTop / offsetLeft | 相对于offsetParent的顶部/左侧位置 |
scrollTop / scrollLeft | 元素滚动的位置 |
10. 常用文档属性
| 属性 | 描述 |
|---|---|
document.documentElement | <html>元素 |
document.head | <head>元素 |
document.body | <body>元素 |
document.title | 文档标题 |
document.forms | 所有表单集合 |
document.images | 所有图片集合 |
document.links | 所有链接集合 |