当点击触发function a的时候，发现一开始控制台打印的是空，然后才是document文档
如下图所示：
发现浏览器重新解析了dom，我想问，在点击之前，dom不是已经被解析了吗，为什么当执行函数的时候，dom重新被解析和渲染？
附上代码：
3
646//css
<style>
.box1{
color:red;
}
</style>
//html
<body>
<p class="box1" onclick="a()">啊啊啊啊啊啊啊啊啊啊啊</p>
<p class="box1">啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p class="box1">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p class="box1">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
</body>
//js
<script type="text/javascript">
function a(argument){
console.log(document);
var time = +new Date();
while(true){
if(+new Date()-time>3000){
break;
}
}
}
</script>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
贴测试代码，和测试方法与原因猜测。
测试方法：先注释掉
doc.innerHTML = 'test'，正常打开网页，打开控制台，去掉注释，刷新页面。结果：
1.第一行：“ ，p p”;
2.for循环开始输出‘1’;
3.for循环未走完页面上p p变为‘test’;
4.循环走完，第一行变为“p.box1，p p”;
说明：本来以为
querySelectorAll和getElementsByClassName前者为静态接口，后者为动态接口，是动态接口引起的，测试发现不是。猜测：可以看到js未走完没有正确输出
“p.box1，p p”，所以猜测与异步有关，可能是控制台的数据显示是异步或者选择器有相关的异步模块？但是控制台为正常输出时，页面内容已经发生了变化，说明正确dom在js未走完时已经被正确查找了。所以猜测可能是浏览器多线程和模块引起的。如果能找到相关资料再来补充。我目前也不知道是为什么但是感觉应该跟你写的那个while有关
我试了一下：
我打印了一下document在 function之前
打印出来是渲染好的document
然后在点击 会空一下再出来document
然后我将代码改了
这次后两个是直接出来的