使用原始javascript在DOM中通过其class属性查找元素,而不使用id

Question

好.我突然想到了这个问题.

像jQuery这样的库使得查找具有某些元素的元素变得非常容易class.它不会强迫我们id对要找到的元素应用.在Vanilla js中,我们可以选择使用getElementById()强制我在很大程度上应用ID 的方法找出元素.

我查看了这个解决方案,找到一个使用属性的元素,在这种情况下将会是这样class.在完成解决方案后,我发现浏览器非常繁重.如果我有一个复杂的DOM结构,它将会降低性能.我的问题仍然是一样的.

如何在Vanilla Javascript中使用class name和不使用元素id？

Answer 1

怎么样

var elems = document.getElementsByClassName('someclass');

这将返回一组具有给定类的元素.然后elems[0],您可以使用,elems[1]等等访问它们.

请记住,jQuery最终基于JavaScript,因此从执行的角度来看,它不会更快.

您可能会在这里找到一些有趣的jQuery to JavaScript翻译

http://vanilla-js.com/

对于旧版本的IE,您需要使用getElementsByTagName并循环返回的元素.此实用程序功能应该从IE6开始兼容(可能与您链接的解决方案类似)

function getElementsByAttributeValue(atrName,atrValue) {
    var matchElems = [];

    var allElems = document.getElementsByTagName('*');
    for(var x = 0, len = allElems.length; x < len; x++) {
        if(allElems[x].getAttribute(atrName) != atrValue) {
            continue;
        }

        matchElems.push(allElems[x]);
    }

    return matchElems;
}

用法是:

var elems = getElementsByAttributeValue("class","someclass");