JS循环遍历数组来改变段落的innerHTML

Question

我还在学习 js 的基础知识。在这个问题中，我的预期结果是得到 a,b,c,d 但它给出了 a,b,c,c。谁能解释一下？当我输入 x[3] 时，它会打印 a,b,c,d。

<p>a</p>
<p>b</p>
<p>c</p>
<p id="demo">d</p>

<script>
    var x = document.getElementsByTagName("p");
    var i;
    for (i = 0; i < x.length; i++) {
        document.getElementById("demo").innerHTML = x[i].innerHTML;
    }
</script>

Answer 1

这里的问题是，当您的代码循环到带有“演示”ID 的 p 标记时，它会将自己的值读取为“c”，因为这是您在上一次迭代中分配给它的值。

这样<p id="demo">d</p>就变成了

a 代表 i=0

b 代表 i=1

c 代表 i=2

当它到达 i=3 时，它读取自己的值为“c”，因此它重新分配自己为“c”。

Answer 2

#demo 本身是document.getElementsByTagName 找到的最后一个元素。它的innerHTML 首先设置为第一个<p> 元素的innerHTML，然后是第二个，然后是第三个。在最后一次迭代开始时，由于第三个段落元素，它的 innerHTML 为“c”。然后它将其innerHTML 设置为它自己的innerHTML，因此它最终保持为“c”。