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");不会不行。）

如果你不关心它是直接的孩子还是后代，那么当然它会容易得多：

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

Answer 2

只需在this.getElementsByClassName('vxf')[0]的onclick中使用div即可获得该元素。请参阅 this fiddle 。

Answer 3

HTML5中的

可以使用document.querySelector('.vxf')

正如其他答案中所指出的，您也可以使用document.getElementsByClassName('vxf')来满足此特定要求，但document.querySelector()和document.querySelectorAll()方法可让您提供更复杂的选择器，从而为您提供更多功能，所以值得期待未来。

有关详细信息，请参阅here。

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

3 个答案: