什么是 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（文档对象模型）
当网页加载时，浏览器会创建页面的 Document Object Model。
HTML DOM 模型被构建为 对象 树
HTML DOM 对象树
查找 HTML 元素
当您想使用 JavaScript 访问 HTML 元素时，您必须首先找到这些元素。
有几种方法可以做到这一点
- 按 ID 查找 HTML 元素
- 按标签名查找 HTML 元素
- 按类名查找 HTML 元素
- 按 CSS 选择器查找 HTML 元素
- 按 HTML 对象集合查找 HTML 元素
按 ID 查找 HTML 元素
在 DOM 中查找 HTML 元素的最简单方法是使用元素 ID。
此示例查找 ID 为“intro”的元素
如果找到元素，该方法将返回该元素作为对象（在 myElement 中）。
如果未找到该元素，myElement 将包含 null。
按标签名查找 HTML 元素
此示例查找所有 <p> 元素
此示例查找 ID 为“main”的元素，然后查找“main”内部的所有 <p> 元素
按类名查找 HTML 元素
如果您想查找所有具有相同类名的 HTML 元素，请使用 getElementsByClassName()。
此示例返回所有具有类“intro”的元素列表。
在 Internet Explorer 8 及更早版本中，按类名查找元素不起作用。
按 CSS 选择器查找 HTML 元素
如果您想查找与指定 CSS 选择器匹配的所有 HTML 元素（ID、类名、类型、属性、属性值等），请使用 querySelectorAll() 方法。
此示例返回所有具有类“intro”的 <p> 元素列表。
querySelectorAll() 方法在 Internet Explorer 8 及更早版本中不起作用。
按 HTML 对象集合查找 HTML 元素
HTML 对象集合也可以访问
HTML DOM 教程
完整的 HTMLDOM 教程
这只是一个关于 HTMLDOM 的简短介绍。
有关完整的 HTMLDOM 教程，请访问 W3Schools HTMLDOM 教程。
