JavaScript中document.getElementsByTagName()方法的使用详解

作者:佚名     字体:[增加 减小]    类型:转载
Document对象的getElementsByTagName()方法可用来选取指定类型(标签名)的所有HTML或XML元素,本文为您详细解说该方法的各种细节。

Document对象的getElementsByTagName()方法可用来选取指定类型(标签名)的所有HTML或XML元素。例如,如下代码,在文档中获得包含所有<h3>元素的只读的类数组对象。

var aH3 = document.getElementsByTagName('h3');

类似于getElementsByName()、getElementsByClassName(),getElementsByTagName()返回一个NodeList对象。在NodeList中返回的元素按照在文档中的顺序排序的,所在可用如下代码选取文档中的第一个<span>元素:

var span1 = document.getElementsByTagName('span')[0];

HTML标签是不区分大小写的,当在HTML文档中使用getElementsByTagName()时,它进行不区分大小写的标签名比较。例如,上述的变量span将包含所有写成<SPAN>的span标签。

给getElementsByTagName()传递通配符参数 “*” 将获得一个代表文档中所有元素的NodeList的对象。而getElementsByName()、getElementsByClassName()这两个方法不能分配该通配符。

Element类也定义getElementsByTagName()的方法,这一点与getElementsByClassName()方法相同,但是它只选取调用该方法的元素的后代元素。因此,要查找文档中第一个<div>元素里面的所有<li>元素,代码如下:

var div1 = document.getElementsByTagName('div')[0];
var aLi = div1.getElementsByTagName('li');

上面的代码也可用一行来表示:

var aLi = document.getElementsByTagName('div')[0].getElementsByTagName('li');

由于历史的原因,HTMLDocument类定义一些快捷属性来访问各种各样的节点。例如,images、forms和links等属性指向<img><form><a>(但只包含那些有href属性的a标签)元素集合(HTMLCollection)。用document.forms属性可以具体地引用命名(或有ID的)表单,如下:

document.forms.form1;

HTMLDocument也定义embed和plugins属性,它们是同义词,都是HTMLCollection类型的<embed>元素的集合。anchors是非标准属性,它指代有一个name属性的<a>元素而并不是一个href属性。同理document.scripts属性是<script>元素的集合,但它是HTML5的标签属性,在低版本浏览器中要谨慎使用。

HTMLDocument对象还定义两个属性,它们指代特殊的单个元素而不是元素的集合。document.body对应<body>标签,而document.head对应<head>标签。这两个属性总是会定义:如果文档代码未显示地包含head<body>元素,浏览器将隐式地创建它们,部分浏览器不完全支持这两个属性。

Document类的documentElement属性指代文档的根元素,在HTML文档中,它总是指代<html>元素。

如果一个HTML文档中只有下面的代码

<script>
    console.log(document.head);
    console.log(document.body);
    console.log(document.documentElement);
</script>

在Chrome浏览器的控制台,我们会得到下面的信息,同时我们也会发现,document.body属性并没有隐式地被声明 Document对象的body与head与documentElement属性

只有在显示地声明head与body标签后,才能得到正确的结果

<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function(){
    console.log(document.head);
    console.log(document.body);
    console.log(document.documentElement);
}
</script>
</head>
<body>
<p>一个测试段落</p>
</body>
</html>

这时,我们再来看控制台,会发现这时才能得到正确的结果 Document对象的body与head与documentElement属性在显示声明下的状态