如何通过类名获取元素?[重复]

2020/10/27 19:42 · javascript ·  · 0评论

使用JavaScript,我们可以使用以下语法按id获取元素:

var x=document.getElementById("by_id");

我尝试以下按类获取元素:

var y=document.getElementByClass("by_class");

但这导致了错误:

getElementByClass is not function

如何按类获取元素?

DOM函数的名称实际上getElementsByClassName不是getElementByClassName,仅仅是因为页面上的多个元素可以具有相同的类,因此:Elements

此方法的返回值将是NodeList实例,或者是NodeList(FF的超集,例如返回的实例HTMLCollection)。无论如何:返回值是一个类似于数组的对象:

var y = document.getElementsByClassName('foo');
var aNode = y[0];

如果由于某种原因需要返回对象作为数组,则由于其不可思议的length属性,可以轻松地做到这一点:

var arrFromList = Array.prototype.slice.call(y);
//or as per AntonB's comment:
var arrFromList = [].slice.call(y);

正如yckart所建议的那样querySelector('.foo')querySelectorAll('.foo')它将是更可取的,因为caniuse.com的确确实提供了更好的支持(93.99%vs 87.24%):

另一个选择是使用querySelector('.foo')querySelectorAll('.foo')具有比更大的浏览器支持getElementsByClassName

http://caniuse.com/#feat=queryselector

http://caniuse.com/#feat=getelementsbyclassname

您需要使用 document.getElementsByClassName('class_name');

并且不要忘记返回的值是一个元素数组,因此如果您想第一次使用它:

document.getElementsByClassName('class_name')[0]

更新

现在您可以使用:

document.querySelector(".class_name")获取具有class_nameCSS类的第一个元素null如果页面上没有其他元素具有该类名,则将返回此元素)

或者document.querySelectorAll(".class_name")使用class_namecss类获取元素的NodeList (如果页面上的所有元素都不具有此类名称,则返回空的NodeList)。

您可以使用

getElementsByClassName

假设您有一些元素,并应用了一个类名“ test”,因此,您可以获得如下元素

var tests = document.getElementsByClassName('test');

它返回一个实例NodeList,或其超集:HTMLCollection(FF)。

阅读更多

本文地址:http://javascript.askforanswer.com/ruhetongguoleiminghuoquyuansuzhongfu.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!