本节介绍 JavaScript 文档对象模型 (DOM)，并向您展示如何有效地操作 DOM 元素。
第 1 节。入门
第 2 节。选择元素
- getElementById() – 按 ID 选择元素。
- getElementsByName() – 按名称选择元素。
- getElementsByTagName() – 按标签名称选择元素。
- getElementsByClassName() – 按一个或多个类名选择元素。
- querySelector() – 按 CSS 选择器选择元素。
第 4 节。操作元素
- createElement() – 创建一个新元素。
- appendChild() – 将一个节点附加到指定父节点的子节点列表。
- textContent – 获取和设置节点的文本内容。
- innerHTML – 获取和设置元素的 HTML 内容。
- innerHTML 与 createElement – 解释在创建新元素时 innerHTML 与 createElement 之间的区别。
- DocumentFragment – 了解如何组合 DOM 节点并将它们插入到活动 DOM 树中。
- after() – 在元素之后插入一个节点。
- append() – 在父节点的最后一个子节点之后插入一个节点。
- prepend() – 在父节点的第一个子节点之前插入一个节点。
- insertAdjacentHTML() – 将文本解析为 HTML，并将生成的节点插入到文档中的指定位置。
- replaceChild() – 用一个新元素替换一个子元素。
- cloneNode() – 克隆一个元素及其所有后代。
- removeChild() – 删除节点的子元素。
- insertBefore() – 将一个新节点作为指定父节点的子节点插入到现有节点之前。
- insertAfter() 辅助函数 – 将一个新节点作为指定父节点的子节点插入到现有节点之后。
第 5 节。使用属性
- HTML 属性和 DOM 对象的属性 – 了解 HTML 属性和 DOM 对象属性之间的关系。
- setAttribute() – 设置元素上指定属性的值。
- getAttribute() – 获取元素上属性的值。
- removeAttribute() – 从指定元素中删除属性。
- hasAttribute() – 检查元素是否具有指定属性。
第 6 节。操作元素的样式
- style 属性 – 获取或设置元素的内联样式。
- getComputedStyle() – 返回元素的计算样式。
- className 属性 – 返回以空格分隔的 CSS 类列表。
- classList 属性 – 操作元素的 CSS 类。
- 元素的宽度和高度 – 获取元素的宽度和高度。
第 7 节。使用事件
- JavaScript 事件 – 向您介绍 JavaScript 事件、事件模型以及如何处理事件。
- 处理事件 – 向您展示三种在 JavaScript 中处理事件的方法。
- 页面加载事件 – 了解页面加载和卸载事件。
- load 事件 – 指导您完成处理来自文档、图像和脚本元素的 load 事件的步骤。
- DOMContentLoaded – 了解如何正确使用
DOMContentLoaded事件。 - beforeunload 事件 – 指导您如何在用户离开页面之前显示确认对话框。
- unload 事件 – 向您展示如何处理页面完全卸载时触发的 unload 事件。
- 鼠标事件 – 如何处理鼠标事件。
- 键盘事件 – 如何处理键盘事件。
- 滚动事件 – 如何有效地处理滚动事件。
- scrollIntoView – 了解如何将元素滚动到视图中。
- 焦点事件 – 涵盖焦点事件。
- haschange 事件 – 了解如何处理 URL 哈希更改时的事件。
- 事件委托 – 是一种利用事件冒泡在 DOM 中比事件起源的元素更高的级别处理事件的技术。
- dispatchEvent – 了解如何从代码生成事件并触发它。
- 自定义事件 – 定义一个自定义 JavaScript 事件并将其附加到元素。
- MutationObserver – 监控 DOM 更改并在更改发生时调用回调。
第 8 节。脚本化 Web 表单
- JavaScript 表单 – 了解如何处理表单
submit事件并对 Web 表单执行简单的验证。 - 单选按钮 – 向您展示如何为单选按钮编写 JavaScript。
- 复选框 – 指导您如何在 JavaScript 中操作复选框。
- 选择框 – 了解如何在 JavaScript 中处理选择框及其选项。
- 添加/删除选项 – 向您展示如何动态地向选择框添加选项和从选择框中删除选项。
- 有条件地从<select> 元素中删除项目 – 向您展示如何有条件地从
<select>元素中删除项目。 - 处理更改事件 – 了解如何处理输入文本、单选按钮、复选框和选择元素的更改事件。
- 处理输入事件 – 当输入元素的值更改时处理输入事件。
JavaScript DOM 项目
本教程是否有帮助？
