用getElementsByClassName()和innerText搭配使用输出为空——undefined

最新推荐文章于 2022-12-03 11:02:35 发布

ZIK-J

最新推荐文章于 2022-12-03 11:02:35 发布

阅读量1.7k

点赞数

分类专栏： web前端文章标签： javascript css html html5

本文链接：https://blog.csdn.net/weixin_46987157/article/details/112170709

版权

web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

用getElementsByClassName()和innerText搭配使用输出为空——undefined：

想要提取h2标签中的文本“44”，但是运行代码后控制台只有undefined。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <h2 class="jiu">44</h2>
    <script>
        var jj = document.getElementsByClassName("jiu").innerText;
        console.log(jj)
    </script>
</body>

</html>

网页上输出：44 控制台输出：undefined

原因分析：

getElementsByClassName()方法返回的对象类型为object，即对象。必须先转换为数组或其他类型。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <h2 class="jiu">44</h2>
    <script>
        var jj = document.getElementsByClassName("jiu");
        console.log(jj)//输出类型是html 元素＋对象 的集合
        console.log(typeof (jj))//输出类型是对象类型
    </script>
</body>

</html>

解决方案：

将对象转换为数组类型输出。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <h2 class="jiu">44</h2>
    <script>
        var jj = document.getElementsByClassName("jiu")[0].innerText;
        console.log(jj)//输出：44
        console.log(typeof (jj))//输出：string
    </script>

</body>

</html>