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" 元素：

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

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

通过标签名查找 html 元素

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

通过类名找到 html 元素

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

html dom 教程

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

• 如何改变 html 元素的内容 (innerhtml)
• 如何改变 html 元素的样式 (css)
• 如何对 html dom 事件做出反应
• 如何添加或删除 html 元素