我可以从jQuery将类选择器传递给JavaScript吗？

Question

我拥有超过10,000个div元素的巨大用户界面（我正在进行的实验）。我想找到一个非常快速的选择器方法，应该是非常原始的香草JS。

我的10,000 + div是大容器，其中.b0 - .b123（大数字）类包含较小的img s，每个图像都有一个{ {1}} - .q0

我想知道如果我可以使用我的行以某种方式获取在jQuery事件处理程序中单击的图像的容器.q100：

div

其中document.getElementsByClassName( e.target.className.replace( 'q', 'b' ) )[0]; 将是jQuery事件。

或者会有更快的方式吗？

Answer 1

在Javascript（JQuery是）中，DOM上/下遍历相对简单。

元素可以通过parentNode

访问其父级

element.parentNode

父母可以通过childNodes

访问他们的孩子

element.childNodes

因此，访问图片的父级（图片位于e.target中）将是

e.target.parentNode

Answer 2

文档上的事件委托（或树中包含所需元素的任何其他元素）

这会将一个类添加到单击的img中。

基于你给出的jQuery示例，它看起来像这样

$(document).on("click", "img", function(){
    var img = $(this);
    img.toggleClass("selected");
});

相当于JavaScript的是使用目标

document.body.addEventListener("click", function(evt) {
    var elem = evt.target;
    if (elem.tagName === "img") {
        elem.classList.toggle("selected");
    }
});