DOM是什麼?

DOM 的英文全名是 Document Object Model，中文是「文件物件模型」。

1. 是 HTML、XML 和 SVG 文件的程式介面。
2. 提供了一個文件（樹）的結構化表示法，並定義讓程式可以存取並改變文件架構和內容的方法。
3. DOM 提供了文件以擁有屬性與函式的節點與物件組成的結構化表示。
4. 節點可以附加事件處理程序，一旦觸發事件就會執行處理程序。
5. DOM將網頁與腳本或程式語言連結在一起。

如圖所示，每個格子代表一個節點，可以是標籤、文字、連結、屬性...等。

querySelector 選擇器

1. querySelector回傳document第一個符合特定選擇器群組的元素
2. 語法:element = document.querySelector( css選擇器);
3. querySelectorAll 符合特定選擇器群組的元素(可以選取多個)

如圖所示querySelector只回傳遞一個特定選擇器得值。

如圖所示querySelectorAll可以回傳多個特定選擇器。

textContent 寫入文字資料

1. 語法:變數名稱+'點'( . )+textContent = 小括號( +反引號 ‵‵ )。

如圖所示使用textContent可以改變特定選擇器內的文字。

innerHTML 插入 HTML 標籤

1. 語法:變數名稱+'點'( . )+innerHTML = +反引號( ‵‵ )。

如圖所示使用textContent語法'h1標籤'的文字改變。

如圖所示使用innerHTML語法會清空原來內容再增加新標籤。

setAttribute 增加 HTML 標籤屬性

1. 語法:變數名稱+'點'( . )+setAttribute+小括號( "屬性" , "內容" )。

如圖所示使用setAttribute語法可以新增或修改屬性。

今天就到這邊結束了。