原创投稿
  1. 创想鸟首页
  2. 用户投稿

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

程序猿 • • 用户投稿

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

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

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

获取兄弟元素内容的方法

假设我们有如下HTML结构：

  •   
            
    待办事项内容

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

    获取父元素引用: 首先，通过event.target.parentElement或直接使用已知的父元素引用（如btn.parentElement）获取到父元素（.task）。

    使用querySelector定位兄弟元素: 然后，使用parentElement.querySelector(‘.content’)在父元素内部查找类名为.content的元素。

    获取文本内容: 最后，通过.textContent或.innerText属性获取该元素的文本内容。

    以下是修改后的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元素的文本内容。

    完整示例：待办事项列表

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

        待办事项列表                .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;        }        
    待办事项列表
                                
                  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 = `                    
                                                      
      ${task.text}
                          
                                          `;                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(); // 初始渲染

      注意事项：

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

      总结

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

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

      版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
      如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
      发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1588548.html

      赞 (0)
      打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
      0 0

      关于作者

      程序猿的头像

      程序猿签约作者

      413.8K 文章
      0 评论
      2 粉丝
      这个人很懒，什么都没有留下～
      条件加载CSS：利用onerror实现样式文件故障回退机制
      上一篇 2025年12月23日 04:22:04
      HTML5 标签：纯音频文件播放的兼容性与标准解析
      下一篇 2025年12月23日 04:22:11

      相关推荐

      发表回复

      登录后才能评论
      关注微信