網頁基礎（二）結構
文章目錄
一、 節點樹及節點間的關係
1.DOM 定義： 模板是也
DOM 是 W3C （萬維網聯盟）的標準，其英文全稱 Document Object Model ， 即文檔對象模型。 它定義了訪問 HTML 和 XML 文檔的標準：
W3C 文檔對象模型（ DOM ）是中立於平臺和語言的接口 ，它允許程序和腳本動態地訪 問和更新文檔的內容、結構和樣式。 例如JavaScript動態更新HTML。
2 W3CDOM標準被分爲 3 個不同的部分。
（1）核心 DOM ：針對任何結構化文檔的標準模型。
（2） XML DOM ： 針對 XML 文擋的標準模型。
（3） HTML DOM ： 針對 HTML 文檔的標準模型。
3 HTML 文檔的所有內容都是節點。
- 口 整個文檔是一個文檔節點。
- 口 每個 HTML 元素是元素節點。
- 口 HTML 元素內的文本是文本節點。
- 口 每個 HTML 屬性是屬性節點。
- 口 註釋是註釋節點。
4 節點樹
HTML DOM 將 HTML 文檔視作樹結構，這種結構被稱爲節點樹
通過 HTMLDOM，樹中的所有節點均可通過 JavaScript訪問，所有 HTML 節點元素均可被修改， 也可以被創建或刪除。
二、CSS選擇器
1.作用
定位節點 ，根據不同的節點設置不同的樣式規則
2.選擇方法
(1）id
div 節點的 id 爲 container，那麼就 可以表示爲＃container，其中＃開頭代表選擇 id ，其後緊跟 id 的名稱。
(2)class
如果我們想選擇 class 爲 wrapper 的節點，便可以使用.wrapper，這裏以點（．）開頭代表選擇 class ，其後緊跟 class 的名稱。
（3）標籤
根據標籤名篩選，例如想選擇二級標題，直接用 h2 即可
（4）嵌套選擇
空格分隔嵌套：
各個選擇器之間加上空格分隔開便可以代表嵌套關係， 如 #container .wrapper p 則代表先選擇 id 爲 container 的節點，然後選中其內部的 class 爲 wrapper 的節 點，然後再進一步選中其內部的 p 節點
不加空格(,)代表並列關係：
（5）CSS語法舉例
3.其他選擇器
Xpath