微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

JS获取html元素的标记名实现方法

常见的获取元素的方法有3种,分别是通过元素ID、通过标签名字和通过类名字来获取

getElementById

DOM提供了一个名为getElementById的方法,这个方法将返回一个与之对应id属性的节点对象。使用的时候请注意区分大小写。

它是document对象特有的函数,只能通过其来调用方法。其使用的方法如下:

rush:js;"> document.getElementById('demo') //demo是元素对应的ID

方法兼容主流浏览器,甚至包括IE6+,可以大胆使用。

getElementsByTagName

方法返回一个对象数组(准确的说是HTMLCollection集合,它不是真正意义上的数组),每个对象分别对应着文档里有着给定标签一个元素。类似于getElementById,同样,该方法只提供一个参数,它的参数是指定标签的名字,示例代码如下:

<div class="jb51code">
<pre class="brush:js;">
document.getElementsByTagname('li') //li是标签的名字

需要注意的是,该方法除了能被document对象调用之外,还可以被普通的元素调用。示例如下:

原生DOM的话首先获取标签对象,id或者name或其他

例:

rush:js;">

2333333

jQuery获取

rush:js;"> $("#content-header").get(0).tagName

如果已经获取到对象可以直接获取标记

rush:js;">

rush:js;"> var demo = document.getElementById('demo'); var lis = demo.getElementsByTagname('li');

同样,该方法兼容主流浏览器,甚至包括IE6+,可以大胆使用。

getElementsByClassName

除了通过指定标签获取元素外,DOM还提供了getElementsByClassName方法获取指定class名的元素。不过由于该方法比较新,较老的浏览器还不支持,比如IE6。不过我们可以通过hack方式来弥补老浏览器缺陷。该方法调用的方式如下所示:

rush:js;"> document.getElementsByClassName('demo') //demo为元素指定的class名

和getElementsByTagname一样, 该方法除了能被document对象调用之外,还可以被普通的元素调用

对于比较老的浏览器,比如IE6、7我们可以通过下面的hack方式来实现:

rush:js;"> 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差不多,如果有兴趣自己可以实现一套选择器。不过我觉得有上面的三个方法再结合事件冒泡,已经够用了,毕竟这三种性能上算是优秀的。

以上就是小编为大家带来的JS获取html元素的标记实现方法全部内容了,希望大家多多支持编程之家~

原文地址:https://www.jb51.cc/js/45360.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐