javascript - 我可以像这样按顺序选课吗？

Question

所以我这里有由 Wordpress 生成的 HTML。我想使用 JS 单独选择 DIV。这可能吗？我可以按照 JS 在 HTML 中找到它们的顺序来选择它们吗？

我尝试过类似的事情是否可能(通过添加索引号)，但我相信这仅用于 LI 元素。但你明白了。最终结果是使用 .className 为每个 div 对象添加不同的类名

var koffie = document.getElementsByClassName("g-gridstatistic-item-text2")[0];
var brain = document.getElementsByClassName("g-gridstatistic-item-text2")[1];
var tevred = document.getElementsByClassName("g-gridstatistic-item-text2")[2];

console.log(koffie);
console.log(brain);
console.log(tevred);

<div class="g-gridstatistic-wrapper g-gridstatistic-3cols">
    <div class="g-gridstatistic-item">
    <div class="g-gridstatistic-item-wrapper">
    <div class="g-gridstatistic-item-text1 odometer" data-odometer-value="4"></div>
    <div class="g-gridstatistic-item-text2">Kopjes koffie per dag</div>
    </div>
    </div>
    <div class="g-gridstatistic-item">
    <div class="g-gridstatistic-item-wrapper">
    <div class="g-gridstatistic-item-text1 odometer" data-odometer-value="14"></div>
    <div class="g-gridstatistic-item-text2">Brainstormsessies per week</div>
    </div>
    </div>
    <div class="g-gridstatistic-item">
    <div class="g-gridstatistic-item-wrapper">
    <div class="g-gridstatistic-item-text1 odometer" data-odometer-value="12"></div>
    <div class="g-gridstatistic-item-text2">Tevreden klanten</div>
    </div>

Answer 1

您的 JavaScript 代码在检查 DOM 是否已加载之前会先查找 DOM 元素。尝试将其包装在事件监听器中，如下所示:

JS

document.addEventListener('DOMContentLoaded', function () {

var koffie = document.getElementsByClassName("g-gridstatistic-item-text2")[0];
var brain = document.getElementsByClassName("g-gridstatistic-item-text2")[1];
var tevred = document.getElementsByClassName("g-gridstatistic-item-text2")[2];

//console.log(koffie);
//console.log(brain);
//console.log(tevred);

/*  to evidence that targeting works:  */
brain.classList.add('addedClass'); 

});

CSS

.addedClass {
  font-size:22px;
  color:red;
}

完整演示在这里: https://jsbin.com/saxizeyabo/edit?html,css,js,console,output