javascript 使用纯javascript跨浏览器从父类中按类查找子元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18943636/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Finding child element by class from parent with pure javascript cross browser
提问by user2799274
Following my code:
按照我的代码：
<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>
How to select the child element with the class "vxf" with pure javascript?
如何使用纯javascript选择类“vxf”的子元素？
回答by T.J. Crowder
Pass thisinto your handler...
传递this给你的处理程序......
onclick="clickHandler(this)"
...and then for maximum browser compatibility, just look in the child nodes:
...然后为了获得最大的浏览器兼容性，只需查看子节点：
function clickHandler(element) {
var child;
for (child = element.firstNode; child; child = child.nextSibling) {
if (child.className && child.className.match(/\bvxf\b/)) {
break; // Found it
}
}
// ...
}
(Or keep looping and build up an array, if you want all matching children.)
（或者继续循环并建立一个数组，如果你想要所有匹配的孩子。）
On most modern browsers, another alternative is to use querySelector(to find the first) or querySelectorAll(to get a list) of matching child elements. Sadly, this requires a bit of a trick:
在大多数现代浏览器上，另一种选择是使用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 = "";
}
// ...
}
We have to play the idgame because we only want direct children (not descendants), and unfortunately you can't use a child combinator without something on the left of it (so element.querySelector("> .vxf");doesn't work).
我们必须玩这个id游戏，因为我们只想要直接的孩子（而不是后代），不幸的是你不能使用没有左边的东西的孩子组合器（所以element.querySelector("> .vxf");不起作用）。
If you didn't care whether it was a direct child or a descendant, then of course it's a lot easier:
如果你不在乎是直子还是后代，那当然要简单很多：
function clickHandler(element) {
var child = element.querySelector(".vxf");
// ...
}
回答by PurkkaKoodari
Just use this.getElementsByClassName('vxf')[0]in the div's onclick, and you have the element. See this fiddle.
只需this.getElementsByClassName('vxf')[0]在div的 onclick 中使用，您就拥有了该元素。看到这个小提琴。
回答by davnicwil
in HTML5 you can use document.querySelector('.vxf')
在 HTML5 中你可以使用 document.querySelector('.vxf')
As pointed out in other answers you can also use document.getElementsByClassName('vxf')for this specific requirement but the document.querySelector()and document.querySelectorAll()methods allow you to provide more complex selectors and therefore give you more power, so worth looking at for future.
正如其他答案中所指出的，您也可以document.getElementsByClassName('vxf')针对此特定要求使用，但是document.querySelector()和document.querySelectorAll()方法允许您提供更复杂的选择器，从而为您提供更多功能，因此值得期待未来。
See herefor more information.
请参阅此处了解更多信息。
