JavaScript：从子元素的父元素中访问兄弟元素的内容

本文旨在解决在JavaScript中，如何通过子元素的父元素访问其兄弟元素的内容的问题。我们将通过修改选择器，直接在已获取的父元素上使用`querySelector`方法，从而避免不必要的类型转换和错误，实现更简洁高效的代码。本文将提供详细的代码示例和解释，帮助开发者理解和掌握这种常用的DOM操作技巧。

在前端开发中，经常会遇到需要操作DOM元素的情况。其中一个常见的需求是：已知一个元素，需要访问其父元素的兄弟元素。例如，在一个待办事项列表中，点击删除按钮后，需要获取该按钮所在列表项的文本内容，以便从数据中删除对应的任务。

问题在于，直接通过btn.parentElement获取的是一个HTML元素对象，而使用document.querySelector时，传入的是一个CSS选择器字符串。将HTML元素对象直接嵌入到CSS选择器字符串中是不正确的，会导致querySelector无法找到目标元素。

正确的做法是，既然已经有了父元素的引用，可以直接在该父元素上使用querySelector方法，而不需要再次使用全局的document.querySelector。

立即学习“Java免费学习笔记（深入）”；

以下是修改后的代码示例：

腾讯元宝

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

223

查看详情

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");
            }
        });
    });
}

代码解释：

1. btn.parentElement：获取按钮（btn）的父元素，即包含任务信息的列表项（<li>）。
2. btn.parentElement.querySelector('.content')：在父元素（列表项）内部查找类名为content的元素，通常是一个<p>标签，其中包含了任务的文本内容。
3. p.textContent：获取<p>标签内的文本内容。

注意事项：

• 确保目标元素（兄弟元素）存在于父元素中，并且选择器（.content）是正确的。
• querySelector只会返回匹配选择器的第一个元素。如果需要获取所有匹配的元素，可以使用querySelectorAll。
• 如果目标元素不存在，querySelector会返回null，需要进行判空处理，避免出现错误。

总结：

通过直接在已获取的父元素上使用querySelector方法，可以避免不必要的类型转换和错误，使代码更加简洁高效。这种方法在DOM操作中非常常用，希望本文能够帮助你更好地理解和应用。在实际开发中，请根据具体情况调整选择器，并注意处理可能出现的空指针异常。

以上就是JavaScript：从子元素的父元素中访问兄弟元素的内容的详细内容，更多请关注php中文网其它相关文章！