DOMContentLoaded事件如何实现JavaScript的DOM加载就绪？

本文共计2655个文字，预计阅读时间需要11分钟。

一、回顾当年，在整理网页时js全依赖各种DEMO中copy出来，然后东拼西凑的朦胧岁月之后，自然决然地打算算放弃这种处处拿来主义的风气，然后开启通往高大的前之路。

一、扯淡部分

回想当年，在摆脱写页面时js全靠从各种DEMO中copy出来然后东拼西凑的幽暗岁月之后，毅然决然地打算放弃这种处处“拿来主义”的不正之风，然后开启通往高大上的“前端攻城狮”的飞升之旅。想想都有些小激动呢~然而人生不如意者十之八九，刚踏上征程就经常会被各种Error虐到体无完肤，有时候甚至会被在现在看来很低级的bug折磨得生不如死。但没有一种成长是不需要付出代价的，也就是那段刚跳入泥潭的日子开启了让自己成为一名真正的JSer的大门，也使自己在奔向高大上的路上让“见招拆招、兵来将挡”成为常态，以至于后来都慢慢觉得，做一个东西不遇上几个bug心里就没有稳妥扎实的安全感。再后来也就学着不断去安慰自己：踩到脚底下的bug越多，离翻过那座墙也就不远了~

回望一路走来的林林种种，有一个bug大概是每个JSer在初入大门时都遇到过的。那就是用js获取页面元素的时候经常会报出一个TypeError:Cannotreadproperty‘XXX’ofnull.大意就是根本就没找到你要找的元素，更别说你要对它进行操作了。明明页面上有这个元素，但在js里偏偏获取不到，这让很多刚接触js不久的童鞋都伤透了脑筋，于是疯狂百度谷歌，最后才发现造成这个低级bug的始作俑者竟然是window.onload，也就是文档未就绪，DOM树还没有建完就开始对节点进行操作从而导致的错误。

扯了那么多，终于扯到跟本文主题相干的东西了：domReady，也就是所谓的“文档就绪”。我们对DOM节点的任何操作在DOM树创建之后就可以进行。