当点击触发function a的时候,发现一开始控制台打印的是空,然后才是document文档
如下图所示:
发现浏览器重新解析了dom,我想问,在点击之前,dom不是已经被解析了吗,为什么当执行函数的时候,dom重新被解析和渲染?
附上代码:
//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>
贴测试代码,和测试方法与原因猜测。
测试方法:先注释掉
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
然后我将代码改了
这次后两个是直接出来的