javascript - 使用纯javascript跨浏览器从父级按类查找子元素

Question

按照我的代码:

<div onclick="/*Here I would like to select the child element with the class 'vxf'*/">
   <div class="abc"></div>
   <div class="cir"></div>
   <!--... other elements-->
   <div class="vxf"></div>
   <!--... other elements-->
</div>
<div onclick="/*Here I would like to select the child element with the class 'vxf'*/">
   <div class="abc"></div>
   <div class="cir"></div>
   <!--... other elements-->
   <div class="vxf"></div>
   <!--... other elements-->
</div>

如何用纯javascript选择“vxf”类的子元素？

Answer 1

将this传递到您的处理程序中...

onclick="clickHandler(this)"

...然后为了获得最大的浏览器兼容性，只需查看子节点:

function clickHandler(element) {
    var child;
    for (child = element.firstNode; child; child = child.nextSibling) {
        if (child.className && child.className.match(/\bvxf\b/)) {
            break; // Found it
        }
    }
    // ...
}

(或者如果您想要所有匹配的子项，则继续循环并构建一个数组。)

关于most modern browsers ，另一种选择是使用 querySelector (找到第一个)或 querySelectorAll (获取列表)匹配的子元素。遗憾的是，这需要一些技巧:

function clickHandler(element) {
    var child, needsId;
    needsId = !element.id;
    if (needsId) {
        element.id = "TEMPID____" + (new Date()).getTime();
    }
    child = document.querySelector("#" + element.id + " > .vxf");
    if (needsId) {
        element.id = "";
    }
    // ...
}

我们必须玩id游戏，因为我们只想要直接子代(而不是后代)，不幸的是，你不能使用左边没有东西的子组合器(所以 element.querySelector("> .vxf"); 不起作用)。

如果你不关心它是直系 child 还是后代，那么当然容易得多:

function clickHandler(element) {
    var child = element.querySelector(".vxf");
    // ...
}