Javascript 在单击另一个元素时检查元素是否具有类并运行函数

香草JS。如果body标记的类为

示例

，则尝试在单击元素时运行函数。请不要使用

jQuery

解决方案，我来自

jQuery

，希望在

JavaScript

中学习和理解这个简单的任务

更重要的是，如果你想让我知道，请问我的思维错误在哪里？是否需要将

onclick

事件包装在body类的条件中

var-imgContainer=document.querySelector（'.img-container'）；
var bodyTag=document.getElementsByTagName（'body'）；
var bodyClassName=bodyTag.classname；
imgContainer.onclick=infoBox；
功能信息框（事件）{
if（bodyTag.classList.contains（“示例”））{
警报（“已单击img-container”）；
}
}

这是来自的虚拟图像https://dummyimage.com/

用于选择主体元素的选择器不合适

getElementsByTagName将提供一个类似数组的对象，因此必须使用index来获取第一个元素

阅读：

您已经在使用querySelector，它返回第一个匹配的元素，对body也要这样做

阅读：

var-imgContainer=document.querySelector（'.img-container'）；
var bodyTag=document.querySelector（'body'）；
var bodyClassName=bodyTag.classname；
imgContainer.onclick=infoBox；
功能信息框（事件）{
if（bodyTag.classList.contains（“示例”））{
警报（'img-container已被单击，主体具有类“示例”）；
}
}

这是来自的虚拟图像https://dummyimage.com/

文档.getElementsByTagName返回一个可作为对象数组访问的数组，您只需在它之后使用

[0]

选择第一个，如以下示例所示：

var-imgContainer=document.querySelector（'.img-container'）；
var bodyTag=document.getElementsByTagName（'body'）[0]；
var bodyClassName=bodyTag.classname；
imgContainer.onclick=infoBox；
功能信息框（事件）{
if（bodyTag.classList.contains（“示例”））{
警报（“已单击img-container”）；
}
}

这是来自的虚拟图像https://dummyimage.com/

var bodyTag=document.getElementsByTagName（'body'）[0]

：或简单地

var bodyTag=document.body

：“返回具有给定标记名的元素的HTMLCollection。”因此

[0]

告诉它查找数组中的第一项，但为什么只有一个

body

标记？我是否需要明确声明我正在元素集合中查找第一个

body

标记，即使集合中只有一个元素？由您决定。我想说这是首选。但您也了解了

document.getElementsByTagName

也是一个集合，这是一件好事。“document.getElementsByTagName返回一个对象数组”–不，它不是真的，它不返回数组。@dfsq它返回一个元素集合，在一个对象中？是的，它是HTMLCollection，但它不是数组。@dfsq它返回一个

实时集合

，其行为类似于数组。实际上，您不会将字符串“Hello world”称为数组，对吗？但是，它的行为就像一个数组，就像

document.getElementsByTagName

一样。因此，最好避免将其称为数组。不管怎样，没什么大不了的，我现在心情很好。干杯如何比较

document.querySelector

与

document.getElementsByTagName（'body'）[0]的使用速度vs.
文档正文
请？我想解释一下为什么我接受了公平的答案。最佳性能将是document.body，因为它不涉及任何选择器解析。在代码中包含所有这些选择器的代码的测试运行链接。谢谢。因为你刚才也非常快地提供了性能链接，所以我选择了你的答案，而你是第一个回答的。