innerText修改querySelector和getElementsByClassName所获取元素的文本

最新推荐文章于 2024-06-20 14:42:51 发布

weixin_45545395

最新推荐文章于 2024-06-20 14:42:51 发布

阅读量1.3k

点赞数

文章标签： javascript js html5 dom

本文链接：https://blog.csdn.net/weixin_45545395/article/details/118560247

版权

innerText修改querySelector和getElementsByClassName所获取元素的文本

写一个网页的JS时，innerText修改通过querySelector和getElementsByClassName所获取得的DOM元素中的文本时，遇到了一些问题。利用querySelector和getElementsByClassName获取DOM元素会返回不同的值，但返回的数据类型都是对象。

<body>
    <div class="test1">手在键盘敲很轻,我给的思念很小心</div>
    <script>
        console.log( document.querySelector('.test1'));
        console.log( document.getElementsByClassName('test1'));
        console.log( typeof(document.querySelector('.test1')));
        console.log( typeof(document.getElementsByClassName('test1')));
    </script>
</body>

在这里插入图片描述

修改div中的内容时，可以很轻易修改querySelector获取到的DOM元素中的文本，但无法直接修改getElementsByClassName获取到的DOM元素文本，但通过控制台可看出文本已经添加到对象中。

<body>
    <div class="test1">手在键盘敲很轻,我给的思念很小心</div>
    <div class="test2">手在键盘敲很轻,我给的思念很小心</div>
    <script>
        console.log( document.querySelector('.test1'));
        console.log( document.getElementsByClassName('test2'));
        document.querySelector('.test1').innerText='周杰伦';
        document.getElementsByClassName('test2').innerText='周杰伦';
    </script>
</body>

在这里插入图片描述
此时可将getElementsByClassName获取到的对象改为数组，再修改其中的文本

<body>
    <div class="test2">手在键盘敲很轻,我给的思念很小心</div>
    <script>
        console.log( document.getElementsByClassName('test2'));
        document.getElementsByClassName('test2')[0].innerText='周杰伦';
    </script>
</body>