JavaScript中常见获取元素的方法汇总
常见的获取元素的方法有3种，分别是通过元素ID、通过标签名字和通过类名字来获取。
getElementById
DOM提供了一个名为getElementById的方法，这个方法将返回一个与之对应id属性的节点对象。使用的时候请注意区分大小写。
它是document对象特有的函数，只能通过其来调用该方法。其使用的方法如下：
document.getElementById('demo') //demo是元素对应的ID
该方法兼容主流浏览器，甚至包括IE6+，可以大胆使用。
getElementsByTagName
该方法返回一个对象数组（准确的说是HTMLCollection集合，它不是真正意义上的数组），每个对象分别对应着文档里有着给定标签的一个元素。类似于getElementById,同样，该方法只提供一个参数，它的参数是指定标签的名字，示例代码如下：
document.getElementsByTagname('li') //li是标签的名字
需要注意的是，该方法除了能被document对象调用之外，还可以被普通的元素调用。示例如下：
var demo = document.getElementById('demo');
var lis = demo.getElementsByTagname('li');
同样，该方法兼容主流浏览器，甚至包括IE6+，可以大胆使用。
getElementsByClassName
除了通过指定标签获取元素外，DOM还提供了getElementsByClassName方法来获取指定class名的元素。不过由于该方法比较新，较老的浏览器还不支持，比如IE6。不过我们可以通过hack方式来弥补老浏览器缺陷。该方法调用的方式如下所示：
document.getElementsByClassName('demo') //demo为元素指定的class名
和getElementsByTagname一样， 该方法除了能被document对象调用之外，还可以被普通的元素调用。
对于比较老的浏览器，比如IE6、7我们可以通过下面的hack方式来实现：
function getElementsByClassName(node,classname){
if(node.getElementsByClassName) {
return node.getElementsByClassName(classname);
}else {
var results = [];
var elems = node.getElementsByTagName("*");
for(var i = 0; i < elems.length; i++){
if(elems[i].className.indexOf(classname) != -1){
results[results.length] = elems[i];
}
}
return results;
}
}
拓展
如果你不仅仅满足上面那些元素选择的方法，想和JQuery一样，能通过选择器来获取元素，实现的方法和上面的getElementsByClassName差不多，如果有兴趣自己可以实现一套选择器。不过我觉得有上面的三个方法再结合事件冒泡，已经够用了，毕竟这三种性能上算是优秀的。
以上就是本文的全部内容了，希望对大家能够有所帮助。
相关文章
![webpack打包html里面img后src为“[object Module]”问题](//img.jbzj.com/images/xgimg/bcimg0.png)
webpack打包html里面img后src为“[object Module]”问题
这篇文章主要介绍了webpack打包html里面img后src为“[object Module]”问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
诘屈聱牙之javascript中国象棋...2007-04-04
这篇文章主要为大家详细介绍了Bootstrap下拉菜单效果实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-06-06
本文主要介绍了SyntaxHighlighter的配置及代码的使用，并附上在博客园中使用SyntaxHighlighter 3.0.83的案例，非常实用，这里推荐给大家。2015-01-01
本文给大家介绍js修改地址栏参数的实例代码，并给大家附上用JS动态改变地址栏内容 window.location.href window.location.hash的方法，比较实用，需要的朋友参考下吧2016-06-06
本文主要介绍了小程序开发实现access_token统一管理，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧2021-07-07
下面小编就为大家带来一篇浅谈JS中json数据的处理。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
本文主要介绍了微信小程序事件点击跳转页面的五种方法小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,下面这篇文章主要给大家介绍了关于微信小程序自定义组件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-03-03
这篇文章主要为大家详细介绍了JavaScript中的this显示绑定和硬绑定，文中的示例代码讲解详细，具有一定的借鉴价值，感兴趣的可以了解一下2022-10-10
![webpack打包html里面img后src为“[object Module]”问题](http://img.jbzj.com/images/xgimg/bcimg0.png)
最新评论