导航
×
   ❮   
HTML CSS JavaScript PHP Go Sass W3C Colors ECMS

JS 教程

JS 简介 JS 如何使用 JS 输出 JS 语法 JS 语句 JS 注释 JS 变量 JS 运算符 JS 条件语句 JS 循环 JS 字符串 JS 数字 JS 函数 JS 对象 JS 日期 JS 数组 JS 类型化数组 JS 集合 JS Map 映射 JS Math JS 正则表达式 JS 数据类型 JS 错误 JS 事件 JS 编程 JS 关键字参考 JS 保留关键字参考 JS 运算符参考 JS 运算符优先级 JS UTF-8 字符 JS UTF-8 符号 JS UTF-8 表情符号 JS 版本

JS 高级教程

JS 对象 JS 函数 JS 类 JS 迭代 JS Promises JS 模块 JS HTML DOM JS Windows JS Web API JS AJAX JS JSON JS jQuery JS 图形

JS 实例

JS 实例 JS HTML DOM JS HTML 输入 JS HTML 对象 JS HTML 事件 JS Browser JS 测验

JavaScript HTML DOM


通过 HTML DOM,JavaScript 能够访问和改变 HTML 文档的所有元素。


HTML DOM(文档对象模型)

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

HTML DOM 模型被结构化为对象树:

对象的 HTML DOM 树

DOM HTML tree

通过这个对象模型,JavaScript 获得创建动态 HTML 的所有力量:

  • JavaScript 能改变页面中的所有 HTML 元素
  • JavaScript 能改变页面中的所有 HTML 属性
  • JavaScript 能改变页面中的所有 CSS 样式
  • JavaScript 能删除已有的 HTML 元素和属性
  • JavaScript 能添加新的 HTML 元素和属性
  • JavaScript 能对页面中所有已有的 HTML 事件作出反应
  • JavaScript 能在页面中创建新的 HTML 事件

您将学到什么

在本教程下面的章节中,您将学到:

  • 如何改变 HTML 元素的内容
  • 如何改变 HTML 元素的样式(CSS)
  • 如何对 HTML DOM 事件作出反应
  • 如何添加和删除 HTML 元素

什么是 DOM?

DOM 是一项 W3C (World Wide Web Consortium) 标准。

DOM 定义了访问文档的标准:

"W3C 文档对象模型(DOM)是中立于平台和语言的接口,它允许程序和脚本动态地访问、更新文档的内容、结构和样式。"

W3C DOM 标准被分为 3 个不同的部分:

  • Core DOM - 所有文档类型的标准模型
  • XML DOM - XML 文档的标准模型
  • HTML DOM - HTML 文档的标准模型

什么是 HTML DOM?

HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了:

  • 作为对象的 HTML 元素
  • 所有 HTML 元素的属性
  • 访问所有 HTML 元素的方法
  • 所有 HTML 元素的事件

换言之:HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准


Copyright ©2020-2026 freew3c.com All Rights Reserved 提供的内容仅用于学习和测试,不保证内容的正确性。