如何用JavaScript进行DOM操作

DebugUsery
85 阅读4分钟

用JavaScript进行DOM操作

文档对象模型（DOM）是一个树状结构，显示了不同HTML元素之间的层次关系。根据w3.org ，DOM可以被称为HTML和XML文档的编程API。它定义了文档的逻辑结构以及访问和操作文档的方式。

例如，我们可以有一个<ul> 标签，在这种情况下，它可以是父标签，里面有多个<li> 标签，作为子标签。body标签也可以作为祖先标签，以此类推。

使用JavaScript，我们可以很容易地操纵DOM，使我们的网页变得生动。本教程的重点是在DOM中添加一个元素，用JavaScript从DOM中删除元素。

在本教程结束时，你将掌握使用JavaScript与DOM交互所需的工具。

前提条件

要继续学习本教程，需要对HTML和JavaScript有基本的了解。

第1步--待办事项列表前页

在本节中，我们将建立一个简约的待办事项列表首页，这样我们就可以直观地看到我们将在未来章节中解释的内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <title>DOM manipulation with JavaScript</title>
  </head>
  <body>
    <div class="container">
      <h1>My Daily Task:</h1>
      <hr />
      <ul>
        <li class="todo">Sweep the floor</li>
        <li class="todo">Polish my armor</li>
        <li class="todo">Empty the trash</li>
      </ul>

      <input type="text" name="" class="form-control" id="userInput" />
      <br />
      <button
        class="btn btn-outline-secondary"
        style="width: 100%;"
        id="button"
      >
        Add New Task
      </button>
    </div>
  </body>
</html>

在一个空的文件夹中打开一个新文件，命名为index.html ，并添加上面的HTML代码。保存它，然后用你喜欢的浏览器打开它。

你应该看到以下内容。

home_page_screenshot

第2步--了解DOM

为了理解DOM，让我们为我们的HTML页面绘制结构。

dom_example

这个结构并不是对我们的HTML页面的完整捕捉，但它显示了DOM的一个详细例子。由于我们的网页没有完全加载，浏览器为该网页创建了这种结构。

通过JavaScript，我们可以很容易地修改DOM，改变样式，添加HTML属性等等。我们将在下面的章节中对它们进行考察。

想了解更多关于DOM的信息？请看《理解文档对象模型》一文。

第3步 - 在DOM中添加一个元素

如果我们能通过我们的表单添加额外的任务，并将它们插入我们的HTML列表元素中，那就太棒了。这就是我们如何在JavaScript中做到这一点。

<script>
  // Get Access to the button
  let button = document.querySelector("#button");

  // Get Access to the ul tag (the parent of the li tag)
  let todoWrapper = document.querySelector(".todo-wrapper");

  // OnSubmit Add New Task To The DOM
  button.addEventListener("click", () => {
    // Get User Input
    let userInput = document.querySelector("#userInput").value;

    if (userInput.length > 5) {
      // Create a new li tag
      let li = document.createElement("li");

      // Add a class name of todo to the li tag
      li.className = "todo";

      // Create a Text Node from user input
      let node = document.createTextNode(userInput);

      // Append node to li
      li.appendChild(node);

      // Append li to ul
      todoWrapper.appendChild(li);

      // Empty user Input
      document.querySelector("#userInput").value = "";
    } else {
      alert("Todo's can't be less than 5 characters :)");
    }
  });
</script>

在你的HTML页面中，在关闭body标签之前添加以下代码。

这里发生了什么？

  • 我们添加了一个事件监听器，监听提交按钮上的一个点击事件
  • 如果按钮被点击了，我们就创建一个新的li 标签
  • 我们还从用户的输入中创建了一个新的文本节点
  • 最后，我们将li （子节点）附加到ul （父节点）上。

它是如何工作的？

要在DOM中插入一个新元素，我们需要两件事。首先，这里的父节点将是我们的ul 标签，然后是子节点，在这里将是li 标签。我们只能通过在父节点上调用appendChild 函数将子节点附加到父节点上。

尝试添加一些任务。

第4步 - 从DOM中删除元素

如果我们可以删除一个已经完成的任务，那就更好了。

让我们来添加这个功能。

<script>
  document.querySelector(".todo-wrapper").addEventListener("click", (e) => {
    if (e.target.className === "todo") {
      let msg = confirm(
        `Are you sure you want to delete \n ${e.target.innerText}`
      );

      if (msg == true) {
        document.querySelector(".todo-wrapper").removeChild(e.target);
      }
    }
  });
</script>

在你的HTML页面中，在关闭body标签之前添加以下代码。

这里发生了什么？

  1. 我们添加了一个事件监听器，监听每个任务的点击事件。
  2. 然后，我们使用if语句检查任务是否被点击了
  3. 最后，我们在警告用户确认后删除被点击的任务。

它是如何工作的？

要从DOM中删除一个新元素，我们需要两件事。首先，这个上下文中的父节点将是我们的ul 标签，然后这个上下文中的子节点（s）将是li 标签。我们只能通过调用removeChild 函数并将子节点作为参数来删除父节点的子节点。

试着删除一些任务。

结论

很高兴你已经到了本教程的结尾。在本教程中，我们看到了如何使用JavaScript来操作DOM。在这个过程中，我们创建了一个待办事项列表的应用程序，具有添加任务和删除任务的能力。

通过这些工具，我们使我们的网页变得更有互动性，从而使它变得更加生动。

avatar
文章
阅读
粉丝