使用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_name
CSS类的第一个元素(null
如果页面上没有其他元素具有该类名,则将返回此元素)
或者document.querySelectorAll(".class_name")
使用class_name
css类获取元素的NodeList (如果页面上的所有元素都不具有此类名称,则返回空的NodeList)。
您可以使用
getElementsByClassName
假设您有一些元素,并应用了一个类名“ test”,因此,您可以获得如下元素
var tests = document.getElementsByClassName('test');
它返回一个实例NodeList
,或其超集:HTMLCollection
(FF)。
文章标签:dom , javascript
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!