javascript - DOM重新被解析-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI聊天问答 Agent智能体 AI文本写作 AI绘画作图 AI设计工具 AI视频创作 AI音频制作 AI办公学习 AI编程开发 AI提示词

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

javascript - DOM重新被解析

天蓬老师 2017-04-11 11:12:06

[JavaScript讨论组]

717

当点击触发function a的时候，发现一开始控制台打印的是空，然后才是document文档
如下图所示：

发现浏览器重新解析了dom，我想问，在点击之前，dom不是已经被解析了吗，为什么当执行函数的时候，dom重新被解析和渲染？

附上代码：

//css
    
//html
  
　　　　啊啊啊啊啊啊啊啊啊啊啊
    　　啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    　　啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    　　啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊　　 
  
//js

天蓬老师

欢迎选择我的课程，让我们一起见证您的进步~~

全部回复(2)

伊谢尔伦2017-04-11 11:14:06 2楼

webkit内核对console.log()会延迟执行，惰性求值，换成alert就可以看到是立即显示dom的。
参考链接

赞 +0

添加回复

高洛峰2017-04-11 11:14:06 1楼

贴测试代码，和测试方法与原因猜测。

  <body>
　　　　<p class="box1">p p</p>
  </body>

  <script type="text/javascript">
    var doc = document.querySelectorAll('.box1')[0];
    //var doc = document.getElementsByClassName('box1')[0];
    console.log(doc,doc.innerHTML);
    doc.innerHTML = 'test';
    for(var a=0;a<4000;a++){
        console.log(1)
    }
  </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未走完时已经被正确查找了。所以猜测可能是浏览器多线程和模块引起的。如果能找到相关资料再来补充。

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>