警告
请使用 document.write() 仅仅向文档输出写内容。
如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖:
.
DOM 节点
根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
HTML DOM 节点树
HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树:
HTML DOM Tree 实例
节点父、子和同胞
节点树中的节点彼此拥有层级关系。
父(parent)、子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。
- 在节点树中,顶端节点被称为根(root)
- 每个节点都有父节点、除了根(它没有父节点)
- 一个节点可拥有任意数量的子
- 同胞是拥有相同父节点的节点
下面的图片展示了节点树的一部分,以及节点之间的关系:
请看下面的 HTML 片段:
DOM 教程
DOM 第一课
Hello world!
从上面的 HTML 中:
- 节点没有父节点;它是根节点
- 和 的父节点是 节点
- 文本节点 "Hello world!" 的父节点是 < p> 节点
并且:
- 节点拥有两个子节点: 和
- 节点拥有一个子节点:
节点 节点也拥有一个子节点:文本节点 "DOM 教程" - < h1> 和 < p> 节点是同胞节点,同时也是 的子节点
并且:
- 元素是 元素的首个子节点
- 元素是 元素的最后一个子节点
- < h1> 元素是 元素的首个子节点
- < p> 元素是 元素的最后一个子节点
警告!
DOM 处理中的常见错误是希望元素节点包含文本。
在本例中:
可通过节点的 innerHTML 属性来访问文本节点的值。
HTML DOM 方法
方法是我们可以在节点(HTML 元素)上执行的动作。
编程接口
可通过 JavaScript (以及其他编程语言)对 HTML DOM 进行访问。
所有 HTML 元素被定义为对象,而编程接口则是对象方法和对象属性。
方法是您能够执行的动作(比如添加或修改元素)。
属性是您能够获取或设置的值(比如节点的名称或内容)。
getElementById() 方法
getElementById() 方法返回带有指定 ID 的元素:
例子
var element=document.getElementById("intro");
亲自试一试
HTML DOM 对象 - 方法和属性
一些常用的 HTML DOM 方法:
- getElementById(id) - 获取带有指定 id 的节点(元素)
- appendChild(node) - 插入新的子节点(元素)
- removeChild(node) - 删除子节点(元素)
一些常用的 HTML DOM 属性:
- innerHTML - 节点(元素)的文本值
- parentNode - 节点(元素)的父节点
- childNodes - 节点(元素)的子节点
- attributes - 节点(元素)的属性节点
现实生活中的对象
某个人是一个对象。
人的方法可能是 eat(), sleep(), work(), play() 等等。
所有人都有这些方法,但会在不同时间执行它们。
一个人的属性包括姓名、身高、体重、年龄、性别等等。
所有人都有这些属性,但它们的值因人而异。
一些 DOM 对象方法
这里提供一些您将在本教程中学到的常用方法:
DOM 属性
innerHTML 属性
获取元素内容的最简单方法是使用 innerHTML 属性。
innerHTML 属性对于获取或替换 HTML 元素的内容很有用。
实例
下面的代码获取 id="intro" 的 < p> 元素的 innerHTML:
实例
Hello World!
亲自试一试
在上面的例子中,getElementById 是一个方法,而 innerHTML 是属性。
innerHTML 属性可用于获取或改变任意 HTML 元素,包括 和
nodeName 属性
nodeName 属性规定节点的名称。
- nodeName 是只读的
- 元素节点的 nodeName 与标签名相同
- 属性节点的 nodeName 与属性名相同
- 文本节点的 nodeName 始终是 #text
- 文档节点的 nodeName 始终是 #document
注释:nodeName 始终包含 HTML 元素的大写字母标签名。
nodeValue 属性
nodeValue 属性规定节点的值。
- 元素节点的 nodeValue 是 undefined 或 null
- 文本节点的 nodeValue 是文本本身
- 属性节点的 nodeValue 是属性值
获取元素的值
下面的例子会取回 < p id="intro"> 标签的文本节点值:
实例
Hello World!
亲自试一试
nodeType 属性
nodeType 属性返回节点的类型。nodeType 是只读的。
比较重要的节点类型有:
DOM 访问
访问 HTML 元素(节点)
访问 HTML 元素等同于访问节点
您能够以不同的方式来访问 HTML 元素:
- 通过使用 getElementById() 方法
- 通过使用 getElementsByTagName() 方法
- 通过使用 getElementsByClassName() 方法
getElementById() 方法
getElementById() 方法返回带有指定 ID 的元素:
语法
node.getElementById("id");
下面的例子获取 id="intro" 的元素:
实例
document.getElementById("intro");
亲自试一试
getElementsByTagName() 方法
getElementsByTagName() 返回带有指定标签名的所有元素。
语法
node.getElementsByTagName("tagname");
下面的例子返回包含文档中所有 < p> 元素的列表:
实例 1
document.getElementsByTagName("p");
亲自试一试
下面的例子返回包含文档中所有 < p> 元素的列表,并且这些 < p> 元素应该是 id="main" 的元素的后代(子、孙等等):
实例 2
document.getElementById("main").getElementsByTagName("p");
亲自试一试
getElementsByClassName() 方法
如果您希望查找带有相同类名的所有 HTML 元素,请使用这个方法:
document.getElementsByClassName("intro");
上面的例子返回包含 class="intro" 的所有元素的一个列表:
注释:getElementsByClassName() 在 Internet Explorer 5,6,7,8 中无效。
DOM 修改
修改 HTML 元素
修改 HTML DOM 意味着许多不同的方面:
- 改变 HTML 内容
- 改变 CSS 样式
- 改变 HTML 属性
- 创建新的 HTML 元素
- 删除已有的 HTML 元素
- 改变事件(处理程序)
创建 HTML 内容
改变元素内容的最简答的方法是使用 innerHTML 属性。
下面的例子改变一个 < p> 元素的 HTML 内容:
实例
Hello World!
亲自试一试
改变 HTML 样式
通过 HTML DOM,您能够访问 HTML 元素的样式对象。
下面的例子改变一个段落的 HTML 样式:
实例
Hello world!
亲自试一试
创建新的 HTML 元素
如需向 HTML DOM 添加新元素,您首先必须创建该元素(元素节点),然后把它追加到已有的元素上。
实例
This is a paragraph.
This is another paragraph.
亲自试一试
DOM 内容
使用事件
HTML DOM 允许您在事件发生时执行代码。
当 HTML 元素”有事情发生“时,浏览器就会生成事件:
- 在元素上点击
- 加载页面
- 改变输入字段
下面两个例子在按钮被点击时改变
元素的背景色:实例
亲自试一试
在本例中,由函数执行相同的代码:
实例
亲自试一试
下面的例子在按钮被点击时改变 < p> 元素的文本:
实例
Hello world!
亲自试一试
DOM 元素
创建新的 HTML 元素- appendChild()
如需向 HTML DOM 添加新元素,您首先必须创建该元素,然后把它追加到已有的元素上。
实例
This is a paragraph.
This is another paragraph.
亲自试一试
例子解释
这段代码创建了一个新的 < p> 元素:
var para=document.createElement("p");
如需向 < p> 元素添加文本,您首先必须创建文本节点。这段代码创建文本节点:
var node=document.createTextNode("This is a new paragraph.");
然后您必须向 < p> 元素追加文本节点:
para.appendChild(node);
最后,您必须向已有元素追加这个新元素。
这段代码查找到一个已有的元素:
var element=document.getElementById("div1");
这段代码向这个已存在的元素追加新元素:
element.appendChild(para);
创建新的 HTML 元素- insertBefore()
上一个例子中的 appendChild() 方法,将新元素作为父元素的最后一个子元素进行添加。
如果不希望如此,您可以使用insertBefore()
方法:
实例
This is a paragraph.
This is another paragraph.
亲自试一试
删除已有的 HTML 元素
如需删除 HTML 元素,您必须清楚该元素的父元素:
实例
This is a paragraph.
This is another paragraph.
亲自试一试
例子解释
这个 HTML 文档包含一个带有两个子节点(两个 < p> 元素)的
This is a paragraph.
This is another paragraph.
查找 id="div1" 的元素:
var parent=document.getElementById("div1");
查找 id="p1" 的
元素:
var child=document.getElementById("p1");
从父元素中删除子元素:
parent.removeChild(child);
提示:能否在不引用父元素的情况下删除某个元素?
很抱歉。DOM 需要了解您需要删除的元素,以及它的父元素。
这里提供一个常用的解决方法:找到您需要删除的子元素,然后使用 parentNode 属性来查找其父元素:
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
替换 HTML 元素
如需替换 HTML DOM 中的元素,请使用 replaceChild() 方法:
实例
This is a paragraph.
This is another paragraph.
亲自试一试
DOM 导航
HTML DOM 节点列表
getElementsByTagName() 方法返回节点列表。节点列表是一个节点数组。
下面的代码选取文档中的所有 < p> 节点:
实例
var x=document.getElementsByTagName("p");
可以通过下标号访问这些节点。如需访问第二个 < p>,您可以这么写:
y=x[1];
亲自试一试
注释:下标号从 0 开始。
HTML DOM 节点列表长度
length 属性定义节点列表中节点的数量。
您可以使用 length 属性来循环节点列表:
实例
x=document.getElementsByTagName("p");
for (i=0;i ");
}
亲自试一试
例子解释:
- 获取所有 < p> 元素节点
- 输出每个 < p> 元素的文本节点的值
导航节点关系
您能够使用三个节点属性:parentNode、firstChild 以及 lastChild ,在文档结构中进行导航。
请看下面的 HTML 片段:
Hello World!
DOM 很有用!
本例演示节点关系。
- 首个 < p> 元素是 元素的首个子元素(firstChild)
- 元素是 元素的最后一个子元素(lastChild)
- 元素是首个 < p> 元素和
元素的父节点(parentNode)firstChild 属性可用于访问元素的文本:
实例Hello World!
亲自试一试
DOM 根节点
这里有两个特殊的属性,可以访问全部文档:- document.documentElement - 全部文档
- document.body - 文档的主体
实例
Hello World!
DOM 很有用!
本例演示 document.body 属性。
亲自试一试
childNodes 和 nodeValue
除了 innerHTML 属性,您也可以使用 childNodes 和 nodeValue 属性来获取元素的内容。
下面的代码获取 id="intro" 的元素的值:
实例Hello World!
亲自试一试
在上面的例子中,getElementById 是一个方法,而 childNodes 和 nodeValue 是属性。 - 元素是首个 < p> 元素和