# Day 19 DOM DOM 咚咚咚！DONKI！ 標題依然非常的性感 只要每次提到 DOM 元素，我都會想到唐吉訶德的 主題曲www 因為 DOM 的諧音很像咚咚咚，然後唐 吉訶德的主題曲又有咚咚咚，所以我的腦海裏就會一直是 DOM，你看，諧音聯想法還是有用滴～回歸正題 DOM（文件物件模型，Document Object model）允許 JavaScript 大大參訪 Web 頁面 雖然看起來非常難懂但其實就是把一份 HTML 文件內的各個標籤，包括文字、圖片等等都定義成物件（感覺還是很複雜：））而這些物件最終會形成一個樹狀結構，大概像這樣： ![](https://i.imgur.com/VRbx0FV.gif) `圖片來源：https://ithelp.ithome.com.tw/articles/10202689` 我們除了會認識 DOM 以外，還會在下一章介紹到 JQuery ，先來簡單帶過 JQuery 的基礎吧！ jQuery 是一個以 Javascript 來編寫的函式庫，簡單來說就是先幫你實作了很多Javascript的函數功能，用途是讓開發者可以更輕鬆方便的製作網站功能，最重要的是它是免費的。 JQuery 的出現拯救了許多人想開發網頁的念頭，因為真的很簡單！～ （當然 DOM 也很簡單） 我們還會利用 JQuery 讓 DOM 元素產生動畫效果！！敬請期待下一章。 ## DOM 元素 當把 HTML 元素加載到瀏覽器時，瀏覽器會把這個元素轉換成一個類似樹的結構。 這種結構叫「DOM 樹」在第 21 章時，我們也會談到一個類似這種樹的結構，嗯沒錯， 這個樹就是 「HTML 樹」！（我自己亂命名的：））對的先跟你們預告一下哈。 拉回正題，DOM 樹大概像這樣： ![](https://i.imgur.com/RIFG2PH.gif) `圖片來源：https://ithelp.ithome.com.tw/articles/10202689` ## 使用 ID 來標誌啾咪的元素 HTML 的 ID 屬性允許為 HTML 元素指定唯一的名字或標誌。例如下例： ``` <h1 id="標題">猜字遊戲</h1> ``` 在上例中，`"標題"`的 ID 並不會直接影響到其他的元素，就像是註解一樣！ ## 利用 DOM 來修改性感的標題文字 下面是使用了 DOM 來修改標題文字，待會會一一講解！ ``` <!DOCTYPE html> <html> <head> <title>屋嗚嗚</title> </head> <body> <h1 id="標題為啥不見了">詞窮了</h1> <script> var 標題文字 = document.getElementById("標題為啥不見了"); console.log(標題文字.innerHTML); var 新的文字 = prompt("請輸入標題"); 標題文字.innerHTML = 新的文字; </script> </body> </html> ``` 在這句`var 標題文字 = document.getElementById("標題為啥不見了");`中， 我們通過`document.getElementById`來查找名為`"標題為啥不見了"`的元素，返回我們調用與該 ID 相符的元素並且將這個 DOM 對象保存到變數`標題文字`裡。 一旦選中這個素材，我們就可以用 JavaScript 對這個元素「為所欲為」。 ``` 標題文字.innerHTML ``` 這串程式碼返回了`標題文字`的 HTML 內容，`標題文字`是使用`getElementById`來選中 這個元素的，在這個例子中，這個元素的內容是我們在`<h1>`標籤中輸入的 "詞窮了"。 輸出如下： ![](https://i.imgur.com/LmhsQHr.png) 此時不管你在視窗內輸入什麼，標題就會變成那樣。 例如：我輸入的是 Joanne 是美女，那就會像下面這樣： 原本： ![](https://i.imgur.com/iTtaGdE.png) 修改後： ![](https://i.imgur.com/6jGByrj.png) 是不是很好玩？你也趕快去試一試吧！！ # 小總結 今天我們知道了 DOM 的定義還有諧音梗：）也用了 這個小可愛來展示我們的文字，下一章我們就會講到怎麼讓我們性感撫媚的文字動起來，那就敬請期待吧 ！大家拜拜～