Javascript 循环DOM基础？

我当然认为

textContent

属性的值会被

I

覆盖，但是从第一次通过时，

I

立即跳到5

---

我只是想了解这背后的逻辑。谢谢，非常感谢您的帮助。

如果将

p

的声明留在循环之外，那么元素对象只创建一次，而如果将其放入循环中，则每次迭代都会创建一个新对象

您在第一种情况下看到的原因是

p

是一个单独的对象，您一次又一次地将其附加到

a

。因为它是同一个对象，所以修改它会到处改变它

在第二种情况下，您将有多个不同的元素对象附加到

a

。修改一个对其他的没有影响

EDIT:发生这种情况是因为

console.log

实际上是在循环完成后记录的，正如Patrick Evans在评论中提到的那样

另外，您是否注意到

a

始终有一个元素，即使我们多次在它上面调用

appendChild

如果您希望有多个不同的

p

元素，但只有一个

p

对象递增，那么此代码应该可以工作：

<a><p>1</p></a>
<a><p>2</p></a>
<a><p>3</p></a>
<a><p>4</p></a>
<a><p>5</p></a>

let p=document.createElement（“p”）；
设a=document.createElement（“a”）；
对于（让i=1；i这是最好的理解，如果我们一步一步地阅读您的代码：

let p = document.createElement("p");
let a = document.createElement("a");

for(let i=1; i <= 5; i++) {
    p.textContent = i;      
    a.appendChild(p.cloneNode(true));
    console.log(a);
}

据我所知，
console.log
是一个介于同步和异步之间的灰色区域。很明显，您显示的所有控制台日志都显示了整个for循环完成后的状态，即使它们被称为中间循环

我们通常可以将
console.log
看作是同步的，因为它不返回任何内容。但实际上它调用的浏览器函数超出了javascript的范围。我认为，如果您记录的内容足够“简单”（字符串、浅层对象等），那么可以立即计算日志显示的内容

但是如果您记录的内容足够复杂（比如DOM元素），则浏览器可能只保存对对象的引用，然后在浏览器开始向我们显示日志时对其进行解析。在这种情况下，这将在整个for循环完成后进行。
发生这种情况是因为变量
p
是指向您创建的dom对象的指针。它不是数据本身。它是通过引用传递数据

基本上，当您附加它时，您将引用附加到对象，而不是多次复制（克隆）对象

这就是为什么当您更改对象的值时，所有引用它的位置都会受到影响

正如您所说，要解决此问题，只需将p=document.createElement（“p”）；

放入for循环中，或者交替使用p.cloneNode（true）进行复制（克隆）您的对象。

即使使用单个对象，为什么当前文本内容不会被控制台的.log增量抓取？我知道。我只想知道为什么

I=1

的结果是

5

，直到

I=5

为止。我刚刚在控制台上尝试了它进行测试，这就是我得到的结果。我回答了您的问题正确的方法检查它。

<a><p>1</p></a>
<a><p>2</p></a>
<a><p>3</p></a>
<a><p>4</p></a>
<a><p>5</p></a>

let p = document.createElement("p");
let a = document.createElement("a");

for(let i=1; i <= 5; i++) {
    p.textContent = i;      
    a.appendChild(p.cloneNode(true));
    console.log(a);
}

let p = document.createElement("p"); // create an element

// loop through this 5 times
for(let i=1; i <= 5; i++) {
    p.textContent = i;      
    a.appendChild(p);
    console.log(a);
}

// loop through this 5 times
for(let i=1; i <= 5; i++) {
    let p = document.createElement("p"); // create an element
    p.textContent = i;      
    a.appendChild(p);
    console.log(a);
}