javascript基础之查找元素的详细介绍

当然这些选择器都是jQuery扩展的一些方法那么使用原生js时要怎样来查找元素呢？今天就来简单梳理下

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

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

复制代码 代码如下:
<span id="span">span标签</span>
<script>
var oSpan = documentgetElementById(span); //查找span元素
alert(oSpaninnerHTML); //弹出span标签中的内容
</script>

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

复制代码 代码如下:
<script>
var oDiv = documentgetElementsByTagName(div); //查找所有div元素返回一个元素列表
/* 操作特定元素 */
alert(oDiv[]innerHTML) //弹出第一个div中的内容
alert(oDivitem()innerHTML) //弹出第二个div中的内容
</script>

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

复制代码 代码如下:
<script>
var oDiv = documentgetElementsByTagName(div);
for(var i = ; i < oDivlength; i++){
//do something
}
</script>

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

复制代码 代码如下:
<script>
var oIpt= documentgetElementsByName(city); //查找name值为city的元素
alert(oIpt[]value);
alert(oIptitem()value);
</script>

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

复制代码 代码如下:
<script>
/** getByClass **/
function getByClass(oParent sClass){
var aEle = oParentgetElementsByTagName(*);
var re = new RegExp(b + sClass + b);
var aResult = [];
for(var i = ; i < aElelength; i++){
if(retest(aEle[i]className)){
aResultpush(aEle[i]);
}
}
return aResult;
}
</script>

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

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