本文汇总了JavaScript中获取DOM元素的三种常用方法：通过ID、标签名和类名。详细解析了getElementById、getElementsByTagName及getElementsByClassName的使用场景、参数区别及兼容性处理，特别是针对IE6-8等老版本浏览器的Hack实现方案，帮助开发者高效选择元素。
JavaScript DOM元素获取概述
在前端开发中，获取页面元素是基础操作，主要可通过三种方式实现：依据元素ID、依据标签名称以及依据CSS类名。
通过ID获取元素：getElementById
getElementById
DOM规范提供了getElementById方法，用于返回具有指定id属性值的节点对象。调用时需注意ID区分大小写。
该方法仅属于document对象，必须通过document实例进行调用。具体调用语法如下：
代码如下:
document.getElementById('demo') //demo是元素对应的ID此方法兼容性极佳，支持包括IE6在内的主流浏览器，可直接在生产环境中使用。
通过标签名获取元素：getElementsByTagName
getElementsByTagName
该方法返回一个HTMLCollection集合（注意：这并非真正的数组对象），集合中包含文档中所有指定标签名的元素节点。与getElementById类似，它接收一个参数，即目标标签的名称。示例代码如下：
代码如下:
document.getElementsByTagName('li') //li是标签的名字值得注意的是，除了document对象，该方法也可在普通DOM元素节点上调用，从而在该元素的子树中查找指定标签。示例如下：
代码如下:
var demo = document.getElementById('demo');
var lis = demo.getElementsByTagName('li');该方法同样具备优秀的兼容性，支持IE6及以上版本，可以放心使用。
通过类名获取元素：getElementsByClassName
getElementsByClassName
除了通过标签名查找，DOM还引入了getElementsByClassName方法，用于获取具有特定class名的元素。由于该API较新，IE6等老旧浏览器不支持，但可通过兼容层（Hack）解决。调用方式如下：
代码如下:
document.getElementsByClassName('demo') //demo为元素指定的class名与getElementsByTagName类似，该方法既可在document对象上调用，也可在普通元素节点上调用。
针对IE6、IE7等不支持该方法的旧版浏览器，可采用以下兼容方案实现：
代码如下:
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的CSS选择器功能，可参考getElementsByClassName的实现思路自行封装选择器引擎。不过，结合事件冒泡机制，上述三种原生方法在性能上已足够优秀，通常能满足大部分开发需求。
以上内容涵盖了JavaScript中获取元素的核心方法，希望能为开发者提供实用参考。