HTML DOM - 修改

w3school 在线教程

## HTML DOM

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

## DOM 实例

- DOM 实例

## DOM 参考手册

- DOM 参考

## 建站手册

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

## 关于 W3School

## 帮助 W3School

## 广告刊例

# HTML DOM - 修改

- DOM 访问
- DOM 内容

修改 HTML = 改变元素、属性、样式和事件。

## 修改 HTML 元素

修改 HTML DOM 意味着许多不同的方面：

- 改变 HTML 内容
- 改变 CSS 样式
- 改变 HTML 属性
- 创建新的 HTML 元素
- 删除已有的 HTML 元素
- 改变事件（处理程序）

在接下来的章节，我们会深入学习修改 HTML DOM 的常用方法。

## 创建 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 元素

如需向 HTML DOM 添加新元素，您首先必须创建该元素（元素节点），然后把它追加到已有的元素上。

### 实例

    <div id="d1">
    <p id="p1">This is a paragraph.</p>
    <p id="p2">This is another paragraph.</p>
    </div>

    <script>
    var para=document.createElement("p");
    var node=document.createTextNode("This is new.");
    para.appendChild(node);

    var element=document.getElementById("d1");
    element.appendChild(para);
    </script>

亲自试一试

- DOM 访问
- DOM 内容