getElementsByClassName( )方法

Posted 乱舞春秋__

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了getElementsByClassName( )方法相关的知识,希望对你有一定的参考价值。

getElementsByClassName( )方法可以返回带有相同类名的所有元素。

语法格式:

document.getElementsByClassName('类名称');

示例:

使用getElementsByClassName( )方法获取5个具有相同类名称的p元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>getElementsByClassName()方法</title>
</head>
<body>
    <p class="para">段落一</p>
    <p class="para">段落二</p>
    <p class="para">段落三</p>
    <p class="para">段落四</p>
    <p class="para">段落五</p>
    <script>
        var paras = document.getElementsByClassName('para'); 
        console.log(paras);
    </script>
</body>
</html>

控制台输出:

 

值得一提的是,HTMLCollection 对象类似于一个包含 HTML 元素的数组,我们可以通过索引来访问其中的元素(索引号从0开始)。

以上是关于getElementsByClassName( )方法的主要内容,如果未能解决你的问题,请参考以下文章

IE8 兼容 getElementsByClassName

兼容性比较好的getElementsByClassName函数

IE浏览器下getElementsByClassName()属性的使用

比较 document.getElementsByClassName().innerHTML 和 int

尝试 GetElementsByClassName [关闭]

JS兼容getElementsByClassName