HTML DOM 实例

在本章中，我们将通过实际的示例来演示如何操作 HTML DOM。HTML DOM (文档对象模型) 是用于访问和操作 HTML 文档的标准编程接口。

示例 1: 获取元素并修改内容

在这个示例中，我们将演示如何使用 JavaScript 来获取 HTML 元素并修改其内容。

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>HTML DOM 示例</title>
</head>
<body>

<h1 id="heading">这是一个标题</h1>
<p id="paragraph">这是一个段落</p>

<script>
    // 获取元素
    var heading = document.getElementById("heading");
    var paragraph = document.getElementById("paragraph");

    // 修改内容
    heading.innerHTML = "新标题";
    paragraph.innerHTML = "新段落";
</script>

</body>
</html>

在这个示例中，我们首先使用 document.getElementById 方法获取了 heading 和 paragraph 元素，然后使用 innerHTML 属性来修改它们的内容。

示例 2: 添加新元素

在这个示例中，我们将演示如何使用 JavaScript 来添加新的 HTML 元素到文档中。

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>HTML DOM 示例</title>
</head>
<body>

<div id="container">
    <p>这是一个段落</p>
</div>

<button onclick="addNewElement()">添加新元素</button>

<script>
    function addNewElement() {
        var newElement = document.createElement("p");
        var text = document.createTextNode("这是一个新段落");
        newElement.appendChild(text);
        document.getElementById("container").appendChild(newElement);
    }
</script>

</body>
</html>

在这个示例中，我们使用 document.createElement 方法创建了一个新的 p 元素，并使用 document.createTextNode 方法创建了一个文本节点，然后将文本节点添加到新的 p 元素中，最后将新的 p 元素添加到 container 元素中。

以上就是本章的 HTML DOM 实例内容，希望能帮助你更好地理解 HTML DOM 的使用方法。