本文旨在解决在JavaScript中，如何通过子元素的父元素访问其兄弟元素的内容的问题。我们将通过修改选择器，直接在已获取的父元素上使用`querySelector`方法，从而避免不必要的类型转换和错误，实现更简洁高效的代码。本文将提供详细的代码示例和解释，帮助开发者理解和掌握这种常用的DOM操作技巧。
在前端开发中，经常会遇到需要操作DOM元素的情况。其中一个常见的需求是：已知一个元素，需要访问其父元素的兄弟元素。例如，在一个待办事项列表中，点击删除按钮后，需要获取该按钮所在列表项的文本内容，以便从数据中删除对应的任务。
问题在于，直接通过btn.parentElement获取的是一个HTML元素对象，而使用document.querySelector时，传入的是一个CSS选择器字符串。将HTML元素对象直接嵌入到CSS选择器字符串中是不正确的，会导致querySelector无法找到目标元素。
正确的做法是，既然已经有了父元素的引用，可以直接在该父元素上使用querySelector方法，而不需要再次使用全局的document.querySelector。
立即学习“Java免费学习笔记（深入）”；
以下是修改后的代码示例：
function deleteBtn() {
deleteHTML.forEach(btn => {
btn.addEventListener("click", () => {
console.log("delete");
btn.parentElement.style.display = "none";
// 正确的写法：直接在父元素上使用querySelector
let p = btn.parentElement.querySelector('.content');
console.log(p.textContent); // 打印兄弟元素的文本内容
// let index = tasks.indexOf()
console.log(tasks.length, "length");
if (tasks.length < 1) {
console.log("remove background");
tasksHTML.classList.remove("background");
}
});
});
}代码解释：
- btn.parentElement：获取按钮（btn）的父元素，即包含任务信息的列表项（
- ）。
- btn.parentElement.querySelector('.content')：在父元素（列表项）内部查找类名为content的元素，通常是一个
标签，其中包含了任务的文本内容。
- p.textContent：获取
标签内的文本内容。
注意事项：
- 确保目标元素（兄弟元素）存在于父元素中，并且选择器（.content）是正确的。
- querySelector只会返回匹配选择器的第一个元素。如果需要获取所有匹配的元素，可以使用querySelectorAll。
- 如果目标元素不存在，querySelector会返回null，需要进行判空处理，避免出现错误。
总结：
通过直接在已获取的父元素上使用querySelector方法，可以避免不必要的类型转换和错误，使代码更加简洁高效。这种方法在DOM操作中非常常用，希望本文能够帮助你更好地理解和应用。在实际开发中，请根据具体情况调整选择器，并注意处理可能出现的空指针异常。
