Question

var table = document.querySelectorAll(".numbers");

function seppuku() {
  for (let i in table) {
    table[i].style.color = "red";
  }
}
seppuku();

<div class="numbers">1</div>
<div class="numbers">2</div>
<div class="numbers">3</div>

所以这是我的代码。我的问题是：为什么console.log在seppuku（）函数调用后会传递“无法设置未定义的属性'颜色”？

这不像var表没有定义！实际上，它具有全局范围，应该可用于'for ... in'循环。此外，此功能工作，所选元素现在具有颜色：红色属性。尽管在控制台中进行通信，它的工作原理是什么？

Answer 1

您使用for...in语句迭代对象的可枚举属性。在这种情况下，table对象包含以下可枚举属性。

{
  "0": <div class="numbers">1</div>,
  "1": <div class="numbers">2</div>,
  "2": <div class="numbers">3</div>,
  "length": 3,
  "item": function item() { [native code] },
  "entries": function entries() { [native code] },
  "forEach": function forEach() { [native code] },
  "keys": function keys() { [native code] },
  "values": function values() { [native code] }
}

因此，在第4次迭代中，i变为length并且表[＆＃39; length＆＃39;] .style会引发错误。我们可以使用forEach方法来解决此问题。

＆＃13;

var table = document.querySelectorAll(".numbers");

(function seppuku() {
   table.forEach(function(item) {
   item.style.color = "red";
   });
})();

＆＃13;

<div class="numbers">1</div>
<div class="numbers">2</div>
<div class="numbers">3</div>

＆＃13;

Answer 2

使用let i in table将i的最后一个元素作为length，因此结果为table['length'].style.color = "red";，这是不正确的，因为没有元素table['length']并返回{{ 1}}。更好的方法是循环遍历undefined的{{1}}，它将是0,1和2.

length

table

Answer 3

使用简单的for循环而不是for..in

＆＃13;

<!DOCTYPE html>
<html>
<body>

<div class="numbers">1</div>
<div class="numbers">2</div>
<div class="numbers">3</div>

<script>

function seppuku() {

var table = document.querySelectorAll(".numbers"); 
  for (let i=0;i<table.length;i++ ) {
   
    table[i].style.color = "red";
  }
}
seppuku();
</script>

</body>
</html>

＆＃13;

For .. in循环不能设置undefined的属性

3 个答案: