返回到:DOM 对象:HTML DOM Document 对象
getElementsByClassName() 方法返回文档中所有指定类名的元素集合,作为 NodeList 对象。
NodeList 对象代表一个有顺序的节点列表。NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。
提示: 你可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数,并循环各个元素来获取你需要的那个元素。
表格中的数字表示支持该方法的第一个浏览器的版本号。
方法 | 谷歌 | IE | 火狐 | 苹果 | opera |
---|---|---|---|---|---|
getElementsByClassName() | 4.0 | 9.0 | 3.0 | 3.1 | 9.5 |
document.getElementsByClassName(classname)
参数 | 类型 | Description |
---|---|---|
classname | String | 必须。你需要获取的元素类名。 多个类名使用空格分隔,如 “test demo”。 |
DOM 版本: | Core Level 1 Document Object |
---|---|
返回值: | NodeList 对象,表示指定类名的元素集合。元素在集合中的顺序以其在代码中的出现次序排序。 |
获取所有指定类名的元素:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Web176教程网(web176.com)</title> </head> <body> <div class="example">第一 Div 元素 class="example"。</div> <div class="example">第二个 Div 元素 class="example"。</div> <p>点击按钮修改第一个 Div 元素的文本信息(索引值为 0 的 class="example")。</p> <button >
获取包含 “example” 和 “color” 类名的所有元素:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Web176教程网(web176.com)</title> <style> div { border: 1px solid black; margin: 5px; } </style> </head> <body> <div class="example"> <p>P 元素在在第一个样式为 class="example" 的 Div 元素中。Div 的索引值为 0。</p> </div> <div class="example color"> <p>P 元素在在第一个样式为 class="example color" 的 Div 元素中。Div 的索引值为 0。</p> </div> <div class="example color"> <p>P 元素在在第二个样式为 class="example color" 的 Div 元素中。Div 的索引值为 1。</p> </div> <p>点击按钮修改第一个类为 "example" 的 div 元素的背景颜色。</p> <button >
查看文档中有多少个样式 class=”example” 的元素 (使用 NodeList 对的 length 属性):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Web176教程网(web176.com)</title> </head> <body> <div class="example"> 样式 class="example" 的 div 元素 </div> <div class="example"> 另外一个样式 class="example" 的 div 元素 </div> <p class="example">样式 class="example" 的 p 元素</p> <p>点击按钮查看文档中有多少个类名为 "example" 的元素。</p> <button >
修改所有样式 class=”example” 元素的背景颜色:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Web176教程网(web176.com)</title> <style> .example { border: 1px solid black; margin: 5px; } </style> </head> <body> <div class="example"> 样式 class="example" 的 Div 元素 </div> <div class="example"> 另外一个样式 class="example" 的 Div 元素 </div> <p class="example">样式为 class="example" 的 p 元素。</p> <p>这是一个插入在 p 元素中样式 class="example" 的<span class="example">span</span> 元素 。</p> <p>点击按钮修改所有样式 class="example" 的背景颜色。</p> <button class="example" >