JavaScript HTML DOM-开发文档-JsSaaS开发平台

系统、网站、API站点，简单高效开发

Javascript 教程

JavaScript 教程 JavaScript 简介 JavaScript 用法 JavaScript 输出 JavaScript 语句 JavaScript 注释 JavaScript 变量 JavaScript 数据类型 JavaScript 对象 JavaScript 函数 JavaScript 作用域 JavaScript 事件 JavaScript 字符串 JavaScript 运算符 JavaScript 比较和逻辑运算符 JavaScript if...Else 语句 JavaScript switch 语句 JavaScript for 循环 JavaScript while 循环 JavaScript break 和 continue 语句 JavaScript 错误 - throw、try 和 catch JavaScript 表单验证 JavaScript 验证 API JavaScript 保留关键字 JavaScript this 关键字 JavaScript let 和 const JavaScript JSON javascript:void(0) 含义 JavaScript 异步编程 JavaScript Promise JavaScript 代码规范

JS 函数

JS 类

JS HTML DOM

JavaScript HTML DOM JavaScript HTML DOM - 改变 HTML JavaScript HTML DOM - 改变CSS JavaScript HTML DOM 事件 JavaScript HTML DOM 元素 (节点)

JS 高级教程

JavaScript 对象 JavaScript prototype（原型对象） JavaScript Number 对象 JavaScript 字符串（String）对象 JavaScript Date（日期）对象 JavaScript Array（数组）对象 JavaScript Boolean（布尔）对象 JavaScript Math（算数）对象 JavaScript RegExp 对象

JS 浏览器BOM

JavaScript Window - 浏览器对象模型 JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Window Navigator JavaScript 弹窗 JavaScript 计时事件 JavaScript Cookie

JS 库

JavaScript 库 JavaScript - 测试 jQuery JavaScript - 测试 Prototype

JS 实例

JavaScript 对象实例 JavaScript Browser 对象实例 JavaScript 对象实例现在您已经学习了 JavaScript，接下来该学习什么呢？

JS 参考手册

JavaScript 和 HTML DOM 参考手册 HTML DOM Document 对象 JavaScript 异步编程 JavaScript 静态方法

JavaScript HTML DOM

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

HTML DOM (文档对象模型)

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

HTML DOM 模型被构造为对象的树：

HTML DOM 树

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

查找 HTML 元素

通常，通过 JavaScript，您需要操作 HTML 元素。

为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

通过 id 找到 HTML 元素
通过标签名找到 HTML 元素
通过类名找到 HTML 元素

通过 id 查找 HTML 元素

在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。

本例查找 id="intro" 元素：

实例

var x=document.getElementById("intro");

如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。

如果未找到该元素，则 x 将包含 null。

通过标签名查找 HTML 元素

本例查找 id="main" 的元素，然后查找 id="main" 元素中的所有 <p> 元素：

实例

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

通过类名找到 HTML 元素

本例通过 getElementsByClassName 函数来查找 class="intro" 的元素：

实例

var x=document.getElementsByClassName("intro");

HTML DOM 教程

在本教程接下来的篇幅中，您将学到：

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