通俗易懂講DOM

Tech In Pieces發表於2021-01-04

之前寫過一篇文章 《究竟什麼是DOM?》
但是雲裡霧裡術語搞了一大堆 也沒搞明白這究竟是什麼東西。

本篇文章就是來通俗易懂的解釋什麼是DOM
 DOM(文件物件模型)是針對HTML和XML文件的一個API,通過DOM可以去改變文件。
 跟狗屁一樣的解釋 對吧?
最好是用例子來解釋:
  舉個例子:我們有一段HTML,那麼如何訪問第二層第一個節點呢,如何把最後一個節點移動到第一個節點上面去呢?
  DOM就是定義瞭如果做類似操作,那麼應該怎麼做的標準。比如用getElementById來訪問節點,用insertBefore來插入節點。
  當瀏覽器載入HTML時,會生成相應的DOM樹
  簡而言之,DOM可以理解為一個訪問或操作HTML各種標籤的實現標準。
  對於一個HTML來說,文件節點Document(看不到的)是它的根節點,對應的物件便是document物件(嚴格講是子HTMLDocument物件,下面單獨介紹Document型別時會指出)。
  換句話說存在一個文件節點Document,然後它有子節點,比如通過document.getElementsByTagName(“html”),得到型別為元素節點的Element html。
  每一段HTML標記都可以用相應的節點表示,例如:
  HTML元素通過元素節點表示,註釋通過註釋節點表示,文件型別通過文件型別節點表示等。
  一共定義了12種節點型別,而這些型別又都繼承自Node型別。

詳細的節點型別介紹會在另外一篇博文《DOM(文件物件模型)的12個節點型別》中詳細講述。

所以總結一下 我們不要想什麼是DOM,而是我們要時刻記住DOM樹

相關文章