4

按照我的代码：

<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”类的子元素？

4

3 回答 3

16

传递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
        }
    }
    // ...
}

（或者如果你想要所有匹配的孩子，继续循环并建立一个数组。）

在大多数现代浏览器上，另一种选择是使用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");
    // ...
}
于 2013-09-22T12:08:37.657 回答
2

只需this.getElementsByClassName('vxf')[0]在div's onclick 中使用，您就拥有了该元素。看到这个小提琴。

于 2013-09-22T12:10:06.637 回答
1

在 HTML5 中你可以使用document.querySelector('.vxf')

正如在其他答案中指出的那样，您也可以将document.getElementsByClassName('vxf')其用于此特定要求，但是document.querySelector()anddocument.querySelectorAll()方法允许您提供更复杂的选择器，从而为您提供更多功能，因此值得将来关注。

请参阅此处了解更多信息。

于 2013-09-22T12:08:21.200 回答