快捷導(dǎo)航

javascript getElementsByTagName

更新時(shí)間：2011年01月31日 19:51:14 作者：

DC大神為早期不支持getElementsByTagName的瀏覽器寫的hack，當(dāng)然與原生的不能同日而言，原生的用到緩存機(jī)制呢。

function getElementsByTagName(node, tagName) { 
var elements = [], i = 0, anyTag = tagName === "*", next = node.firstChild; 
while ((node = next)) { 
if (anyTag ? node.nodeType === 1 : node.nodeName === tagName) elements[i++] = node; 
next = node.firstChild || node.nextSibling; 
while (!next && (node = node.parentNode)) next = node.nextSibling; 
} 
return elements; 
}; 

定義和用法
getElementsByTagName() 方法可返回帶有指定標(biāo)簽名的對(duì)象的集合。
語法
document.getElementsByTagName(tagname)
說明
getElementsByTagName() 方法返回元素的順序是它們?cè)谖臋n中的順序。
如果把特殊字符串 "*" 傳遞給 getElementsByTagName() 方法，它將返回文檔中所有元素的列表，元素排列的順序就是它們?cè)谖臋n中的順序。
提示和注釋
注釋：傳遞給 getElementsByTagName() 方法的字符串可以不區(qū)分大小寫。
實(shí)例
例子 1

復(fù)制代碼代碼如下:

 
<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 元素的列表。例如，下面的代碼可獲取文檔中所有的表：

復(fù)制代碼代碼如下:

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

例子 3
如果您非常了解文檔的結(jié)構(gòu)，也可以使用 getElementsByTagName() 方法獲取文檔中的一個(gè)特定的元素。例如，下面的代碼可以獲得文檔中的第四個(gè)段落：
var myParagragh = document.getElementsByTagName("p")[3];
不過，我們還是認(rèn)為，如果您需要操作某個(gè)特定的元素，使用 getElementById() 方法將更為有效。

您可能感興趣的文章: