在javascript中选择元素和类名答案

【问题标题】：Select element by and classname in javascript在javascript中选择元素和类名
【发布时间】：2010-10-08 04:08:04
【问题描述】：

我有一个 onChange 事件，需要动态选择一个 ID，然后添加一个预设的类名以传递给函数。

onChange = "show(document.getElementById(this.value). {select a class here? } );"

jquery中的等价物

$('#'+this.value+'.myclassname').function();

那么如何在javascript中选择一个ID+类名呢？我知道我很密集。

【问题讨论】：

“我知道我很密集。”让我发笑。不要担心听起来很傻，你已经充分地提出了这个问题。为什么不能只使用 jquery？
我不认为，从一个快速的谷歌，有一种简单的方法可以通过类名找到一个元素，遗憾的是。我绝对建议在这个上坚持使用 jQuery。
不，没错，不走 DOM 是做不到的。不过，我还有另一个问题 - 您是否有多个具有相同 ID 的元素？你不应该（永远！）拥有它，那么为什么不直接使用 getElementById 呢？
好吧，我想我问是因为我很好奇。似乎是一件很简单的事情 - 但谷歌无法帮助我，我想也许我只是没有正确地表达这个问题。但是，是的，我没有意识到我有具有相同 ID 的项目，而且我的小显示功能显然是针对错误的元素......但后来我在想，如果我想的话，我什至如何在 javascript 中按类名选择一个项目...

标签： javascript jquery html dom traversal

【解决方案1】：

您需要使用类名吗？ ID 应该是唯一的。

var element = document.getElementById('myId');

或者说element是父母，你想要一个有班级的孩子

var elements = element.getElementsByTagName('*');

var newElements = [];

for (var i = 0, length = elements.length; i < length; i++) {

    if ((' ' + elements[i].className + ' ').indexOf(' yourClassName ') > -1) {
         newElements.push(elements[i]);
    }
}

这段代码基本上遍历所有孩子，并使用indexOf() 来测试您的班级是否存在。如果找到它，它会将其推送到新数组中。

【讨论】：

【解决方案2】：

来自http://www.anyexample.com/webdev/javascript/javascript_getelementsbyclass_function.xml

function getElementsByClass( searchClass, domNode, tagName) { 
    if (domNode == null) domNode = document;
    if (tagName == null) tagName = '*';
    var el = new Array();
    var tags = domNode.getElementsByTagName(tagName);
    var tcl = " "+searchClass+" ";
    for(i=0,j=0; i<tags.length; i++) { 
        var test = " " + tags[i].className + " ";
        if (test.indexOf(tcl) != -1) 
            el[j++] = tags[i];
    } 
    return el;
} 
getElementsByClass('center', document.getElementById('content'))

【讨论】：