从子元素的父元素中获取另一个子元素的内容-html教程-PHP中文网

从子元素的父元素中获取另一个子元素的内容

花韻仙語

发布： 2025-10-25 11:00:11

原创

624人浏览过

从子元素的父元素中获取另一个子元素的内容

本文旨在解决从一个元素的父元素中访问其兄弟元素内容的问题，尤其是在动态生成的列表项中删除特定任务时。我们将探讨如何通过已知的子元素（如删除按钮）定位到其父元素，并准确获取目标兄弟元素（包含任务内容）的内容，从而实现对数据的高效操作。

在Web开发中，经常需要操作DOM元素，特别是当页面结构动态生成时。一个常见的场景是，当用户点击一个元素（比如删除按钮）时，需要访问其父元素下的其他子元素，例如获取列表项中的任务内容。本文将详细介绍如何通过JavaScript实现这一功能，并提供一个实际的待办事项列表的例子。

获取兄弟元素内容的方法

假设我们有如下HTML结构：

<li class="task">
  <div class="left">
    <input type="checkbox" class="box" />
    <p class="content">待办事项内容</p>
  </div>
  <button class="btn delete">
    <i class="fa-solid fa-trash-can"></i>
  </button>
</li>

登录后复制

我们的目标是，当点击.delete按钮时，获取.content元素中的文本内容。以下是一种实现方法：

获取父元素引用: 首先，通过event.target.parentElement或直接使用已知的父元素引用（如btn.parentElement）获取到父元素（.task）。
使用querySelector定位兄弟元素: 然后，使用parentElement.querySelector('.content')在父元素内部查找类名为.content的元素。
获取文本内容: 最后，通过.textContent或.innerText属性获取该元素的文本内容。

腾讯元宝
腾讯混元平台推出的AI助手

223

查看详情

以下是修改后的deleteBtn函数示例：

function deleteBtn() {
    deleteHTML.forEach(btn => {
        btn.addEventListener("click", () => {
            console.log("delete");
            btn.parentElement.style.display = "none";

            // 正确获取.content元素
            let p = btn.parentElement.querySelector('.content');
            console.log(p.textContent); // 输出：待办事项内容

            // 在此处可以进行后续操作，如从tasks数组中删除对应的任务

            if (tasks.length < 1) {
                console.log("remove background");
                tasksHTML.classList.remove("background");
            }
        });
    });
}

登录后复制

代码解释：

btn.parentElement.querySelector('.content')：这行代码首先获取btn（删除按钮）的父元素，然后使用querySelector在该父元素内部查找类名为.content的元素。
p.textContent：这行代码获取找到的.content元素的文本内容。

完整示例：待办事项列表

以下是一个完整的待办事项列表示例，包含添加、删除任务的功能：

<!DOCTYPE html>
<html>
<head>
    <title>待办事项列表</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        .tasks {
            list-style: none;
            padding: 0;
        }

        .task {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            border-bottom: 1px solid #eee;
        }

        .left {
            display: flex;
            align-items: center;
        }

        .content {
            margin-left: 10px;
        }

        .delete {
            background-color: #f44336;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>待办事项列表</h1>
    <form>
        <input type="text" class="task-input" placeholder="添加新任务">
        <button type="submit" class="submit">添加</button>
    </form>
    <ul class="tasks"></ul>

    <script>
        var tasks = [];
        const form = document.querySelector("form");
        const formInput = document.querySelector(".task-input");
        const tasksHTML = document.querySelector(".tasks");

        form.addEventListener("submit", (event) => {
            event.preventDefault(); // 阻止表单默认提交行为
            const taskText = formInput.value.trim();
            if (taskText !== "") {
                addTask(taskText);
                formInput.value = "";
            }
        });

        function addTask(taskText) {
            const task = {
                id: Date.now(), // 使用时间戳生成唯一ID
                text: taskText,
                done: false
            };
            tasks.push(task);
            renderTasks();
        }

        function renderTasks() {
            tasksHTML.innerHTML = ""; // 清空列表
            tasks.forEach(task => {
                const li = document.createElement("li");
                li.classList.add("task");
                li.innerHTML = `
                    <div class="left">
                        <input type="checkbox" class="box" ${task.done ? 'checked' : ''} data-id="${task.id}" />
                        <p class="content">${task.text}</p>
                    </div>
                    <button class="btn delete" data-id="${task.id}">
                        <i class="fa-solid fa-trash-can"></i>
                    </button>
                `;
                tasksHTML.appendChild(li);
            });

            // 添加删除按钮事件监听器
            const deleteButtons = document.querySelectorAll(".delete");
            deleteButtons.forEach(button => {
                button.addEventListener("click", () => {
                    const taskId = parseInt(button.dataset.id);
                    deleteTask(taskId);
                });
            });

            // 添加复选框事件监听器
            const checkboxes = document.querySelectorAll(".box");
            checkboxes.forEach(checkbox => {
                checkbox.addEventListener("change", () => {
                    const taskId = parseInt(checkbox.dataset.id);
                    toggleTask(taskId);
                });
            });
        }

        function deleteTask(taskId) {
            tasks = tasks.filter(task => task.id !== taskId);
            renderTasks();
        }

        function toggleTask(taskId) {
            tasks = tasks.map(task => {
                if (task.id === taskId) {
                    task.done = !task.done;
                }
                return task;
            });
            renderTasks();
        }

        renderTasks(); // 初始渲染
    </script>
</body>
</html>

登录后复制

注意事项：

避免硬编码选择器: 尽量避免在JavaScript代码中硬编码CSS选择器。如果HTML结构发生变化，代码可能需要修改。
使用事件委托: 如果列表项是动态添加的，使用事件委托可以提高性能。将事件监听器添加到父元素上，然后根据事件目标来确定要操作的元素。
唯一标识符: 为每个列表项添加一个唯一的标识符（例如ID），方便在数据结构中查找和删除对应的任务。在上面的示例中，我们使用Date.now()生成唯一的ID。
数据同步: 确保DOM结构和数据结构（例如tasks数组）保持同步。在删除或修改任务时，同时更新DOM和数据结构。

总结

本文介绍了如何通过JavaScript从一个元素的父元素中获取另一个子元素的内容。通过获取父元素引用，并使用querySelector方法，可以方便地定位到目标子元素，并获取其文本内容。在实际应用中，需要注意避免硬编码选择器、使用事件委托、使用唯一标识符以及保持DOM结构和数据结构同步。通过这些技巧，可以更有效地操作DOM元素，构建动态和交互性强的Web应用程序。

以上就是从子元素的父元素中获取另一个子元素的内容的详细内容，更多请关注php中文网其它相关文章！