1

当我做：

<!DOCTYPE html>
<html><head><title></title></head>
<body>
    <div id="root"></div>
    <script>
        let a = document.getElementById('root');
        console.log(a);
        a.append('cat');
        console.log(a);
    </script>
</body></html>

我希望控制台是：

<div id="root"></div>
<div id="root">cat</div>

但我得到：

<div id="root">cat</div>
<div id="root">cat</div>

它就像 .append('cat') 命令在第一个 console.log() 命令之前运行。这怎么样？我认为编程代码总是按顺序执行的。我在哪里可以了解哪些代码是按顺序执行的，哪些不是在 Javascript 中执行的？

如果我稍后尝试调试更复杂的代码，这可能是个问题。

4

1 回答 1

1

我正在使用 firefox，并且得到了（在 stackOverflow 中）的预期输出。但是，innerText 和 innerHTML 记录的“意外行为”与您在作为 .html 文档运行时遇到的相同。

<div id="root"></div>
<div id="root">cat</div>

看来“问题”是由于来自 DOM 的 html 节点的控制台日志实时引用了 DOM。因此，如果您更改节点，控制台日志将更新以显示该更改。
因此，如果旧节点的特定时间控制台日志对您来说是重要信息，则不应控制台日志节点。相反，我们使用 innerHTML 将信息作为不可变字符串获取，该字符串不会随节点一起更新。 

<!DOCTYPE html>
<html><head><title></title></head>
<body>
    <div id="root"></div>
    <script>
        let a = document.getElementById('root');
        console.log(a);
        a.append('cat');
        console.log(a);
    </script>
</body></html>

于 2021-01-21T00:44:40.027 回答