本文旨在解决在 JavaScript 中，如何通过子元素的父元素访问其兄弟元素内容的问题。通过示例代码，我们将演示如何利用已有的父元素引用，精准定位并获取目标子元素的内容，避免使用复杂的选择器或循环查找，从而提高代码效率和可维护性。
在开发 Web 应用时，经常需要在 DOM 结构中进行元素之间的查找和操作。例如，在一个待办事项列表中，点击删除按钮后，需要同时从页面和数据列表中移除对应的任务。这通常涉及到获取按钮所在父元素（列表项），然后访问该父元素下的其他子元素（任务内容）。
一个常见的错误做法是尝试将父元素本身作为 CSS 选择器的一部分。例如，使用字符串插值将父元素引用插入到 document.querySelector() 中。这种方法通常会导致错误，因为 querySelector() 期望的是一个 CSS 选择器字符串，而不是一个 DOM 元素对象。
正确的做法是直接在已有的父元素对象上调用 querySelector() 方法。由于已经有了父元素的引用，可以直接使用它来查找特定的子元素，而无需构建复杂的 CSS 选择器。
下面是一个示例：
假设有如下 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>当点击删除按钮时，我们需要获取 p.content 元素的内容。正确的 JavaScript 代码如下：
const deleteButtons = document.querySelectorAll(".delete");
deleteButtons.forEach(button => {
button.addEventListener("click", () => {
// 获取父元素（li.task）
const parentElement = button.parentElement;
// 使用 parentElement.querySelector() 查找子元素
const contentElement = parentElement.querySelector('.content');
// 获取子元素的内容
const taskContent = contentElement.textContent;
console.log("任务内容:", taskContent);
// 从页面上移除列表项
parentElement.remove();
// 从数据列表中移除任务（假设 tasks 是一个任务数组）
// tasks = tasks.filter(task => task.task !== taskContent);
// console.log("更新后的任务列表:", tasks);
});
});代码解释：
- button.parentElement: 获取删除按钮的父元素，即 li.task 元素。
- parentElement.querySelector('.content'): 在父元素内部查找类名为 content 的元素，即 <p class="content"> 元素。
- contentElement.textContent: 获取 p.content 元素的内容，即任务名称。
- parentElement.remove(): 从DOM中移除父元素。
- tasks = tasks.filter(...): (注释部分)使用 filter 方法从 tasks 数组中移除对应的任务对象。注意，这里需要根据实际的任务对象结构进行调整。
注意事项：
- 确保 querySelector() 方法的参数是一个有效的 CSS 选择器。
- 如果父元素下不存在指定的子元素，querySelector() 方法会返回 null。在使用子元素内容之前，应该先检查其是否为 null，避免出现错误。
- 如果父元素下有多个符合条件的子元素，querySelector() 方法只会返回第一个匹配的元素。如果需要获取所有匹配的元素，可以使用 querySelectorAll() 方法。
总结：
通过已有的父元素引用，可以直接使用 querySelector() 方法查找子元素，这是一种高效且简洁的方法。避免将父元素引用直接用于构建 CSS 选择器，可以有效避免错误，提高代码的可读性和维护性。 在实际开发中，应根据具体的 DOM 结构和需求，灵活运用各种 DOM 操作方法，以实现最佳的性能和用户体验。
