Everything about DOM

The DOM is short for Document Object Model. But the M in DOM could just as easily stand for Map. Since the DOM is just a MAP of the web page that’s currently loaded in the browser.

• DOCUMENT = the web page
• OBJECT = virtual objects
• MODEL = map

不到两个月前连DOM的数据结构都搞不清楚，现在回想一下被hr羞辱实在是理所应当。后来搞清楚了大致的tree结构然而还是没有理解透彻，以至于上战场后还是做不到举一反三，无法handle一些DOM操作的具体case。真是应该好好从零开始学习。

最近被问到如何实现在一个网页里统计并高亮与查找text match的text。感觉有好多细枝末节啊，比如何时调用函数（我能想到的就是setTimeout，具体怎么应用将来再仔细研究这个javascript函数的时候可以补充）；比如一个特别tricky的case，如果我要查找“Hello world”，网页的html里有这么一段：<b>Hello</b> world，这种情况下其实也是符合要求的呀，那怎么办呢？当时就蒙圈啦，难道利用regex么？其实是有种东西叫Node.nodeType的。

比如说

• Node.ELEMENT_NODE: An Element node such as <p> or <div>
• Node.TEXT_NODE: The actual Text of Element or Attr

那回到刚才的tricky case是不是就遍历DOM tree中间所有nodeType是TEXT_NODE的node呢。

好厉害啊！

油管一个介绍DOM的playlist