Question

Vanilla JS。如果body标签的类为example，则尝试在单击元素时运行函数。请不要jQuery解决方案，我来自jQuery，希望在JavaScript中学习并理解这个简单的任务。

更多如果你想让我知道，我的想法中的错误在哪里？我是否需要将onclick事件包含在body类的条件中？ Tried that but also not getting the alert

＆＃13;

    var imgContainer = document.querySelector('.img-container');

    var bodyTag = document.getElementsByTagName('body');

    var bodyClassName = bodyTag.classname;

    imgContainer.onclick = infoBox;

    function infoBox(event) {

      if (bodyTag.classList.contains("example")) {

        alert('img-container has been clicked');

      }
    }

＆＃13;

<body class="example">
  <div class="img-container">
    <img src="https://dummyimage.com/320x120/000/fff" alt="dummy image">
    <div class="img-infobox">
      <p>This is a dummy image from https://dummyimage.com/</p>
    </div>
  </div>
</body>

＆＃13;

修改
从给定的答案我认为，而不是返回像对象一样的数组并查询DOM，它只是document.body最快。没有？

这就意味着这个问题与

无关

What do querySelectorAll, getElementsByClassName and other getElementsBy* methods return?

因为https://stackoverflow.com/users/949476/dfsq的评论提供的答案都没有使用链接答案中的方法。

同时
如何比较document.querySelector与document.getElementsByTagName('body')[0];与document.body的使用速度？

想要解释为什么我接受了什么答案是公平的，因为所有答案都提供了有效的解决方案。

答案
由于所有答案都有用document.body is fastest，但出于其他原因，我想在此处发布答案。

我正在使用"4 novel ways to deal with sticky :hover effects on mobile devices"中的此脚本来处理粘滞悬停问题。这样，一个类就会添加到网站的html标记中。

首先我在条件中使用了click函数来检查body或html类，并且只有在满足类时才触发click函数，但是使用这个脚本我必须首先运行该函数并且只运行一次运行检查html / body是否具有所需的类。

所以，而

  if (bodyTag.classList.contains("example")) {

    imgContainer.onclick = infoBox;

    function infoBox(event) {
        alert('img-container has been clicked and body has class "example"');    
    }

以及

var bodyClassName = bodyTag.classname;

imgContainer.onclick = infoBox;

function infoBox(event) {

  if (bodyTag.classList.contains("example")) {

    alert('img-container has been clicked');

  }
}

在纯JSFiddle中工作，它不能使用此设置，因为粘性悬停脚本一旦触摸就会在元素上设置所需的类。

因此，一旦点击（我假设），那么检查此触摸/点击/点击事件之外的条件已经太晚了，因此它不会被激发。

最后，这导致这些简单的线条与粘滞的悬停脚本一起很好地协同工作。必须先运行click事件，然后检查所需的类/条件。

var imgContainer = document.querySelector('.img-container');

imgContainer.onclick = infoBox;

function infoBox(){

    if (document.documentElement.classList.contains('can-touch')) {
        alert('click on touch');
    }
}

Answer 1

用于选择body元素的Selector不合适。

getElementsByTagName将给出一个类似于object的数组，因此您必须使用index来获取第一个元素。

阅读：https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName

你已经在使用querySelector返回第一个匹配的元素，对body也一样。

阅读：https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

var imgContainer = document.querySelector('.img-container');

var bodyTag = document.querySelector('body');

var bodyClassName = bodyTag.classname;

imgContainer.onclick = infoBox;

function infoBox(event) {

  if (bodyTag.classList.contains("example")) {
  
    alert('img-container has been clicked and body has class "example"');
    
  }
}

<body class="example">

  <div class="img-container">
    <img src="https://dummyimage.com/320x120/000/fff" alt="dummy image">
    <div class="img-infobox">
      <p>This is a dummy image from https://dummyimage.com/</p>
    </div>
  </div>

</body>

绩效比较：https://jsperf.com/body-selector-comparision

Answer 2

document.getElementsByTagName返回一个HTMLCollection，可以作为一个对象数组进行访问，您只需要使用[0]之后选择第一个，如下例所示：

＆＃13;

var imgContainer = document.querySelector('.img-container');

    var bodyTag = document.getElementsByTagName('body')[0];

    var bodyClassName = bodyTag.classname;

    imgContainer.onclick = infoBox;

    function infoBox(event) {

      if (bodyTag.classList.contains("example")) {

        alert('img-container has been clicked');

      }
    }

＆＃13;

<body class="example">
  <div class="img-container">
    <img src="https://dummyimage.com/320x120/000/fff" alt="dummy image">
    <div class="img-infobox">
      <p>This is a dummy image from https://dummyimage.com/</p>
    </div>
  </div>
</body>

＆＃13;

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

2 个答案: