什么是 HTML DOM？
HTML DOM 是 HTML 的一个对象模型。它定义了
- HTML 元素是对象
- 所有 HTML 元素的属性
- 所有 HTML 元素的方法
- 所有 HTML 元素的事件
HTML DOM 是 JavaScript 的一个API（编程接口）
- JavaScript 可以添加/更改/移除 HTML 元素
- JavaScript 可以添加/更改/移除 HTML 属性
- JavaScript 可以添加/更改/移除 CSS 样式
- JavaScript 可以响应 HTML 事件
- JavaScript 可以添加/更改/移除 HTML 事件
HTML DOM (文档对象模型)
当一个网页加载时，浏览器会创建一个页面的文档对象模型 (DOM)。
HTML DOM 模型构建为一个对象树
HTML DOM 对象树
查找 HTML 元素
当您想使用 JavaScript 访问 HTML 元素时，您必须先找到这些元素。
有几种方法可以做到这一点
- 按 ID 查找 HTML 元素
- 按标签名查找 HTML 元素
- 按类名查找 HTML 元素
- 按 CSS 选择器查找 HTML 元素
- 按 HTML 对象集合查找
按 Id 查找 HTML 元素
在 DOM 中查找 HTML 元素的 easiest 方法是使用元素的 ID。
此示例查找 ID 为 "intro" 的元素
如果找到该元素，该方法将返回该元素作为对象（在 myElement 中）。
如果未找到该元素，myElement 将包含 null。
按标签名查找 HTML 元素
此示例查找所有 <p> 元素
此示例查找 ID 为 "main" 的元素，然后查找 "main" 中所有的 <p> 元素
按类名查找 HTML 元素
如果您想查找所有具有相同类名的 HTML 元素，请使用 getElementsByClassName()。
此示例返回所有类名为 "intro" 的元素的列表。
在 Internet Explorer 8 及更早版本中，按类名查找不起作用。
按 CSS 选择器查找 HTML 元素
如果您想查找所有与指定 CSS 选择器（ID、类名、类型、属性、属性值等）匹配的 HTML 元素，请使用 querySelectorAll() 方法。
此示例返回所有类名为 "intro" 的 <p> 元素的列表。
querySelectorAll() 方法在 Internet Explorer 8 及更早版本中不起作用。
通过 HTML 对象集合查找 HTML 元素
HTML 对象集合也同样可以访问
HTML DOM 教程
完整 HTML DOM 教程
这是一个简短的 HTML DOM 入门介绍。
如需完整的 HTML DOM 教程，请访问 W3Schools HTML DOM 教程。
