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()等数组方法。