# 網頁JS 小知識01: 什麼是DOM ###### tags: `JavaScript` `HTML` ![](https://i.imgur.com/GIlmLvF.png) 圖片來源: [w3.org](https://www.w3.org/TR/WD-DOM/introduction.html) ### DOM簡介 DOM(Document Object Model)文件物件模型是什麼呢？根據[Mozilla官方文件](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction) ： >The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web. > The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. 更白話一點來看，DOM其實就是一種介於HTML跟其它程式語言間的[API](https://www.youtube.com/watch?v=s7wmiS2mSXY&ab_channel=MuleSoftVideos)，其它程式語言(通常是JavaScript)可藉由DOM來控制HTML或是XML文件。 >以下是我幫助理解的方式，請斟酌參考 >**Document** 指的就是HTML或是XML文件 >**Object** 指的就是文件裡面的物件，那麽誰是物件呢？我們一定會用到的tag、屬性、文字等都是！ >**Model** 指的就是這些物件佈局的方式 *** ### DOM的資料結構 有些人看網路文章會看到DOM的樹狀結構介紹，其實就是在講DOM當中的資料分類以及搜尋方式，在標記特定物件時，DOM會順著父層 -> 子層這樣的路徑去找到要標記的對象。 例如下方有個簡單的HTML程式碼，如果用程式語言去標記了h1這個物件，但程式在實際執行上會從html -> body -> h1 去找到該物件。 ```htmlembedded= <html> <head> <title>I Love Teemo </title> </head> <body> <h1 class="aboutTeemo"> Teemo is not tall, but cute. </h1> </body> </html> ``` *** ### 如何標記DOM物件與加工 DOM所包含的物件，其實就代表了網頁內容，所標記DOM的物件之後，就可以對整個網頁內容進行加工。目前大部分都是使用JavaScript來控制DOM物件。 舉例，如果我想要在終端機上面印出剛才h1裡面的字，要怎麼辦呢？ 這時候我們可以拆解步驟 1.設變數 2.抓取DOM物件 3.在終端機印出 #### 1.設變數 ```javascript= const a = // 用let, var也可以，但用var可能會變數提升的可能不得不留意 ``` #### 2.抓取DOM物件 ```javascript= const a = document.getElementById('aboutTeemo'); //或 getElementByClassName() //或 getElementByName() //也可以搭配querySelector來進行，但存在一些微妙的差異，另篇文章討論 ``` #### 3. 在終端機印出 ```javascript= var a = document.getElementById("aboutTeemo").innerText; console.log(a); ``` 剛開始看到程式碼，我很好奇為何一定要加個document？後來理解運作的原理後，才明白它指的其實就是你正在使用的這份HTML或XML檔案 所以抓的過程可以理解是：抓檔案 -> 抓特定物件 -> 呈現物件裡面的某個屬性 但，目前的情況是把字印在「終端機」上面，如果要把字印在網頁上要怎麼做呢？我們另外寫篇文章討論：）