Dom 是什么的详细说明

DOM（Document Object Model）即文档对象模型，是指在浏览器中网页文档的表示方式。通俗的说，DOM可以把网页文档看作是由节点（node）组成的树形结构，每个节点可以包含文本、属性等信息，通过DOM可以对这些节点进行创建、访问、修改和删除等操作。

DOM模型分为三个层次：

核心DOM：为XML和HTML文档提供通用的表示和操作方式；
HTML DOM：专门针对HTML文档的操作方式；
扩展DOM：由于XML的可扩展性和灵活性，DOM被用来处理从其他系统载入的XML文档。扩展DOM则协助开发人员处理这种文档。

以下是两个示例，演示了DOM节点的创建和操作：

示例一：创建DOM节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM示例</title>
</head>
<body>
    <h2>我是原始的网页内容</h2>
    <div id="myDiv"></div>
    <script>
        // 创建DOM节点
        var newP = document.createElement("p"); // 创建一个<p>元素
        var txtNode = document.createTextNode("Hello World!"); // 创建一个文本节点
        newP.appendChild(txtNode); //将文本节点添加到<p>元素中
        document.getElementById("myDiv").appendChild(newP); // 将<p>元素添加到<div>元素中
    </script>
</body>
</html>

在这个示例中，我们首先使用document.createElement()方法创建一个<p>元素，然后使用document.createTextNode()方法创建一个文本节点，再将文本节点添加到<p>元素中，最后将<p>元素添加到页面中已有的<div>元素中。通过这样的操作，我们成功创建了一个新的节点，并将其添加到了页面中。

示例二：修改DOM节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM示例</title>
</head>
<body>
    <h2 id="myTitle">我是原始的网页内容</h2>
    <script>
        // 修改DOM节点
        var title = document.getElementById("myTitle"); //获取标题元素
        title.innerHTML = "修改后的网页内容"; // 修改节点的innerHTML属性

        title.style.color = "red"; //修改节点的样式
    </script>
</body>
</html>

在这个示例中，我们首先使用document.getElementById()方法获取了页面中的标题元素，然后通过修改innerHTML属性和style属性来修改节点内容和样式。这样的操作可以动态地改变页面内容，让网页更加灵活和反应性。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Dom 是什么的详细说明 - Python技术站

Dom 是什么的详细说明

示例一：创建DOM节点

示例二：修改DOM节点

相关文章