从父元素中访问子元素内容的方法-html教程-PHP中文网

从父元素中访问子元素内容的方法

DDD

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

原创

764人浏览过

从父元素中访问子元素内容的方法

本文旨在解决如何通过删除按钮的父元素访问其兄弟元素内容的问题。在构建待办事项应用时，删除列表项需要同时从页面和数据列表中移除。本文将提供正确的DOM操作方法，避免不必要的循环和潜在的错误删除，确保数据一致性。通过修改选择器用法，可以直接获取目标子元素的内容，实现精确删除。

在Web开发中，经常需要操作DOM元素，特别是处理父子元素关系时。本教程将重点介绍如何从一个元素的父元素访问其兄弟元素的内容，并提供一个实际的待办事项应用场景作为示例。

问题描述

假设你有一个待办事项列表，每个列表项包含一个复选框、任务内容和一个删除按钮。当用户点击删除按钮时，你不仅需要从页面上移除该列表项，还需要从JavaScript维护的任务列表中删除对应的任务对象。

直接通过btn.parentElement可以访问到删除按钮的父元素（即

元素），但是如何进一步访问到包含任务内容的

元素呢？

解决方案

错误的做法是尝试将父元素直接放入CSS选择器中，例如：

let p = document.querySelector(`${btn.parentElement} .content`); // 错误

登录后复制

这种写法会将btn.parentElement转换为字符串"[object HTMLLIElement]"，导致选择器失效，无法找到目标元素。

正确的做法是利用已有的父元素引用，使用querySelector方法在其内部进行查找：

吐司AI

超多功能的免费在线生图网站！拥有全网更齐全的模型库，0门槛使用！

325

查看详情

let p = btn.parentElement.querySelector('.content'); // 正确

登录后复制

这段代码首先获取删除按钮的父元素（

），然后使用querySelector('.content')在该父元素下查找类名为content的元素（即包含任务内容的

元素）。这样就能准确地获取到目标元素。

完整示例

以下是修改后的deleteBtn函数：

function deleteBtn() {
    deleteHTML.forEach(btn => {
        btn.addEventListener("click", () => {
            console.log("delete");
            btn.parentElement.style.display = "none"; // 从页面隐藏

            let p = btn.parentElement.querySelector('.content'); // 获取任务内容元素
            let taskContent = p.textContent; // 获取任务内容

            // 从 tasks 数组中删除对应的任务对象
            tasks = tasks.filter(task => task.task !== taskContent);
            console.log(tasks);

            console.log(tasks.length, "length");

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

登录后复制

在这个修改后的函数中，我们首先使用btn.parentElement.querySelector('.content')获取到包含任务内容的

元素，然后通过p.textContent获取到任务的具体内容。接下来，使用tasks.filter方法从tasks数组中移除与该内容匹配的任务对象。