JS获取HTML元素标记名的三种常用方法
本文介绍了JavaScript中获取HTML元素标记名的三种主要方式。首先通过getElementById获取特定ID节点,其次利用getElementsByTagName获取指定标签集合,最后讲解getElementsByClassName及其对IE6等旧浏览器的兼容处理。结合jQuery与原生DOM操作示例,帮助开发者高效获取元素标签信息。
获取HTML元素标记名的三种方式
在Web开发中,获取HTML元素通常有三种常见途径:依据元素ID、依据标签名称以及依据CSS类名。
通过ID获取元素
getElementById
DOM规范提供了getElementById方法,用于返回具有指定id属性值的节点对象。调用时需注意区分大小写。
该方法属于document对象的特有函数,必须通过document实例进行调用。具体使用方式如下:
document.getElementById('demo') //demo是元素对应的ID
此方法兼容性良好,支持包括IE6在内的主流浏览器,可以放心使用。
通过标签名获取元素
getElementsByTagName
该方法返回一个HTMLCollection集合(注意:这并非真正的数组对象),集合中的每个对象对应文档中指定标签名的一个元素。与getElementById类似,它仅接受一个参数,即要查找的标签名称。示例代码如下:
document.getElementsByTagname('li') //li是标签的名字
值得注意的是,除了document对象,该方法还可以在其他普通元素节点上调用。示例如下:
若使用原生DOM,需先通过id、name或其他属性获取标签对象。
例如:
<p id="targetp" >2333333</p>
<script>
var element = document.getElementById("targetp");
var tagname = element.tagName;
alert(tagname);
</script>
jQuery获取方式
jQuery获取方式
$("#content-header").get(0).tagName
若已获取到jQuery对象,可直接提取其标记名。
<p onclick="alert('您单击的是:'+this.tagName);">中华人民共和国</p>
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、IE7等较老浏览器,可通过以下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的实现思路,自行构建一套选择器。但个人认为,结合事件冒泡机制,上述三种方法在性能上已足够优秀,足以满足大部分开发需求。
以上即为JS获取HTML元素标记名的完整实现方法,希望对大家有所帮助。
JS在setTimeout或Ajax回调中打开新标签页失败怎么处理
2026-11-05 15:50:12
JS直播协议选型:HLS、FLV与WebRTC的延迟与兼容性对比
2026-11-05 12:16:14
JS实现回到顶部:scrollTop赋值与浏览器兼容性处理
2026-11-04 23:43:35
JS使用classList动态添加、移除和切换CSS类名
2026-11-04 23:40:58
在 D3.js 中实现平滑过渡动画的技巧
2026-11-03 23:46:09
