HTML DOM教程

HTML DOM 简介 HTML DOM 节点 HTML DOM 方法 HTML DOM 属性 HTML DOM 访问 HTML DOM 修改 HTML DOM 修改 HTML 内容 HTML DOM 元素 HTML DOM 事件 HTML DOM 导航 HTML DOM 总结 HTML DOM 对象

HTML DOM 修改 HTML 内容

通过 HTML DOM，JavaScript 能够访问 HTML 文档中的每个元素。

改变 HTML 内容

改变元素内容的最简单的方法是使用 innerHTML 属性。

下面的例子更改 <p> 元素的 HTML 内容：

实例

<html>
<body>

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

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

</body>
</html>

改变 HTML 样式

通过 HTML DOM，您能够访问 HTML 对象的样式对象。

下面的例子更改段落的 HTML 样式：

实例

<p id="p2">Hello world!</p>

</body>
</html>

使用事件

HTML DOM 允许您在事件发生时执行代码。

当 HTML 元素"有事情发生"时，浏览器就会生成事件：

在元素上点击
加载页面
改变输入字段

你可以在下一章学习更多有关事件的内容。

下面两个例子在按钮被点击时改变 <body> 元素的背景色：

实例

在本例中，由函数执行相同的代码：

实例

<html>
<body>

<script>
function ChangeBackground()
{
document.body.style.backgroundColor="lavender";
}
</script>

<input type="button" onclick="ChangeBackground()"
value="Change background color" />

</body>
</html>

下面的例子在按钮被点击时改变 <p> 元素的文本：

实例

<html>
<body>

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

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

<input type="button" onclick="ChangeText()" value="Change text">

</body>
</html>