JavaScript获取HTML元素标签名：getElementById与getElementsByClassName详解

获取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获取方式


$("#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获取HTML元素标记名的三种常用方法