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 元素。

为了做到这件工作,您有必要首要找到该元素。有三种办法来做这件事:

  • 经过 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 元素