原生JavaScript查找元素的几种常用方法详解

原生JavaScript查找元素方法概述

上述选择器多为jQuery扩展的方法，若需使用原生JavaScript进行元素查找，具体该如何操作？本文将对此进行简要梳理。

DOM标准定义了多种元素查找方式，除了常用的getElementById()外，还包括getElementsByTagName()和getElementsByName()。利用这些方法，可以检索HTML文档中的各类元素。

getElementById：通过ID查找

首先介绍getElementById()，该方法仅需传入HTML标签的id属性值。由于页面中id具有唯一性，此方法返回单个元素对象。示例如下：

<span id="span1">span标签</span>
<script>
var oSpan = document.getElementById('span1'); //查找span元素
alert(oSpan.innerHTML); //弹出span标签中的内容
</script>

getElementsByTagName：通过标签名查找

getElementsByTagName()的参数为HTML标签名，返回所有匹配元素的列表。该列表具备部分数组特性，被称为类数组对象。如需操作特定元素，可通过数组索引或item()方法实现，例如：

<script>
var oDiv = document.getElementsByTagName('div'); //查找所有div元素,返回一个元素列表
/* 操作特定元素 */
alert(oDiv[0].innerHTML) //弹出第一个div中的内容
alert(oDiv.item(1).innerHTML) //弹出第二个div中的内容
</script>

此外，还可利用length属性进行循环遍历：

<script>
var oDiv = document.getElementsByTagName('div');
for(var i = 0; i < oDiv.length; i++){
//do something
     }
</script>

getElementsByName：通过名称查找

getElementsByName()常用于查找表单元素，参数为标签的name属性值。因多个标签可能拥有相同的name值（如单选按钮），该方法同样返回元素列表。其操作方式与getElementsByTagName()类似，此处不再赘述。

<script>
var oIpt= document.getElementsByName('city'); //查找name值为city的元素
alert(oIpt[0].value);
alert(oIpt.item(1).value);
</script>

封装getByClass：通过类名查找

尽管上述方法已能满足多数需求，但为了更便捷地通过class访问元素节点，通常会封装一个查找class的方法：

<script>
/** getByClass **/
function getByClass(oParent, sClass){
var aEle = oParent.getElementsByTagName('*');
var re = new RegExp('\\b' + sClass + '\\b');
var aResult = [];
for(var i = 0; i < aEle.length; i++){
if(re.test(aEle[i].className)){
aResult.push(aEle[i]);
             }
         }
return aResult;
     }
</script>

getByClass函数接收两个参数：oParent为参考节点，指定在该节点内查找；sClass为要查找的class值。通过循环比对oParent内各标签的class属性与传入的sClass，将符合条件的元素存入数组aResult并返回。

此处使用正则匹配而非直接字符串相等判断（aEle[i].className == sClass），旨在避免当标签包含多个class值时匹配失效的问题。