网页设计基础第三十九讲：JavaScript之文档对象模型DOM（三）

TechLearn
1,410 阅读6分钟

本任务的目标是深入了解文档对象模型（DOM），阐明其在网页开发中的重要性，并通过实际示例掌握DOM的操作方法。通过对DOM的了解，可以有效地用JavaScript进行网页交互设计，使网页在用户操作时具有动态变化的效果。

知识回顾

  1. 什么是DOM：  DOM代表文档对象模型，是一个用于HTML和XML文档的编程接口。它将文档表示为一个树形结构，其中每个节点都是文档的一部分，包括元素、属性和文本。通过DOM，开发者可以使用JavaScript等编程语言动态访问和更新网页的内容、结构和样式。

  2. DOM的基本组成：

    • 节点（Node）：  DOM中的基本单位，包含元素节点、文本节点、属性节点等。
    • 文档节点（Document）：  代表整个文档的顶层节点，是DOM树的根节点。
    • 元素节点（Element）：  代表HTML或XML中的标签，例如<div>、<p>等。
    • 文本节点（Text）：  代表元素中的文本内容。

  3. DOM操作：  使用JavaScript可以轻松地对DOM进行操作，主要包括以下几个常用方法：

    • 获取元素：

      • document.getElementById(id)：根据ID获取元素。
      • document.getElementsByClassName(className)：根据类名获取元素集合。
      • document.getElementsByTagName(tagName)：根据标签名称获取元素集合。
      • document.querySelector(selectors)：根据CSS选择器获取匹配的第一个元素。
      • document.querySelectorAll(selectors)：根据CSS选择器获取所有匹配的元素。

    • 创建和添加元素：

      • document.createElement(tagName)：创建新的元素节点。
      • parentNode.appendChild(newNode)：将新节点添加到父节点的末尾。
      • parentNode.insertBefore(newNode, referenceNode)：在参考节点之前插入新节点。

    • 修改元素：

      • element.innerHTML：获取或设置元素的HTML内容。
      • element.style：获取或设置元素的内联样式。
      • element.setAttribute(name, value)：设置元素的属性。

    • 删除元素：

      • parentNode.removeChild(childNode)：从父节点中删除子节点。

任务描述

本案例通过JavaScript的DOM操作，展示了如何构建一个交互式的图书管理网页。用户可以添加、查看和删除书籍，体验DOM带来的页面实时更新能力。通过实际编码，学习者将掌握DOM元素的选择、创建、修改及事件处理等关键技能。

image.png

任务准备

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>图书列表</title>
    <style>
body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
}
h1 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}
.container {
    max-width: 600px;
    margin: 0 auto;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
input[type="text"] {
    width: 45%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
.button-container { 
    text-align: center; /* 按钮容器居中 */
}
button {
    width: 48%;
    padding: 10px;
    margin: 10px 1%;
    border: none;
    border-radius: 4px;
    background-color: #28a745;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
}
button:hover {
    background-color: #218838; /* 悬停效果 */
}
#bookList {
    list-style-type: none;
    padding: 0;
    margin-top: 20px;
}
#bookList li {
    padding: 10px;
    margin: 5px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #e9ecef;
    border-radius: 4px;
    transition: background-color 0.3s;
}
#bookList li:hover {
    background: #d6d8db; /* 悬停效果 */
}
#bookList button {
    background-color: #dc3545;
}
#bookList button:hover {
    background-color: #c82333;
}
    </style>
</head>
<body>
    <h1>图书列表</h1> <!-- 修改标题 -->
    <div class="container">
        <input type="text" id="titleInput" placeholder="书籍名称" />
        <input type="text" id="authorInput" placeholder="作者" />
        <div class="button-container"> <!-- 新增按钮容器 -->
            <button id="addBookBtn">添加书籍</button>
        </div>
        <ul id="bookList"></ul>
    </div>
</body>
</html>

任务实施

1. 设计功能

  • 用户能够输入书籍名称和作者，并点击“添加书籍”按钮。
  • 系统能够将输入的书籍信息添加到列表中并显示。
  • 用户可以点击“删除”按钮，删除已添加的书籍。

2. 实现步骤

// 获取DOM元素
const titleInput = document.getElementById("titleInput");
const authorInput = document.getElementById("authorInput");
const addBookBtn = document.getElementById("addBookBtn");
const bookList = document.getElementById("bookList");

1. 获取 DOM 元素

  • document.getElementById() ：这是一个获取页面中元素的方法，通过元素的 ID 来找到对应的 DOM 元素。
  • titleInput、authorInput、addBookBtn、bookList：这些常量分别对应输入框、按钮和书籍列表的 DOM 元素，后续将通过这些引用进行操作。

2. 添加书籍的函数

function addBook() {
    const title = titleInput.value.trim();
    const author = authorInput.value.trim();

    // 输入验证
    if (title === "" || author === "") {
        alert("书籍名称和作者不能为空！");
        return;
    }

  • 函数 addBook() ：定义了一个函数，用于添加书籍。

  • 获取输入框的值：

    • titleInput.value.trim()：获取书籍名称的输入内容，并使用 trim() 方法去除首尾空格。
    • authorInput.value.trim()：同样操作获取作者名称。

  • 输入验证：

    • 通过 if 语句检查书籍和作者名称是否为空。如果任一字段为空，则弹出警告框提示用户，并使用 return 结束该函数，避免后续的操作。

3. 创建列表项和删除按钮

    // 创建新的列表项
    const li = document.createElement("li");
    li.textContent = `书籍：${title} - 作者：${author}`;

  • 创建新的列表项：

    • document.createElement("li") ：创建一个新的列表项（<li>）元素。
    • li.textContent：将书籍的名称和作者信息填充到新创建的列表项中。使用模板字符串（反引号）创建一个易读的格式。

4. 创建删除按钮

    // 创建删除按钮
    const deleteBtn = document.createElement("button");
    deleteBtn.textContent = "删除";

    deleteBtn.onclick = function() {
        bookList.removeChild(li);
    };

  • 创建删除按钮：

    • document.createElement("button") ：创建一个新的按钮元素。
    • deleteBtn.textContent：设置按钮文本为“删除”。

  • 按钮事件处理：

    • 将一个匿名函数绑定到删除按钮的 onclick 事件。当用户点击该按钮时，该函数将执行。
    • bookList.removeChild(li) ：调用 removeChild 方法从书籍列表中删除对应的列表项，使得用户可以移除不需要的书籍。

5. 添加列表项到书籍列表

    li.appendChild(deleteBtn);
    bookList.appendChild(li);
  • li.appendChild(deleteBtn) ：将删除按钮添加到新创建的书籍列表项中，使其显示在相应的列表项旁边。
  • bookList.appendChild(li) ：将新创建的列表项（包含书籍名称和删除按钮）添加到书籍列表。

6. 清空输入框

    // 清空输入框
    titleInput.value = "";
    authorInput.value = "";
}
  • 清空输入框：在成功添加书籍后，将书籍名称和作者的输入框重置为空字符串，方便用户输入新书籍。

7. 绑定按钮和键盘事件

// 绑定按钮点击事件
addBookBtn.onclick = addBook;

// 支持按回车键添加书籍
titleInput.addEventListener("keypress", function(event) {
    if (event.key === "Enter") {
        addBook();
    }
});
authorInput.addEventListener("keypress", function(event) {
    if (event.key === "Enter") {
        addBook();
    }
});

  • 按钮点击事件：将 addBook 函数绑定到“添加书籍”按钮的点击事件。当按钮被点击时，addBook 函数将被调用，执行上述添加书籍的逻辑。

  • 键盘事件：

    • 使用 addEventListener 方法为书籍名称和作者的输入框添加 keypress 事件监听器。
    • 当用户按下键盘的“Enter”键时（event.key === "Enter"），调用 addBook() 函数，达到输入书籍时可以直接通过回车添加的机制。

实验实训

任务要求：

  1. 创建一个简单的通讯录管理。
  2. 用户可以输入联系人姓名和电话，并将其添加到列表中。
  3. 每个联系人旁边有一个删除按钮，用户可以删除相应的联系人。
  4. 实现列表项的高亮显示效果（在悬停时）。

image.png

avatar
文章
阅读
粉丝