JavaScript Element getElementsByClassName() 方法

• 

  JavaScript Element getElementsByClassName() 方法

  getElementsByClassName()方法返回具有指定类名的元素的子元素的集合，作为NodeList对象。NodeList对象表示节点的集合。可以通过索引号访问节点。索引从0开始。

  提示：您可以使用NodeList对象的length属性来确定具有指定类名的子节点数，然后您可以遍历所有节点并提取所需的信息。

  实例：

  使用class=“example”在列表中使用class=“child”（索引0）更改第一个列表项的文本：

  var list = document.getElementsByClassName("example")[0];
  list.getElementsByClassName("child")[0].innerHTML = "Milk";
  

  尝试一下
• 

  浏览器支持

  项	IE/Edge	Chrome	FireFox	Safari	Opera
  方法
  getElementsByClassName()	9.0+	1.0+	3.0+	3.1+	9.5+

• 

  语法

  element.getElementsByClassName(classname)
• 

  参数值

  参数	类型	描述
  classname	String	必需的。 要获取的子元素的类名。要搜索多个类名，请使用空格分隔它们，例如“child color”。

• 

  技术细节

  项目	描述
  返回值：	NodeList对象，表示具有指定类名的元素子元素的集合。返回集合中的元素按照它们在源代码中的显示进行排序。
  DOM版本	Core Level 1

• 

  更多例子

  在<div>元素中使用class=“child”更改第二个元素的背景颜色：

  var x = document.getElementById("myDIV");
  x.getElementsByClassName("child")[1].style.backgroundColor = "red";
  

  尝试一下

  找出class =“child”有多少元素在<div>元素内部（使用NodeList对象的length属性）：

  var x = document.getElementById("myDIV").getElementsByClassName("child").length;
  

  尝试一下

  使用class=“example”在元素内部使用“child”和“color”类更改第一个元素的背景颜色：

  var x = document.getElementsByClassName("example")[1];
  x.getElementsByClassName("child color")[0].style.backgroundColor = "red";
  

  尝试一下

  在<div>元素中使用class =“child”更改所有元素的背景颜色：

  var x = document.getElementById("myDIV");
  var y = x.getElementsByClassName("child");
  var i;
  for (i = 0; i < y.length; i++) {
    y[i].style.backgroundColor = "red";
  }
  

  尝试一下
• 

  相关页面

  CSS 教程：CSS 语法

  CSS 参考：CSS .class选择器

  HTML DOM参考：document.getElementsByClassName()