JavaScript HTML DOM 集合

• 

  HTML Collection对象

  getElementsByTagName()方法返回一个HTMLCollection对象。一个HTMLCollection目的是HTML元素的数组状列表（集合）。以下代码选择<p>文档中的所有元素：

  var x = document.getElementsByTagName("p");

  可以通过索引号访问集合中的元素。

  要访问第二个<p>元素，您可以编写：

  y = x[1];

  尝试一下

  注意：索引从0开始。
• 

  HTML HTML Collection长度

  length属性定义了以下元素HTML Collection的数量：

  var myCollection = document.getElementsByTagName("p");
  document.getElementById("demo").innerHTML = myCollection.length;

  尝试一下

  示例说明：

  1. 创建所有<p>元素的集合
  2. 显示集合的长度

  length当您想循环遍历集合中的元素时，该属性很有用：

  更改所有<p>元素的背景颜色：

  var myCollection = document.getElementsByTagName("p");
  var i;
  for (i = 0; i < myCollection.length; i++) {
    myCollection[i].style.backgroundColor = "red";
  }

  尝试一下

  HTMLCollection不是数组！

  HTMLCollection可能看起来像一个数组，但事实并非如此。

  您可以遍历列表并使用数字引用元素（就像数组一样）。

  但是，您不能在HTMLCollection上使用valueOf()，pop()，push()或join()等数组方法。