DOM基础教程之使用DOM的完整攻略如下：

什么是DOM

DOM，全称文档对象模型（Document Object Model），是HTML文档或XML文档的编程接口。它把整个文档映射成一个多层节点结构，提供了对节点的操作和查询功能。

如何访问DOM

要访问DOM，最简单的方法是通过JavaScript的document对象。document对象代表整个HTML或XML文档，提供了大量的方法和属性来操作页面中的元素。

// 获取页面中的标题
let title = document.title;
console.log(title);

// 获取页面中的第一个段落元素
let p = document.getElementsByTagName("p")[0];
console.log(p.innerHTML);

如何操作DOM

要操作DOM，可以使用document对象提供的方法和属性，也可以使用元素节点提供的方法和属性。

修改元素内容

我们可以使用内置的innerHTML属性修改元素内容。例如：

// 获取页面中的段落元素
let p = document.getElementsByTagName("p")[0];

// 修改段落元素内容
p.innerHTML = "这是新的段落内容。";

修改元素样式

我们可以使用内置的style属性修改元素的样式。例如：

// 获取页面中的段落元素
let p = document.getElementsByTagName("p")[0];

// 修改段落元素样式
p.style.color = "red";
p.style.backgroundColor = "yellow";

添加元素

我们可以使用document对象提供的createElement方法创建新的元素节点，然后使用appendChild方法将其添加到文档中。

例如，下面代码创建一个新的<p>元素，并将其添加到文档中：

// 创建新元素
let newP = document.createElement("p");
newP.innerHTML = "新的段落元素。";

// 添加新元素到body元素
let body = document.getElementsByTagName("body")[0];
body.appendChild(newP);

删除元素

我们可以使用元素节点提供的remove方法删除元素。例如：

// 获取页面中的段落元素
let p = document.getElementsByTagName("p")[0];

// 删除段落元素
p.remove();

示例说明

以下是两个使用DOM的示例：

示例1：动态修改页面内容

我们可以使用DOM来动态修改页面内容，例如根据用户输入的内容来动态生成页面。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>动态修改页面内容</title>
  </head>
  <body>
    <input type="text" id="txtName">
    <button onclick="sayHello()">Click me</button>
    <script>
      function sayHello() {
        let name = document.getElementById("txtName").value;
        let p = document.createElement("p");
        p.innerHTML = "Hello, " + name + "!";
        document.body.appendChild(p);
      }
    </script>
  </body>
</html>

用户在文本框中输入名字，点击“Click me”按钮后，页面会动态添加一个新的<p>元素，显示“Hello, name!”的内容。

示例2：使用AJAX获取数据并动态显示

我们可以使用AJAX技术获取远程服务器上的数据，并使用DOM将其动态显示在页面上。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>AJAX动态获取数据</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  </head>
  <body>
    <ul id="dataList">
    </ul>
    <script>
      $.get("https://jsonplaceholder.typicode.com/todos", function(data) {
        for(let i = 0; i < data.length; i++) {
          let item = data[i];
          let li = document.createElement("li");
          li.innerHTML = item.id + ". " + item.title;
          document.getElementById("dataList").appendChild(li);
        }
      });
    </script>
  </body>
</html>

这个例子使用了jQuery库来发送AJAX请求，获取了一个TODO列表的数据，并使用DOM动态将其显示在一个<ul>元素中。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：DOM基础教程之使用DOM - Python技术站

DOM基础教程之使用DOM