使用document获取元素并赋值时的一些记录

最新推荐文章于 2022-12-09 21:18:28 发布

原创最新推荐文章于 2022-12-09 21:18:28 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

本文介绍了如何使用JavaScript中的getElementsByClassName方法来遍历带有特定类名的元素，并对这些元素的内容进行修改。通过实例展示了如何截取和替换文本内容，特别关注了与getElementById方法的区别。

getElementsByClassName和getElementById的区别，一个可以直接使用innerHTML一个返回的是数组，要转换一下
id在HTML中要唯一，class没必要唯一，所以遍历元素并赋值时使用class比较好。
使用getElementsByClassName方法获取a标签中的value值并重新赋值。

<a><img class="zdjq" src="">text</a>

for (let i = 0; i < document.getElementsByClassName("zdjq").length; i++) {
    var str1=document.getElementsByClassName("zdjq")
    var s = str1[i].innerText;
    var str20 = s.substring(0, 20);
    document.getElementsByClassName("zdjq")[i].innerHTML=str20+"...";
    console.log(s);
}

最终实现效果：只显示两行，多余的用…代替
用getElementsByClassName()和innerText搭配使用输出为空——undefined：
https://blog.csdn.net/weixin_46987157/article/details/112170709
getElementsByClassName和getElementById的区别：
https://blog.csdn.net/mozuncangtianbaxue/article/details/78789821