HTML模板没有'；不能使用For-In-Loop JavaScript_Javascript_Html_Templates_For Loop

HTML模板没有'；不能使用For-In-Loop JavaScript

javascript html templates for-loop

HTML模板没有'；不能使用For-In-Loop JavaScript,javascript,html,templates,for-loop,Javascript,Html,Templates,For Loop,编辑：下面是关于以下问题的JSFIDLE 所以我试图用JavaScript激活一个模板，但它有一段时间不起作用，最后我通过在一个看似无关的代码块中将for-In循环更改为for循环来修复它下面的代码是我更改为For循环的For In循环。注释掉的代码是不起作用的原始代码，而未注释的for循环是现在起作用的代码。此代码用于更改类元素所有实例中文本的字体大小： var release4 = document.getElementsByClassName("release-4"); // for

编辑：下面是关于以下问题的JSFIDLE

所以我试图用JavaScript激活一个模板，但它有一段时间不起作用，最后我通过在一个看似无关的代码块中将for-In循环更改为for循环来修复它

下面的代码是我更改为For循环的For In循环。注释掉的代码是不起作用的原始代码，而未注释的for循环是现在起作用的代码。此代码用于更改类元素所有实例中文本的字体大小：

var release4 = document.getElementsByClassName("release-4");

// for (item in release4){
//  release4[item].style.fontSize = "2em";
// };

for (var i = 0 ; i < release4.length ; i++) {
  release4[i].style.fontSize = "2em";
}

下面是与之配套的HTML：

<html>
<head>
  <title>Manipulate the DOM</title>
</head>
<body>
  <div id="release-0">
    <p class="release-4"> Here is some text, add a class "done" to the parent div</p>
  </div>

  <div id="release-1">
    <p>remove the #release-1 div</p>
  </div>

  <h1>Change this text to finish release 2</h1>

  <div id="release-3">
    <p class="release-4"> add CSS to this div</p>
  </div>

  <template id="hidden">
    <div>
      <h1> Congrats! You finished the challenge.</h1>
      <img src="http://media.giphy.com/media/2UpzC3iPenf44/giphy.gif">
    </div>
  </template>

<script type="text/javascript" src="home_page.js"></script>
</body>
</html>


操纵DOM
这里有一些文本，在父div中添加一个类“done”
拆下#释放-1 div
将此文本更改为完成版本2
将CSS添加到此分区
恭喜！你完成了挑战。

我的问题是为什么更改For循环会产生不同？谢谢大家

JS文件中的所有其他代码只影响IDs release-0、release-1和release-3以及h1标记。类名、显示、innerHTML和背景色是对它们所做的唯一更改。

如果在for-in循环中I

console.log（）

项产生：
0
1
length
item
namedItem

我认为length
，ìtem
和namedItem
会造成错误
更新：
使用数组。从
中，它按预期工作
var release4 = Array.from(document.getElementsByClassName("release-4"));
for (item in release4){
    release4[item].style.fontSize = "2em";
};

我删除了我的答案-你是对的，我没有思考。为了测试这一点，您可以在JSFIDLE上设置代码副本，让我们运行/fork。谢谢您的建议！我已经在代码中添加了小提琴。你说得绝对正确！我现在记得，出于某种原因，“for-in”循环还访问了调用“getElementsByClassName”时存储的属性，这就是它被破坏的原因。
var release4 = Array.from(document.getElementsByClassName("release-4"));
for (item in release4){
    release4[item].style.fontSize = "2em";
};