原生javascript中的事件和选择器

Question

这个jQuery依赖代码怎么样？

$('.myElement').click(function () {
  drawMode = !drawMode;
  $icon = $(this).children('i');
  if (drawMode) {
    $icon.removeClass('a').addClass('b');
  } else {
    $icon.removeClass('b').addClass('a');
  }
});

被重写为原生javascript？

我试过了

var element = document.getElementsByClassName('myElement')[0];    
element.addEventListener('click', function (e) {
  drawMode = !drawMode;
  var icon = this.children()[0];
  if (drawMode) {
    icon.classList.remove('a').add('b');
  } else {
    icon.classList.remove('b').add('a');
  }
});

但我无法正确找到儿童元素.

Answer 1

jQuery children允许你通过选择器进行过滤,这不是在DOM API中的(你可以找到匹配给定CSS选择器的所有后代,但是你现在不能将它限制为仅仅是孩子).

如果无论是孩子还是任何后代都无关紧要,那么:

var icon = this.querySelector("i");

它在元素中找到元素的第一个后代i.我怀疑这对你来说会很好.唯一的一次,如果你有这个可能不会:

<div class="myElement">
    <span>
        <i>You DON'T want this one</i>
    </span>
    <i>You do want this one</i>
</div>

如果是这种情况,你需要只看孩子,而不是所有的后代,你需要一个循环:

var icon = null;
var n;
for (n = 0; n < !icon && this.children.length; ++n) {
    if (this.children[n].tagName.toLowerCase() === "i") {
        icon = this.children[n];
    }
}

在ES2015 +(你可以在今天使用它),这是如此整洁:

let icon = Array.from(this.children)
                .find(child => child.tagName.toLowerCase() === "i");