如何使JavaScript函数在页面的所有元素上运行

我想在父元素中添加一个类，该类中有按钮

我正在运行一个JavaScript函数，但它只发生在页面的第一个元素上。请问，我怎样才能防止它在第一次停下来

函数createButtonRapper（）{
var buttonList=document.querySelector（'.article-ul-li[class^=“ck-button”]”）；
var buttonWrapper=buttonList.parentNode.parentNode；
如果（按钮列表）{
buttonWrapper.classList.add（'button-wrapper'）；
}
}
createButtonRapper（）
section{display:flex；flex direction:column；justify content:flex start；}
[class^=“ck按钮”]{
填充：20px；
颜色：白色；
显示：内联块；
}
.ck按钮一{背景：#00C853；}
.ck按钮二{背景：#00B8D4；}
.ck按钮三{背景：#DD2C00；}
.ck按钮四{背景：#311B92；}
.按钮包装{
显示器：flex；
调整内容：灵活启动；
柔性包装：包装；
列表样式：无；
填充：0；
/*li{边距：0$间距*2；}*/
}



按钮-1
按钮-2
按钮-3
按钮-4




按钮-1
按钮-2
按钮-3
按钮-4


使用forEach方法，如下所示：

buttonList.forEach(function(element) { 
  element.classList.add('button-wrapper');
});

因此，完整代码：

function createButtonWrapper () {
    var buttonList = document.querySelectorAll('.article ul li [class^="ck-button"]');

    if (buttonList){
        buttonList.forEach(function(element) { 
          element.classList.add('button-wrapper');
        });
    }
}
createButtonWrapper();

使用forEach方法，如下所示：

buttonList.forEach(function(element) { 
  element.classList.add('button-wrapper');
});

因此，完整代码：

function createButtonWrapper () {
    var buttonList = document.querySelectorAll('.article ul li [class^="ck-button"]');

    if (buttonList){
        buttonList.forEach(function(element) { 
          element.classList.add('button-wrapper');
        });
    }
}
createButtonWrapper();

它应该是只选择第一个元素的
queryselectoral（）
而不是
querySelector（）
。它应该是只选择第一个元素的
queryselectoral（）
而不是
querySelector（）
。