javascript - 为什么在 Javascript 中某些代码行先于其他代码行执行?没有一个是异步的
问题描述
当我做:
<!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 中执行的?
如果我稍后尝试调试更复杂的代码,这可能是个问题。
解决方案
我正在使用 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>
推荐阅读
- python - 如何在另一个表达式中使用先前的列表
- c++ - Char 数组无法将字符保存为其成员。使用 ATmega8 的密码系统
- youtube-iframe-api - YouTube IFrame API:获取视频描述
- c# - FluentAssertions:如何在每对元素上使用自定义比较来比较两个集合?
- dynamic - 预期数字,得到布尔值
- typescript - 我需要退订 Observable.of 吗?
- sql - T-SQL 遍历日期
- sql - 如何选择动态排名值?
- r - R:如何序列化堆中的 C/C++ 数据?
- sql-server - 哪些特性使 Oracle 和 SQL Server 数据库成为 ORDBMS?