Day 19 DOM DOM 咚咚咚！DONKI！

14th鐵人賽

anquan

2022-10-03 22:43:55

393 瀏覽

分享至

Day 19 DOM DOM 咚咚咚！DONKI！

標題依然非常的性感

只要每次提到 DOM 元素，我都會想到唐吉訶德的
主題曲www 因為 DOM 的諧音很像咚咚咚，然後唐
吉訶德的主題曲又有咚咚咚，所以我的腦海裏就會一直是 DOM，你看，諧音聯想法還是有用滴～回歸正題

DOM（文件物件模型，Document Object model）允許 JavaScript 大大參訪 Web 頁面
雖然看起來非常難懂但其實就是把一份 HTML 文件內的各個標籤，包括文字、圖片等等都定義成物件（感覺還是很複雜：））而這些物件最終會形成一個樹狀結構，大概像這樣：

圖片來源：https://ithelp.ithome.com.tw/articles/10202689

我們除了會認識 DOM 以外，還會在下一章介紹到 JQuery ，先來簡單帶過 JQuery 的基礎吧！
jQuery 是一個以 Javascript 來編寫的函式庫，簡單來說就是先幫你實作了很多Javascript的函數功能，用途是讓開發者可以更輕鬆方便的製作網站功能，最重要的是它是免費的。
JQuery 的出現拯救了許多人想開發網頁的念頭，因為真的很簡單！～
（當然 DOM 也很簡單）
我們還會利用 JQuery 讓 DOM 元素產生動畫效果！！敬請期待下一章。

DOM 元素

當把 HTML 元素加載到瀏覽器時，瀏覽器會把這個元素轉換成一個類似樹的結構。
這種結構叫「DOM 樹」在第 21 章時，我們也會談到一個類似這種樹的結構，嗯沒錯，
這個樹就是「HTML 樹」！（我自己亂命名的：））對的先跟你們預告一下哈。
拉回正題，DOM 樹大概像這樣：

圖片來源：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 對這個元素「為所欲為」。