HTML DOM - 修改 HTML 内容

w3school 在线教程

## HTML DOM

- DOM 教程
- DOM 简介
- DOM 节点
- DOM 方法
- DOM 属性
- DOM 访问
- DOM 修改
- DOM 内容
- DOM 元素
- DOM 事件
- DOM 导航
- DOM 总结

## DOM 实例

- DOM 实例

## DOM 参考手册

- DOM 参考

## 建站手册

- 网站构建
- 万维网联盟 (W3C)
- 浏览器信息
- 网站品质
- 语义网
- 职业规划
- 网站主机

## 关于 W3School

## 帮助 W3School

## 广告刊例

# HTML DOM - 修改 HTML 内容

- DOM 修改
- DOM 元素

通过 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 样式：

### 实例

    <html>

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

    <script>
    document.getElementById("p2").style.color="blue";
    </script>

    </body>
    </html>

亲自试一试

## 使用事件

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

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

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

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

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

### 实例

    <html>
    <body>

    <input type="button" onclick="document.body.style.backgroundColor='lavender';"
    value="Change background color" />

    </body>
    </html>

亲自试一试

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

### 实例

    <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>

亲自试一试

- DOM 修改
- DOM 元素