javascript - 如何使 getElementsByClassName 对所有元素进行更改？

Question

我是 javascript 的新手，我想将更改应用于具有相同类名的所有元素，但我只能让我的脚本对第一个元素进行更改。

这是我的脚本。提前致谢。

function ReadMore(){  
var txt = document.getElementsByClassName('pa')[0].innerHTML;


var btn=document.createElement("BUTTON");
var t=document.createTextNode("...");
btn.appendChild(t);
btn.onclick = function(){
document.getElementsByClassName("pa")[0].innerHTML= txt;
 };

if (txt.length > 350){
var split = txt.slice(0, 50); 
document.getElementsByClassName("pa")[0].innerHTML= split;
document.getElementsByClassName("pa")[0].appendChild(btn);
}}

Answer 1

这是一种编写代码的方法，我只更改循环代码，我不知道您想对元素做什么，但是如果您想对所有项目都这样做，可以使用此代码

function ReadMore(){  

   var elements = document.getElementsByClassName('pa');

   for (var i = 0; i < elements.length; ++i) {  
       var item = elements[i];    
       var txt = item.innerHTML;
       var btn = document.createElement("BUTTON");
       var t = document.createTextNode("...");

       btn.appendChild(t);
       btn.onclick = function(){
         item.innerHTML= txt;
       };

       if (txt.length > 350){
           var split = txt.slice(0, 50); 
           item.innerHTML = split;
           item.appendChild(btn);      
       }    
}}