javascript 如何通过类名获取元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17965956/
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
How to get element by class name?
提问by TDHM
Using JavaScript, we can get element by id using following syntax:
使用 JavaScript，我们可以使用以下语法通过 id 获取元素：
var x=document.getElementById("by_id");
I tried following to get element by class:
我尝试按类获取元素：
var y=document.getElementByClass("by_class");
But it resulted into error:
但它导致了错误：
getElementByClass is not function
How can I get an element by its class?
如何通过其类获取元素？
回答by Elias Van Ootegem
The name of the DOM function is actually getElementsByClassName, not getElementByClassName, simply because more than one element on the page can have the same class, hence: Elements.
DOM 函数的名称实际上是getElementsByClassName，而不是getElementByClassName，仅仅是因为页面上的多个元素可以具有相同的类，因此：Elements。
The return value of this will be a NodeList instance, or a superset of the NodeList(FF, for instance returns an instance of HTMLCollection). At any rate: the return value is an array-like object:
this 的返回值将是一个 NodeList 实例，或者是NodeList(FF，例如返回 的实例HTMLCollection)的超集。无论如何：返回值是一个类似数组的对象：
var y = document.getElementsByClassName('foo');
var aNode = y[0];
If, for some reason you needthe return object as an array, you can do that easily, because of its magic length property:
如果由于某种原因您需要返回对象作为数组，您可以轻松地做到这一点，因为它具有神奇的长度属性：
var arrFromList = Array.prototype.slice.call(y);
//or as per AntonB's comment:
var arrFromList = [].slice.call(y);
As yckartsuggested querySelector('.foo')and querySelectorAll('.foo')would be preferable, though, as they are, indeed, better supported (93.99% vs 87.24%), according to caniuse.com:
根据caniuse.com 的说法querySelector('.foo')，正如yckart 所建议的那样，并且querySelectorAll('.foo')会更可取，因为它们确实得到了更好的支持（93.99% 对 87.24%）：
回答by yckart
Another option is to use querySelector('.foo')or querySelectorAll('.foo')which have broader browser support than getElementsByClassName.
另一种选择是使用querySelector('.foo')或querySelectorAll('.foo')具有比getElementsByClassName.
http://caniuse.com/#feat=queryselector
http://caniuse.com/#feat=queryselector
回答by udidu
You need to use the document.getElementsByClassName('class_name');
您需要使用 document.getElementsByClassName('class_name');
and dont forget that the returned value is an array of elements so if you want the first one use:
并且不要忘记返回的值是一个元素数组，所以如果你想要第一个使用：
document.getElementsByClassName('class_name')[0]
document.getElementsByClassName('class_name')[0]
UPDATE
更新
Now you can use:
现在您可以使用：
document.querySelector(".class_name")to get the first element with the class_nameCSS class (nullwill be returned if non of the elements on the page has this class name)
document.querySelector(".class_name")获取class_nameCSS 类的第一个元素（null如果页面上没有元素具有此类名称，则返回）
or document.querySelectorAll(".class_name")to get a NodeList of elements with the class_namecss class (empty NodeList will be returned if non of. the elements on the the page has this class name).
或者document.querySelectorAll(".class_name")使用class_namecss类获取元素的NodeList （如果页面上的元素不具有此类名称，则将返回空的NodeList）。
回答by Talha
you can use
您可以使用
getElementsByClassName
suppose you have some elements and applied a class name 'test', so, you can get elements like as following
假设您有一些元素并应用了类名“test”，因此，您可以获得如下元素
var tests = document.getElementsByClassName('test');
its returns an instance NodeList, or its superset: HTMLCollection(FF).
它返回一个实例NodeList，或者它的超集：HTMLCollection（FF）。
