使用纯javascript跨浏览器从父元素中按类查找子元素
使用纯javascript跨浏览器从父元素中按类查找子元素
提问于 2013-09-22 20:04:40
下面是我的代码：
<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“的子元素？
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-09-22 20:08:38
将this传递给您的处理程序...
onclick="clickHandler(this)"...and然后为了获得最大的浏览器兼容性，只需查看子节点：
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");
// ...
}Stack Overflow用户
发布于 2013-09-22 20:10:07
只需在div的onclick中使用this.getElementsByClassName('vxf')[0]，就有了元素。参见。
Stack Overflow用户
发布于 2013-09-22 20:08:21
在HTML5中，您可以使用document.querySelector('.vxf')
正如在其他答案中指出的，您也可以使用document.getElementsByClassName('vxf')来满足此特定需求，但是document.querySelector()和document.querySelectorAll()方法允许您提供更复杂的选择器，因此可以为您提供更多功能，因此值得在以后研究。
有关详细信息，请参阅here。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18943636
复制相关文章
相似问题
腾讯云开发者
