HTML DOM 修改 HTML 内容 - HTML DOM 基础教程

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

改变 HTML 内容

任意一个元素的 innerHTML 属性都可以修改元素本身的内容

下面的范例更改了 <h1> 元素的 HTML 内容

<h1 id="h1">Hello World!</h1>

<script>
document.getElementById("h1").innerHTML="简单教程，简单编程";
</script>

<p>通过脚本来修改标题的内容</p>
<footer>简单教程，简单编程<br/>Copyright © 简单教程 www.twle.cn</footer>

运行范例 »

改变 HTML 样式

HTML DOM 可以访问 HTML 对象的样式对象

下面的范例更改了 <h2> 标题的 HTML 样式

<h2 id="h21">Hello world!</h2>
<h2 id="h22">Hello world!</h2>
<footer>简单教程，简单编程<br/>Copyright © 简单教程 www.twle.cn</footer>
<script>
document.getElementById("h22").style.color="blue";
document.getElementById("h22").style.fontFamily="Courier New";
</script>

运行范例 »

使用事件

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

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

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

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

<input type="button"
onclick="document.body.style.backgroundColor='lavender';"
value="修改背景颜色">

运行范例 »

下面的范例，由函数执行相同的代码

<script>
function ChangeBackground()
{
    document.body.style.backgroundColor="lavender";
}
</script>
<input type="button" onclick="ChangeBackground()" value="修改背景颜色" />
<footer>简单教程，简单编程<br/>Copyright © 简单教程 www.twle.cn</footer>

运行范例 »

下面的范例在按钮被点击时改变 <h1>> 元素的文本

<h1 id="h11">Hello world!</h1>

<script>
function ChangeText()
{
    document.getElementById("h11").innerHTML="简单教程";
}
</script>
<input type="button" onclick="ChangeText()" value="修改文本" />
<footer>简单教程，简单编程<br/>Copyright © 简单教程 www.twle.cn</footer>

运行范例 »