Question

我试图从多个div元素中获取数据属性的值。使用

将元素捕获到变量中

querySelectorAll（）

当我遍历包含该元素的变量并使用 getAttribute（）方法时，我收到错误：

<div id="container">
  <div class="box" data-speed="2" id="one"></div>
  <div class="box" data-speed="3" id="two"></div>
  <div class="box" data-speed="4" id="three"></div>
  <div class="box" data-speed="5" id="four"></div>
  <div class="box" data-speed="6" id="five"></div>
</div>

JS：

(function() {

var boxes = document.getElementsByClassName("box");

for (var i = 0; i < boxes.length; i++) {

var r = Math.floor((Math.random() * 254) + 1);

boxes[i].style.background = "rgba(" + r + "," + i*30 + "," + i*45 + ", 1)";

}
})();

var divArray = [];
var divs = document.querySelectorAll(".box");

for (i = 0; i <= divs.length; i++) {

console.log(divs[i]);

var speed = parseInt(divs[i].getAttribute("data-speed"));

};

Jsfiddle https://jsfiddle.net/kshatriiya/L8xsvzL1/1/

当我

的console.log（div的[I]）

它显示了元素，我不知道为什么我无法在其上使用属性方法。

任何指针都会非常感激！

Answer 1

javascript中的数组是基于0索引的

使用

for (i = 0; i < divs.length; i++) {

而不是

for (i = 0; i <= divs.length; i++) {

由于这个原因，你得到的最后一个div [i]为undefined，这就是为什么控制台显示错误

更新小提琴：https://jsfiddle.net/n3qhan4e/

Answer 2

很简单

document.querySelectorAll('.box').forEach(elem => console.log(elem.getAttribute('data-speed')));

querySelectorAll（）返回的元素的.getAttribute（）方法

2 个答案: