JavaScript查找DOM元素的方法总结

2014-08-16 09:06:00|?次阅读|上传:huigezrx【已有?条评论】发表评论

JavaScript编程的时候我们经常需要查找HTML中的DOM元素，HTML DOM 定义了多种查找元素的方法，除了 getElementById() 之外，还有 getElementsByName()和 getElementsByTagName()，本文通过实例分析这三种查找DOM元素方法的异同和注意事项。

getElementById:
语法： document.getElementById(id)
参数：id :必选项为字符串(String)
返回值：对象; 返回相同id对象中的第一个,如果无符合条件的对象，则返回 null
example：

document.getElementById("id1").value;

getElementsByName:
语法： document.getElementsByName(name)
参数：name :必选项为字符串(String)
返回值：数组对象; 如果无符合条件的对象，则返回空数组
example：

document.getElementsByName("name1")[0].value;
document.getElementsByName("name1")[1].value;

getElementsByTagName:
语法： object.getElementsByTagName(tagname) object可以是document或event.srcElement.parentElement等
参数：tagname:必选项为字符串(String)
返回值：数组对象; 如果无符合条件的对象，则返回空数组
example：

document.getElementsByTagName("p")[0].childNodes[0].nodeValue;
document.getElementsByTagName("p")[1].childNodes[0].nodeValue;

注意：

1. getElementsByName和getElementsByTagName在Element后面都有s，即返回元素是一个数组；

2. getElementsByName通过元素的名称获得对应的DOM元素数组；

3. getElementsByTagname通过元素的标签(如p，div等)获得对应的DOM元素数组；

4. document.getElementById()可以通过元素的ID获取对应的DOM元素；

使用getElementsByName和getElementsByTagName获取DOM元素返回的是一个集合，引用特定DOM元素的时候要指名对应的序号(index):

var test = document.getElementsByName('testButton')[0];

例1：

<html>
<head>
<title>fish</title>
< language="java">
get(){
var xx=getElementById("bbs")
alert("标记名称："+xx.tagName);
}
getElementName(){
var ele = getElementsByName("happy");
alert("无素为happy的个数：" + ele.length);
}
</></head>
<body>
<h2 id="bbs">获取文件指定的元素</h2>
<hr>
<form>
<input type="button" ="get()" ="获取标题标记">
<input type="button" name="happy" ="getElementName()" ="click ">
<input type="button" name="happy" ="getElementName()" ="click ">
<input type="button" name="happy" ="getElementName()" ="click ">
<input type="button" name="happy" ="getElementName()" ="click ">
<input type="button" name="happy" ="getElementName()" ="click ">
</form>
</body>
</html>

getElementsByName()这个方法.它对一个和多个的处理是一样的,我们可以用:

Temp = getElementsByName('happy')

来引用，当Temp只有1个的时候,那么就是Temp[0],有多个的时候,用下标法Temp[i]循环获取

也有例外：

在ie 中getElementsByName(“test“)的时候返回的是id=test的object数组，而firefox则返回的是name＝ test的object的数组。

按照w3c的规范应该是返回的是name＝ test的object的数组。

firefox和ie中的getElementByID相同：获取对 ID 标签属性为指定值的第一个对象的引用。

document.getElementsByName:方法可返回带有指定名称的对象的集合。

该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。

另外，因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的name 属性），所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。

<html>
<head>
<script type="text/javascript">
function getElements()
  {
  var x=document.getElementsByName("myInput");
  alert(x.length);
  }
</script>
</head>
<body>
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()"
value="How many elements named 'myInput'?" />

</body>
</html>

getElementsByTagName() 方法可返回带有指定标签名的对象的集合。