JavaScript 操作 HTML DOM 基础：元素查找与内容修改

HTML DOM 模型概述

借助 HTML DOM，JavaScript 可以访问并操作 HTML 文档中的每一个元素。当浏览器加载网页时，会自动构建文档对象模型（Document Object Model）。该模型将页面结构组织为树状对象层级，如 所示。通过这种可编程的对象模型，JavaScript 具备了生成动态 HTML 的能力。

• JavaScript 具备修改页面中所有 HTML 元素的能力。
• JavaScript 具备修改页面中所有 HTML 属性的能力。
• JavaScript 具备修改页面中所有 CSS 样式的能力。
• JavaScript 能够对页面中注册的所有事件做出响应。

查找 HTML 元素的三种方法

在 JavaScript 开发中，操作 HTML 元素是常见需求，而首要步骤是定位目标元素。目前主要有三种方式可以实现这一目标。

• 利用元素的 ID 属性来定位 HTML 元素。
• 利用标签名称来定位 HTML 元素。
• 利用类名来定位 HTML 元素。
• 基于 ID 查找 HTML 元素。

在 DOM 中定位元素最简便的方式是利用元素的唯一 ID。以下示例展示了如何查找 ID 为 "intro" 的元素： 实例

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

若成功找到该元素，方法将返回包含该元素的对象（赋值给变量 x）；若未找到，则 x 的值为 null。 接下来介绍通过标签名查找元素的方法。本例首先获取 ID 为 "main" 的元素，随后在该元素内部查找所有的 <p> 标签： 实例

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

通过类名查找元素的方法如下。本例使用 getElementsByClassName 函数来定位 class 为 "intro" 的元素： 实例

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

改变 HTML 内容与属性

HTML DOM 允许 JavaScript 动态更改 HTML 元素的内容。其中一种方式是直接修改 HTML 输出流。JavaScript 可以使用 document.write() 方法直接向 HTML 输出流写入内容，从而创建动态的 HTML 内容。例如： 今天的日期是： Wed Oct 21 2015 14:43:25 GMT+0800 (中国标准时间) 实例

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

注意：lamp 绝对不要在文档加载完成后使用 document.write()，因为这会导致覆盖整个文档。

修改 HTML 内容最简单的方法是使用 innerHTML 属性。语法如下： document.getElementById(id).innerHTML=new HTML 以下示例演示了如何修改 <p> 元素的内容： 实例

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="New text!";
</script>

</body>
</html>

以下示例演示了如何修改 <h1> 元素的内容： 实例

<!DOCTYPE html>
<html>
<body>

<h1 id="header">Old Header</h1>

<script>
var element=document.getElementById("header");
element.innerHTML="New Header";
</script>

</body>
</html>

实例解析：

• 上述 HTML 文档中包含一个 ID 为 "header" 的 <h1> 元素。
• 我们利用 HTML DOM 获取 ID 为 "header" 的元素引用。
• 随后使用 JavaScript 更改该元素的 innerHTML 属性以更新内容。

如需修改 HTML 元素的属性，可使用以下语法：

document.getElementById(id).attribute=new value

以下示例演示了如何修改 <img> 元素的 src 属性： 实例

<!DOCTYPE html>
<html>
<body>

<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>

</body>
</html>

实例解析：

• 上述 HTML 文档中包含一个 ID 为 "image" 的 <img> 元素。
• 我们利用 HTML DOM 获取 ID 为 "image" 的元素引用。
• 最后通过 JavaScript 更改该元素的属性，将 "smiley.gif" 替换为 "landscape.jpg"。