大家都知道瀏覽器會把遠端過來的html解析成dom模型，有了dom模型，html就變成了xml格式，否則的話就是一堆“雜亂無章”的string，這樣的話沒人知道是什么鳥東西，js也無法什么各種getElementById，所以當瀏覽器解析成dom結構后，瀏覽器才會很方便的根據css各種規則的選擇器在dom結構中找到相應的位置，那下一個問題自然就嚴重了，那就是必須深入的理解dom模型。

一：理解Dom模型

首先我們看下面的代碼。
 
 

用這個代碼我們很容易的畫出dom樹。

當你看到這個dom樹的時候，是不是頓時感到信息量特別大，很簡單，因為是樹，所以就具有了一些樹的特性，比如 “孩子節點”，“父親節點”，

“兄弟節點”，“第一個左孩子”，“最后一個左孩子”等等，對應著后續我要說的各種情況，一起來看看html被脫了個精光的感覺是不是很爽~~~~

1：孩子節點

找孩子節點，本質上來說分兩種，真的只找“孩子節點”，“找到所有孩子（包括子孫）“

<1> 后代選擇器

首先看下面的html，我想你可以輕而易舉的繪制出dom樹了，那下面的問題就是怎么將body中所有的后代span都繪上red。