简明现代魔法 -> JavaScript -> DOM 编程艺术:getElementsByTagName() 方法

DOM 编程艺术:getElementsByTagName() 方法

2010-02-08

getElementByTagName() 方法会返回一个对象的数组,每一个对象分别对应着文档里有给定标签的一个元素。这个方法的参数是 html 标签的名字。

element.getElementsByTagName(tag);

举一个简单的例子吧。

现在有一个无序 HTML 标签如下:

现在我们可以将 li 标签的元素装入数组里:

<script language="javascript">
	alert(document.getElementsByTagName("li"));
</script>

查看示例

这个调用返回了一个对象数组 object NodeList,每个对象分别对应着 document 对象中的一个列表项 li 元素。与其它数组一样,我们 可以利用 length 属性查出这个数组的元素个数。

<script language="javascript">
	alert(document.getElementsByTagName("li").length);
</script>

查看示例

这个数组的每个元素都是一个对象。你可以通过利用一个循环语句和 typeof 操作符去遍历这个数组的方法来验证这一点。

<script language="javascript">
for(var i=0; i<document.getElementsByTagName("li").length; i++)
{
	document.write(typeof document.getElementsByTagName("li")[i]);
	document.write('<br />');
}
</script>

运行效果如下:

当然你也可以简化以上代码:

var items = document.getElementsByTagName("li");
for(var i=0; i<items.length; i++)
{
	alert(typeof items[i]);
}

其它介绍

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

getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。如果把特殊字符串 "*" 传递给 getElementsByTagName() 方法,它将返回文档中所有元素的列表,元素排列的顺序就是它们在文档中的顺序。

注释:传递给 getElementsByTagName() 方法的字符串可以不区分大小写。

例子 1

<html>
<head>
<script type="text/javascript">
function getElements()
{
  	var x=document.getElementsByTagName("input");
 	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 input elements?" />

</body>
</html>

查看示例

例子 2

可以用 getElementsByTagName() 方法获取任何类型的 HTML 元素的列表。例如,下面的代码可获取文档中所有的表:

var tables = document.getElementsByTagName("table");
alert ("This document contains " + tables.length + " tables");

例子 3

如果您非常了解文档的结构,也可以使用 getElementsByTagName() 方法获取文档中的一个特定的元素。例如,下面的代码可以获得文档中的第四个段落:

var myParagragh = document.getElementsByTagName("p")[3];

不过,我们还是认为,如果您需要操作某个特定的元素,使用 getElementById() 方法将更为有效。

随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们