getElementByTagname方法中零索引的解释

时间:2014-05-17 09:55:00

标签: javascript

我正在尝试使用getElemenstByTagName方法来访问某些数组元素。我已经搜索了互联网并发现了它的一些用途。我已经看到在标记名末尾没有[0]这个方法不起作用。说

如果我使用

,在我的代码中

var c=document.getElementsByTagName("P");

它不起作用。我必须使用

var c=document.getElementsByTagName("P")[0];

这个[0]索引意味着什么以及为什么使用它?

完整代码:

<html>
<head>
<style>
*{margin:0px;padding:0px;}
</style>
</head>
<body>
<script>
var j=2;
var temp;
var arr=["favourite","fruit","is","mango","orange","apple"];
for(i=0;i<3;i++){
document.body.innerHTML+=arr[i]+" ";
}
setInterval(function (){

j++;

var c=document.getElementsByTagName("P")[0];
c.style.color="blue";

c.innerHTML=arr[j]+" ";
if(j==5){j=2;}

},2000);


</script>
<p style="position:absolute;float:right;top:0px;left:97px;border:0px solid black;width:60px;height:50px;"></p>
</body>
</html>

3 个答案:

答案 0 :(得分:2)

document.getElementsByTagName('tag-name')返回一个HTML元素数组(HTMLCollection

所以var foo = document.getElementsByTagName('tag-name')HTMLCollection (can be thought of array of HTML Elements)

因此,foo[0]document.getElementsByTagName('tag-name')[0]包含数组中的第一项,即与标记名匹配的第一个元素!

更多地了解getElementsByTagName()https://developer.mozilla.org/en-US/docs/Web/API/Element.getElementsByTagName

如果您的网页上有太多元素,那么您可以使用IDs的概念来访问元素。例如,请考虑此HTML摘录

<p id="topPara">....</p>
<p id="midPara">....</p>
<p id="bottomPara">....</p>

现在访问您将使用的各个元素:

var foo = document.getElementById('topPara');

将返回foo中包含id topPara的元素,以便您现在可以使用与foo.methodName()

等元素相关的方法

答案 1 :(得分:1)

可能存在同一标记的多个实例(通常有),因此getElementsByTagName()返回此HTML元素的数组。实际上该函数的名称是不言自明的 - 获取 ElementS ByTagName()

这就是你必须使用索引的原因 - 你没有得到回复的HTML元素。

如果您想要访问一个特定的<p>,请给它一个ID并使用`getElementById()';

答案 2 :(得分:1)

getElementsByTagName返回带有搜索标记名的所有HTML元素的数组,在这种情况下,您的页面中只有一个,但它仍然在数组中列为idex 0的第一项。