本文概述了HTMLDOM树的作用，介绍了如何通过编程接口操作HTML元素、属性、事件，以及关键方法如getElementById、innerHTML和DOM编程。涵盖了事件处理、约束验证、节点关系和常用技术如addEventListener和removeEventListener。
一、对象的 HTML DOM 树
通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：
- JavaScript 能改变页面中的所有 HTML 元素
- JavaScript 能改变页面中的所有 HTML 属性
- JavaScript 能改变页面中的所有 CSS 样式
- JavaScript 能删除已有的 HTML 元素和属性
- JavaScript 能添加新的 HTML 元素和属性
- JavaScript 能对页面中所有已有的 HTML 事件作出反应
- JavaScript 能在页面中创建新的 HTML 事件
W3C DOM 标准被分为 3 个不同的部分：
- Core DOM - 所有文档类型的标准模型
- XML DOM - XML 文档的标准模型
- HTML DOM - HTML 文档的标准模型
HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：
- 作为对象的 HTML 元素
- 所有 HTML 元素的属性
- 访问所有 HTML 元素的方法
- 所有 HTML 元素的事件
换言之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。
二、DOM 编程界面
HTML DOM 能够通过 JavaScript 进行访问（也可以通过其他编程语言）。
在 DOM 中，所有 HTML 元素都被定义为对象。
编程界面是每个对象的属性和方法。
属性是您能够获取或设置的值（就比如改变 HTML 元素的内容）。
方法是您能够完成的动作（比如添加或删除 HTML 元素）。
三、getElementById 方法
访问 HTML 元素最常用的方法是使用元素的 id。
四、innerHTML 属性
获取元素内容最简单的方法是使用 innerHTML 属性。
innerHTML 属性可用于获取或替换 HTML 元素的内容。
innerHTML 属性可用于获取或改变任何 HTML 元素，包括 <html> 和 <body>。
五、innerHTML 属性
获取元素内容最简单的方法是使用 innerHTML 属性。
innerHTML 属性可用于获取或替换 HTML 元素的内容。
innerHTML 属性可用于获取或改变任何 HTML 元素，包括 <html> 和 <body>。
六、HTML DOM Document 对象
文档对象代表您的网页。
如果您希望访问 HTML 页面中的任何元素，那么您总是从访问 document 对象开始。
七、查找 HTML 元素
| 方法 | 描述 |
|---|---|
| document.getElementById(id) | 通过元素 id 来查找元素 |
| document.getElementsByTagName(name) | 通过标签名来查找元素 |
| document.getElementsByClassName(name) | 通过类名来查找元素 |
八、改变 HTML 元素
| 方法 | 描述 |
|---|---|
| element.innerHTML = new html content | 改变元素的 inner HTML |
| element.attribute = new value | 改变 HTML 元素的属性值 |
| element.setAttribute(attribute, value) | 改变 HTML 元素的属性值 |
| element.style.property = new style | 改变 HTML 元素的样式 |
九、添加和删除元素
| 方法 | 描述 |
|---|---|
| document.createElement(element) | 创建 HTML 元素 |
| document.removeChild(element) | 删除 HTML 元素 |
| document.appendChild(element) | 添加 HTML 元素 |
| document.replaceChild(element) | 替换 HTML 元素 |
| document.write(text) | 写入 HTML 输出流 |
十一、添加事件处理程序
| 方法 | 描述 |
|---|---|
| document.getElementById(id).onclick = function(){code} | 向 onclick 事件添加事件处理程序 |
十二、查找 HTML 对象
首个 HTML DOM Level 1 (1998)，定义了 11 个 HTML 对象、对象集合和属性。它们在 HTML5 中仍然有效。
后来，在 HTML DOM Level 3，加入了更多对象、集合和属性。
| 属性 | 描述 | DOM |
|---|---|---|
| document.anchors | 返回拥有 name 属性的所有 <a> 元素。 | 1 |
| document.applets | 返回所有 <applet> 元素（HTML5 不建议使用） | 1 |
| document.baseURI | 返回文档的绝对基准 URI | 3 |
| document.body | 返回 <body> 元素 | 1 |
| document.cookie | 返回文档的 cookie | 1 |
| document.doctype | 返回文档的 doctype | 3 |
| document.documentElement | 返回 <html> 元素 | 3 |
| document.documentMode | 返回浏览器使用的模式 | 3 |
| document.documentURI | 返回文档的 URI | 3 |
| document.domain | 返回文档服务器的域名 | 1 |
| document.domConfig | 废弃。返回 DOM 配置 | 3 |
| document.embeds | 返回所有 <embed> 元素 | 3 |
| document.forms | 返回所有 <form> 元素 | 1 |
| document.head | 返回 <head> 元素 | 3 |
| document.images | 返回所有 <img> 元素 | 1 |
| document.implementation | 返回 DOM 实现 | 3 |
| document.inputEncoding | 返回文档的编码（字符集） | 3 |
| document.lastModified | 返回文档更新的日期和时间 | 3 |
| document.links | 返回拥有 href 属性的所有 <area> 和 <a> 元素 | 1 |
| document.readyState | 返回文档的（加载）状态 | 3 |
| document.referrer | 返回引用的 URI（链接文档） | 1 |
| document.scripts | 返回所有 <script> 元素 | 3 |
| document.strictErrorChecking | 返回是否强制执行错误检查 | 3 |
| document.title | 返回 <title> 元素 | 1 |
| document.URL | 返回文档的完整 URL | 1 |
千万不要在文档加载后使用 document.write()。这么做会覆盖文档。
十三、查找 HTML 元素
通常，通过 JavaScript，您需要操作 HTML 元素。
为了达成此目的，您需要首先找到这些元素。有好几种完成此任务的方法：
- 通过 id 查找 HTML 元素
- 通过标签名查找 HTML 元素
- 通过类名查找 HTML 元素
- 通过 CSS 选择器查找 HTML 元素
- 通过 HTML 对象集合查找 HTML 元素
十四、HTML 约束验证
HTML5 引入了一种新的 HTML 验证概念，称为约束验证。
HTML 约束验证基于：
- 约束验证 HTML input 属性
- 约束验证 CSS 伪选择器
- 约束验证 DOM 属性和方法
十五、约束验证 HTML input 属性
| 属性 | 描述 |
|---|---|
| disabled | 规定应禁用 input 元素。 |
| max | 规定 input 元素的最大值。 |
| min | 规定 input 元素的最小值。 |
| pattern | 规定 input 元素的值模式。 |
| required | 规定 input 字段必填。 |
| type | 规定 input 元素的类型。 |
十六、约束验证 CSS 伪选择器
| 选择器 | 描述 |
|---|---|
| :disabled | 选择规定了 "disabled" 属性的 input 元素。 |
| :invalid | 选择有无效值的 input 元素。 |
| :optional | 选择未规定 "required" 属性的 input 元素。 |
| :required | 选择规定了 "required" 属性的 input 元素。 |
| :valid | 选择具有有效值的 input 元素。 |
十七、使用事件
HTML DOM 允许您在事件发生时执行代码。
当“某些事情”在 HTML 元素上发生时，浏览器会生成事件：
- 点击某个元素时
- 页面加载时
- 输入字段被更改时
十八、对事件作出反应
JavaScript 能够在事件发生时执行，比如当用户点击某个 HTML 元素时。
HTML 事件的例子：
- 当用户点击鼠标时
- 当网页加载后
- 当图像加载后
- 当鼠标移至元素上时
- 当输入字段被改变时
- 当 HTML 表单被提交时
- 当用户敲击按键时
十九、 addEventListener() 方法
addEventListener() 方法为指定元素指定事件处理程序。
addEventListener() 方法为元素附加事件处理程序而不会覆盖已有的事件处理程序。
您能够向一个元素添加多个事件处理程序。
您能够向一个元素添加多个相同类型的事件处理程序，例如两个 "click" 事件。
您能够向任何 DOM 对象添加事件处理程序而非仅仅 HTML 元素，例如 window 对象。
addEventListener() 方法使我们更容易控制事件如何对冒泡作出反应。
当使用 addEventListener() 方法时，JavaScript 与 HTML 标记是分隔的，已达到更佳的可读性；即使在不控制 HTML 标记时也允许您添加事件监听器。
您能够通过使用 removeEventListener() 方法轻松地删除事件监听器。
语法
element.addEventListener(event, function, useCapture);
第一个参数是事件的类型（比如 "click" 或 "mousedown"）。
第二个参数是当事件发生时我们需要调用的函数。
第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。
注意：请勿对事件使用 "on" 前缀；请使用 "click" 代替 "onclick"。
二十、向 Window 对象添加事件处理程序
addEventListener() 允许您将事件监听器添加到任何 HTML DOM 对象上，比如 HTML 元素、HTML 对象、window 对象或其他支持事件的对象，比如 xmlHttpRequest 对象。
二十一、事件冒泡还是事件捕获
在 HTML DOM 中有两种事件传播的方法：冒泡和捕获。
事件传播是一种定义当发生事件时元素次序的方法。假如 <div> 元素内有一个 <p>，然后用户点击了这个 <p> 元素，应该首先处理哪个元素“click”事件？
在冒泡中，最内侧元素的事件会首先被处理，然后是更外侧的：首先处理 <p> 元素的点击事件，然后是 <div> 元素的点击事件。
在捕获中，最外侧元素的事件会首先被处理，然后是更内侧的：首先处理 <div> 元素的点击事件，然后是 <p> 元素的点击事件。
在 addEventListener() 方法中，你能够通过使用“useCapture”参数来规定传播类型：
addEventListener(event, function, useCapture);
默认值是 false，将使用冒泡传播，如果该值设置为 true，则事件使用捕获传播。
二十二、removeEventListener() 方法
removeEventListener() 方法会删除已通过 addEventListener() 方法附加的事件处理程序
二十三、DOM 节点
根据 W3C HTML DOM 标准，HTML 文档中的所有事物都是节点：
- 整个文档是文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 所有注释是注释节点
二十四、节点关系
节点树中的节点彼此之间有一定的等级关系。
- 术语（父、子和同胞，parent、child 以及 sibling）用于描述这些关系。
- 在节点树中，顶端节点被称为根（根节点）。
- 每个节点都有父节点，除了根（根节点没有父节点）。
- 节点能够拥有一定数量的子
- 同胞（兄弟或姐妹）指的是拥有相同父的节点。
二十五、在节点之间导航
通过 JavaScript，您可以使用以下节点属性在节点之间导航：
- parentNode
- childNodes[nodenumber]
- firstChild
- lastChild
- nextSibling
- previousSibling
二十六、nodeValue 属性
nodeValue 属性规定节点的值。
- 元素节点的 nodeValue 是 undefined
- 文本节点的 nodeValue 是文本文本
- 属性节点的 nodeValue 是属性值
二十七、nodeType 属性
nodeType 属性返回节点的类型。nodeType 是只读的。
重要的 nodeType 属性是：
| 节点 | 类型 |
|---|---|
| ELEMENT_NODE | 1 |
| ATTRIBUTE_NODE | 2 |
| TEXT_NODE | 3 |
| COMMENT_NODE | 8 |
| DOCUMENT_NODE | 9 |
| DOCUMENT_TYPE_NODE | 10 |
二十八、HTMLCollection 对象
getElementsByTagName() 方法返回 HTMLCollection 对象。
HTMLCollection 对象是类数组的 HTML 元素列表（集合）。
二十九、HTMLCollection 并非数组！
HTMLCollection 也许看起来像数组，但并非数组。
您能够遍历列表并通过数字引用元素（就像数组那样）。
不过，您无法对 HTMLCollection 使用数组方法，比如 valueOf()、pop()、push() 或 join()。
三十、HTML DOM NodeList 对象
NodeList 对象是从文档中提取的节点列表（集合）。
NodeList 对象与 HTMLCollection 对象几乎相同。
如使用 getElementsByClassName() 方法，某些（老的）浏览器会返回 NodeList 对象而不是 HTMLCollection。
所有浏览器都会为 childNodes 属性返回 NodeList 对象。
大多数浏览器会为 querySelectorAll() 方法返回 NodeList 对象。
三十一HTMLCollection 与 NodeList 的区别
HTMLCollection（前一章）是 HTML 元素的集合。
NodeList 是文档节点的集合。
NodeList 和 HTML 集合几乎完全相同。
HTMLCollection 和 NodeList 对象都是类数组的对象列表（集合）。
它们都有定义列表（集合）中项目数的 length 属性。
它们都可以通过索引 (0, 1, 2, 3, 4, ...) 像数组那样访问每个项目。
访问 HTMLCollection 项目，可以通过它们的名称、id 或索引号。
访问 NodeList 项目，只能通过它们的索引号。
只有 NodeList 对象能包含属性节点和文本节点。
节点列表不是数组！
节点数组看起来像数组，但并不是。
您能够遍历节点列表并像数组那样引用其节点。
不过，您无法对节点列表使用数组方法，比如 valueOf()、push()、pop() 或 join()。
扫一扫
213
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
