【问题标题】:explanation of zero index in getElementByTagname methodgetElementByTagname 方法中零索引的解释
【发布时间】:2014-07-05 18:29:55
【问题描述】:

我正在尝试使用 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>

【问题讨论】:

标签: javascript


【解决方案1】:

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 用于指定它是 HTMLColletion,因此人们不会将其与 Array 对象混淆。
  • 谢谢!当特定页面中有太多相同类型的元素因为我无法直接访问任何所需的元素时,此方法是否有用?
  • @user3138436 :编辑了帖子,以便现在可以帮助您
【解决方案2】:

同一个标签可能有多个实例(通常有),所以getElementsByTagName()返回这个HTML元素的数组。实际上函数的名称是不言自明的 - get ElementS ByTagName()

这就是你必须使用索引的原因——你不会得到返回信号的 HTML 元素。

如果你想访问一个特定的&lt;p&gt;,那么给它一个ID并使用`getElementById()';

【讨论】:

    【解决方案3】:

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

    【讨论】:

      猜你喜欢
      • 2015-06-09
      • 1970-01-01
      • 2016-12-04
      • 1970-01-01
      • 1970-01-01
      • 2021-06-02
      • 2018-04-10
      • 1970-01-01
      • 2010-10-13
      相关资源
      最近更新 更多