DOM(文件物件模型)
一個將 HTML 以樹狀結構呈現的模型，我們稱為 DOM tree 。
我們將 HTML 每個節點攤出來看會像是下面這個樣子：

<header>
    <h1> 我是 LOGO </h1>
</header>

往下可以在延伸出很多個 HTML 標籤節點，一個標籤就是一個節點， DOM API 就是可以讓我們使用 JavaScript 可以改變 HTML 架構，樣式跟內容還有在節點上綁定事件。

DOM 與 BOM 的差別

• BOM: 是 JavaScript 與瀏覽器溝通的橋樑，跟網頁內容無關。
• DOM: 是 JavaScript 拿來控制網頁的節點跟內容。

如果想要使用 JavaScript 來控制節點可以像是這樣：

document.getElementById('//想要選取的元素') // 依照傳入的值，找到 HTML 裡面 ID
document.getElementByTagName('//想要選取的元素') // 依照傳入的值，回傳所有符合條件的 TagName
document.getElementByClassName('//想要選取的元素') // 依照傳入的值，回傳所有符合條件的 ClassName
// 依照傳入的值，回傳第一個或者符合條件的 Nodelist
document.querySelector(//想要選取的元素)
document.querySelectorAll(//想要選取的元素)

選取到我們想要的節點之後，我們可以用 textContent 屬性來改變文字

<h1 id="logo"></h1>

<script>
  var logo = document.getElementById('logo') //選取到節點並放入到 logo 這個變數裡面
  logo.textContent = '我是logo!'
</script>

這樣我們就可以印出 我是logo 這段字在 h1 標籤裡面了 ！
相信大家應該都知道怎麼樣改變標籤裡面的內容了！那我們明天見囉～