【推荐】javascript基础之查找元素（访问节点）

有好长时间没更新博客了，回学校呆了两个月，期间也发生了不少事情，酸甜苦辣咸，各种感觉都有。回想这段时间真的没少疯、没少醉、没少哭，也许每个人都想用一种不同的方式来纪念这逝去的大学吧。现在想起来还有种淡淡的忧伤，一幅幅分别相拥而泣的画面历历在目……

更让人无奈的是公司的变动，回到北京后发现同部门的同事都走的差不多了，也就两个月的时间，变动实在有点大，虽然不知道这期间发生了什么，但仍有种不详的预感。撇开能不能留下来不说，即便留下来意义也不大。团队散了，每天也没什么工作做，尽管很安逸，但毕竟这不是我想要的。后面也许面临着重新找工作，所以这段时间会梳理些比较基础的东西，为找工作提前做好准备。好了，打住，吐槽的有点多了。

常用jQuery的话我们知道，jQuery有非常强大的选择器来查找元素（也称作访问节点），例如：基本选择器、层次选择器、过滤选择器、属性选择器等，具体可以参考之前写过的一篇文章jQuery基础之选择器。当然这些选择器都是jQuery扩展的一些方法，那么使用原生js时要怎样来查找元素呢？今天就来简单梳理下。

DOM定义了多种查找元素的方法，除了我们常用的getElementById()，还有getElementsByTagName()和getElementsByName()。使用这几种方法方法我们可以查找html文档中的任意html元素。

getElementById()

首先来看下getElementById()，这个方法很简单，只需在参数中传入html标签的id属性值即可，由于html页面中的id具有唯一性，因此该方法返回的是单个元素对象。例如：

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

getElementsByTagName()

getElementsByTagName()参数需传入的是一个html标签名，它返回的是html文档中所有与之匹配的元素列表，这个列表具有部分数组的特性，因此也称其为类数组。当我们想操作某个特定的元素时，我们可以使用数组索引或item()来实现，例如：

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

当然我们还可以通过length属性来循环遍历节点：

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

getElementsByName()

getElementsByName()常用来查找表单元素，参数中传入html标签的name属性值，由于文档中多个html标签的name值可能相同（如单选按钮），因此该方法返回的也是一个元素列表。具体操作方法与getElementsByTagName()类似，这里不在赘述。

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

getByClass()

虽然使用上面的几种方法已经可以满足常见需求，但是为了更方便的访问元素节点，我们一般会自己封装一个通过class来查找元素的方法：

 1 <script>
 2     /** getByClass **/
 3     function getByClass(oParent, sClass){
 4         var aEle = oParent.getElementsByTagName('*');
 5         var re = new RegExp('\\b' + sClass + '\\b');
 6         var aResult = [];
 7         for(var i = 0; i < aEle.length; i++){
 8             if(re.test(aEle[i].className)){
 9                 aResult.push(aEle[i]);
10             }
11         }
12         return aResult;
13     }
14 </script>

getByClass需传入两个参数，其中oParent为参考节点，即在oParent节点中查找元素，sClass为要查找的元素class的值。通过循环将oParent内的html标签的class值与传入的sClass值一一对比，符合条件的会存入到数组aResult中，最后再返回这个数组。

另外这里之所以用正则来匹配而没有直接用aEle[i].className == sClass，是避免标签的class值为多个时，出现匹配失效的情况。