本文旨在解决在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操作中非常常用，希望本文能够帮助你更好地理解和应用。在实际开发中，请根据具体情况调整选择器，并注意处理可能出现的空指针异常。
以上就是JavaScript：从子元素的父元素中访问兄弟元素的内容的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1588642.html
微信扫一扫 
支付宝扫一扫 
