HTML DOM 简介

DOM是Document Object Model的缩写,即文档对象模型。HTML DOM是HTML文档对象模型的简称,用来描述HTML页面的层次结构。

根据W3C的HTML DOM标准,HTML DOM由节点组成,HTML文档中的所有内容都是节点:

  • 整个文档是一个文档节点
  • 每个 HTML 元素是元素节点
  • HTML 元素内的文本是文本节点
  • 每个 HTML 属性是属性节点
  • 注释是注释节点

把一个HTML文档中的所有元素组织在一起,就构成了一棵DOM树,文档中的每个元素、属性、文本等都代表DOM树中的一个节点,节点之间存在等级关系。看一个简单的HTML文档:

<html>
  <head>
    <title> HTML DOM </title>
  </head>
  <body>
    <h1> Hello world! </h1>
    <a href = "http://www.waibo.wang">歪脖网</a>
  </body>
</html>

文档中的每一个元素,在DOM树中都有自己的位置。每个元素要么是另一个元素的父元素,要么是另一个元素的子元素,通常是既作父元素,又作子元素。

DOM树起始于文档节点,并由此继续伸出枝条,直到最低级别的文本节点为止。依据上面的HTML文档,可以绘制一个清晰的DOM树,来表示各元素之间的关系。

HTML DOM

DOM树中所有的节点彼此间都存在关系,如果一个节点是另一个节点的直接上层,则前者是后者的父节点。除文档节点之外的每个节点都有父节点。如,<head> 和 <body> 的父节点是 <html> 节点,文本节点 "Hello world!" 的父节点是 <h1> 节点。

如果一个节点是另一个节点的直接下层,则前者是后者的子节点。大部分元素节点都有子节点。如,<head> 节点有一个子节点:<title> 节点。<title> 节点也有一个子节点:文本节点 "HTML DOM"。

当节点具有同一个父节点时,它们就是同胞(同级子节点)。如,<h1> 和 <a> 是同胞,因为它们的父节点均是 <body> 节点。

节点也可以拥有后代,后代指某个节点的所有子节点,及这些子节点的子节点,以此类推。如,所有的文本节点都是 <html> 节点的后代,而第一个文本节点是 <head> 节点的后代。

节点也可以拥有祖先,祖先是某个节点的父节点,或者父节点的父节点,以此类推。如,所有的文本节点都可把 <html> 节点作为祖先节点。

由此可知,一个HTML文档并不是一个简单的文本文件,而是一个具有层次结构的逻辑文档,每一个HTML元素都作为这个层次结构中的一个节点存在。

通过可编程的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" 的元素,然后查找 "main" 中的所有 <p> 元素:

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
亲自体验一下

提示:通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。

HTML DOM 教程

在本教程接下来的篇幅中,您将学到:

  • 如何改变 HTML 元素的内容 (innerHTML)
  • 如何改变 HTML 元素的样式 (CSS)
  • 如何对 HTML DOM 事件对做出反应
  • 如何添加或删除 HTML 元素
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验