小白教程
所有教程
关于
Search
172.69.58.58
172.69.58.58
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“Met document getelementsbyclassname”的源代码
本页内容
上一节:
Coll_doc_forms
下一节:
Met_document_getelementbyid
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:document.getElementsByClassName()}}[[Category:dom obj document|21]] = HTML DOM getElementsByClassName() 方法 = [[dom obj document|Document 对象]] 获取所有指定类名的元素: <sample title="" desc="" lang="html" hererun="1"> var x = document.getElementsByClassName("example"); </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> </head> <body> <div class="example">第一 Div 元素 class="example"。</div> <div class="example">第二个 Div 元素 class="example"。</div> <p>点击按钮修改第一个 Div 元素的文本信息(索引值为 0 的 class="example")。</p> <button onclick="myFunction()">点我</button> <p><strong>注意:</strong> Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p> <script> function myFunction() { var x = document.getElementsByClassName("example"); x[0].innerHTML = "Hello World!"; } </script> </body> </html> </run> == 定义和使用 == getElementsByClassName() 方法返回文档中所有指定类名的元素集合,作为 NodeList 对象。 NodeList 对象代表一个有顺序的节点列表。NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。 '''提示:''' 你可以使用 NodeList 对象的 [[prop nodelist length|length]] 属性来确定指定类名的元素个数,并循环各个元素来获取你需要的那个元素。 == 浏览器支持 == 表格中的数字表示支持该方法的第一个浏览器的版本号。 {| class="table table-striped table-hover" ! 方法 ! Chrome ! Internet Explorer ! Firefox ! Safari ! Opera |- | getElementsByClassName() | 4.0 | 9.0 | 3.0 | 3.1 | 9.5 |} == 语法 == document.getElementsByClassName(classname) == 参数 == {| class="table table-striped table-hover" ! 参数 ! 类型 ! Description |- | classname | String | 必须。你需要获取的元素类名。 多个类名使用空格分隔,如 "test demo"。 |} == 技术描述 == {| class="table table-striped table-hover" | DOM 版本: | Core Level 1 Document Object |- | 返回值: | NodeList 对象,表示指定类名的元素集合。元素在集合中的顺序以其在代码中的出现次序排序。 |} == 更多实例 == 获取包含 "example" 和 "color" 类名的所有元素: <sample title="" desc="" lang="html" hererun="1"> var x = document.getElementsByClassName("example color"); </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</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 onclick="myFunction()">点我</button> <p><strong>注意:</strong> Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p> <script> function myFunction() { var x = document.getElementsByClassName("example color"); x[0].style.backgroundColor = "red"; } </script> </body> </html> </run> 查看文档中有多少个样式 class="example" 的元素 (使用 NodeList 对的 length 属性): <sample title="" desc="" lang="html" hererun="1"> var x = document.getElementsByClassName("example").length; </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</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 onclick="myFunction()">点我</button> <p><strong>注意:</strong> Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p> <p id="demo"></p> <script> function myFunction() { var x = document.getElementsByClassName("example"); document.getElementById("demo").innerHTML = x.length; } </script> </body> </html> </run> 修改所有样式 class="example" 元素的背景颜色: <sample title="" desc="" lang="html" hererun="1"> var x = document.getElementsByClassName("example"); var i; for (i = 0; i < x.length; i++) { x[i].style.backgroundColor = "red"; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</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" onclick="myFunction()">点我</button> <p><strong>注意:</strong> Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p> <script> function myFunction() { var x = document.getElementsByClassName("example"); var i; for (i = 0; i < x.length; i++) { x[i].style.backgroundColor = "red"; } } </script> </body> </html> </run> == 相关页面 == CSS 教程: [[css selectors|CSS 选择器]] CSS 参考手册: [[sel class|CSS .class 选择器]] HTML DOM 参考手册: [[met element getelementsbyclassname|element.getElementsByClassName()]] HTML DOM 参考手册: [[prop html classname|className 属性]] HTML DOM 参考手册: [[prop element classlist|HTML DOM classList 属性]] HTML DOM 参考手册: [[dom obj style|HTML DOM Style 对象]] [[dom obj document|Document 对象]]
返回至“
Met document getelementsbyclassname
”。
上一节:
Coll_doc_forms
下一节:
Met_document_getelementbyid