如何通过类名获取子元素？

IT技术 javascript yui
2021-03-17 19:54:49

我正在尝试获取具有 class = 4 的子跨度。这是一个示例元素：

<div id="test">
 <span class="one"></span>
 <span class="two"></span>
 <span class="three"></span>
 <span class="four"></span>
</div>

我可用的工具是 JS 和 YUI2。我可以做这样的事情：

doc = document.getElementById('test');
notes = doc.getElementsByClassName('four');

//or

doc = YAHOO.util.Dom.get('#test');
notes = doc.getElementsByClassName('four');

这些在 IE 中不起作用。我收到一个错误，指出对象 (doc) 不支持此方法或属性 (getElementsByClassName)。我已经尝试了几个 getElementsByClassName 跨浏览器实现的例子，但我无法让它们工作并且仍然得到那个错误。

我想我需要的是跨浏览器 getElementsByClassName 或者我需要使用 doc.getElementsByTagName('span') 并循环直到找到第 4 类。不过我不知道该怎么做。

6个回答

使用 querySelector 和 querySelectorAll

var testContainer = document.querySelector('#test');
var fourChildNode = testContainer.querySelector('.four');

IE9及以上

在caniuse.com检查兼容性
2021-04-27 19:54:49
为了得到我们需要使用的所有孩子 var fourChildNode = testContainer.querySelectorAll('.four');
2021-04-29 19:54:49
这会检查所有后代，而不仅仅是孩子。
2021-05-07 19:54:49
@SUM1如果你不关心 IE，你可以使用 CSS 伪元素:scope来检查这样的直接后代：testContainer.querySelector(':scope > .four')
2021-05-09 19:54:49

使用doc.childNodes通过每个迭代span，然后筛选其一个className等号4：

var doc = document.getElementById("test");
var notes = null;
for (var i = 0; i < doc.childNodes.length; i++) {
    if (doc.childNodes[i].className == "4") {
      notes = doc.childNodes[i];
      break;
    }        
}

​

@FranVerona 出于好奇，简单的“indexOf('className') > -1”不能解决多类问题吗？
2021-04-24 19:54:49
@JamesPoulose，它不会。考虑将一个元素设置为两个类：小和大。thatElement.className 将返回一个等于“小更大”的字符串。如果你正在寻找一个名为 big 的类，说 myElement.className.indexOf("big") 会产生不等于负 1 的东西，尽管它实际上不是类的一部分。如果您对类名有 100% 的控制权，那么这样的修复会起作用，只是不能保证，尤其是当您编写的代码将与您无法完全控制的代码进行交互时。
2021-04-25 19:54:49
问题是 getElementsByClassName 在 IE8 中不起作用。
2021-05-02 19:54:49
如果元素具有多个类，则此代码不起作用。例如：如果您正在寻找具有“一”类的元素，而您的元素具有“一二三”类，则此函数将找不到它们。
2021-05-02 19:54:49
您应该className像这样使用正则表达式匹配：if(doc.childNode[i].className.match("\s*" + search_class + "\s*")其中变量search_class是您要查找的类名。
2021-05-07 19:54:49

接受的答案只检查直接的孩子。很多时候，我们正在寻找具有该类名的任何后代。

此外，有时我们想要任何包含className 的孩子。

例如：<div class="img square"></div>应该匹配对 className "img" 的搜索，即使它的确切className 不是 "img"。

这是针对这两个问题的解决方案：

查找具有该类的后代元素的第一个实例 className 

   function findFirstChildByClass(element, className) {
        var foundElement = null, found;
        function recurse(element, className, found) {
            for (var i = 0; i < element.childNodes.length && !found; i++) {
                var el = element.childNodes[i];
                var classes = el.className != undefined? el.className.split(" ") : [];
                for (var j = 0, jl = classes.length; j < jl; j++) {
                    if (classes[j] == className) {
                        found = true;
                        foundElement = element.childNodes[i];
                        break;
                    }
                }
                if(found)
                    break;
                recurse(element.childNodes[i], className, found);
            }
        }
        recurse(element, className, false);
        return foundElement;
    }
仔。你的评论是必要的。很高兴我帮助了其他 13 个人（像我一样）经常寻找类似的答案来解决他们类似但可能更复杂或更普遍的问题。
2021-04-23 19:54:49
不。我不想要所有的后代，只想要这个问题的孩子。
2021-05-05 19:54:49
tnx，我认为这个答案适合更多用例
2021-05-12 19:54:49
作为记录，我有两个用例，后代用例稍微多一点，但我来这里是为了子用例。
2021-05-14 19:54:49

使用 element.querySelector()。让我们假设： 'myElement' 是您已经拥有的父元素。'sonClassName' 是您正在寻找的孩子的class。

let child = myElement.querySelector('.sonClassName');

更多信息，请访问：https : //developer.mozilla.org/en-US/docs/Web/API/Element/querySelector

但是你必须在类名 querySelector('.sonClassName') 旁边添加点，否则它会处理它，因为sonClassName是一个标签名而不是一个类名
2021-05-14 19:54:49
出于某种原因，我不得不let child = myElement.querySelector('sonClassName');在我的情况下使用
2021-05-18 19:54:49

现代解决方案

const context = document.getElementById('context');
const selected = context.querySelectorAll(':scope > div');

文件

其它你可能感兴趣的问题
上一篇如何为 svg 路径的渐进式绘图设置动画？ 下一篇如何在函数内清除此 setInterval？