打開網站就會產生一個節點樹

DOM 全名為 Document Object Model 中文翻譯為 文件物件模型，看起來很抽象但其實就是把一份 HTML 文件內的各個標籤，包括文字、圖片等等都定義成物件，而這些物件最終會形成一個樹狀結構。

W3C DOM 標準被分為 3 個不同的部分：

• 核心 DOM - 針對任何結構化文件的標準模型
• XML DOM - 針對 XML 文件的標準模型
• HTML DOM - 針對 HTML 文件的標準模型

DOM會形成一個樹狀的結構且擁有各個節點，而其節點通常分為四種，包括 Document、Element、Text 與 Attribute。

• Document(文件)
  Document是HTML文件的開端，所有標籤都會由此向下延伸。

• Element(元素)
  Element是文件的各種標籤，像是＜head＞、＜body＞、＜p＞或是＜div＞等，都屬於Element元素節點。

• Text(文本)
  指的是被標籤包起來的文字。
  像是本節點標題「DOM節點」的後端語法是＜h3＞DOM節點＜/h3＞，而其中被Element元素包起來的文字就是Text文本。

• Attribute(屬性)
  指的是各個標籤內的相關屬性，用來敘述Element元素的相關性質，這種附加在 Element元素上的東西就稱為Attribute屬性。

下面有一張示意圖可以參考

(圖片來源：參考)

選取DOM

單一選取 querySelector （只會選取到第一個）

const el = document.querySelector('h1')

複數選取 querySelectorAll

const mylink = document.querySelectorAll('a')

文字修改 （textContent）

例 ❶

el.textContent = "hello world"

例 ❷

const btn = document.querySelector(".btn");
const title = document.querySelector("h1");
btn.addEventListener("click", function (e) {
    // console.log("你被點擊了");
    title.textContent = "按鈕被點擊"
})

DOM II