藉由前面的文章，知道了各種 HTML、CSS 與 JavaScript 的一些基本使用，接下來來了解怎麼透過 JavaScript 來影響網頁上的元素。
瀏覽器物件模型（Browser Object Model，BOM），是瀏覽器提供的各種物件，JavaScript 可以透過使用這些物件來與瀏覽器互動。雖然 BOM 並沒有統一的標準，但現代瀏覽器都有下列這些物件可以操作：
當瀏覽器載入了一份 HTML 檔案，瀏覽器為當前的頁面建立了文件物件模型（Document Object Model, DOM）。此時，網頁上的每個部分都是 querySelector 的一個節點，可以透過瀏覽器提供的 API （Browser APIs），使用 JavaScript 來操控節點內的 HTML，CSS 或其行為。
以下介紹一些常用的控制 DOM 元素（elements）的方法。
回傳與（一群）指定選擇器匹配的第一個元素節點。若找不到，回傳 null。
depth-first pre-order traversal：為了能更完整的搜尋，querySelector() 會由淺至深的走過每個節點，找到相符的第一個目標元素並回傳。
回傳與指定選擇器相符的靜態（static ）元素節點列表清單（Node List）。若找不到，回傳 null。
// 語法
// querySelector()
querySelector(selectors);
// querySelectorAll()
querySelectorAll(selectors)
參數說明：
SYNTAX_ERR。SYNTAX_ERR
querySelector 的 selectors 只接受「元素」，不支援偽類（例 div:hover）。也支援以選擇器列表（Selector list，,）來組合選擇器。
可以看這篇來了解 CSS 選擇器怎麼使用：D7 - CSS - 選擇器們 - 基本、分組與組合 - iT 邦幫忙
來個練習吧！例子來自 GPT
<div class="box">
<p>嗨你好</p>
<p>我是</p>
<p>一隻</p>
<p>海獺</p>
</div>
<ul>
<li>項目 1</li>
<li>項目 2</li>
<li>項目 3</li>
</ul>
// 使用 querySelector() 選擇元素
const div = document.querySelector(".box");
console.log(div); // 會拿到符合 class=box 的第一個元素
// 使用 querySelectorAll() 選擇多個元素
const li = document.querySelectorAll("li");
console.log(li); // 會得到 li 的 node list
可依 tagName 建立指定 HTML 元素。
若無法識別 tagName，則建立 HTMLUnknownElement。
// 語法
createElement(tagName)
參數說明：
來個練習吧！例子來自 GPT
// 建立一個新元素
const newDiv = document.createElement('div');
將一個節點加到指定的父節點下的清單末端。
// 語法
appendChild(aChild)
Node.appendChild<HTMLDivElement>(aChild: HTMLDivElement): HTMLDivElement
參數說明：
來個練習吧！例子來自 GPT，略加修改
<div class="list">
<ul>
<li>吃飯</li>
<li>睡覺</li>
<li>打東東</li>
<!-- 會出現在這邊 -->
<!-- <li>這是做出來的 li</li> -->
</ul>
</div>
// 找到要掛的父元素
const list = document.querySelector(".list");
const ul = list.querySelector("ul");
// 建立一個新元素
const newLi = document.createElement('li');
// 設置元素的內容
newLi.textContent = '這是做出來的 li';
// 將元素掛到父元素的末端
ul.appendChild(newLi);
共通點：
elementNodeReference.childNodes[0].nodeName.
document 本身具有兩個子節點：Doctype declaration 和 root element（根元素，對 HTML 文件來說是 <html> 元素）以下是用法的例子與練習 from GPT
<div id="parent">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</div>
// childNodes
const parent = document.getElementById("parent");
const childNodes = parent.childNodes;
for (let i = 0; i < childNodes.length; i++) {
if (childNodes[i].nodeType === Node.ELEMENT_NODE) {
console.log(childNodes[i].textContent);
}
}
// 結果
// i=0, textContent = Paragraph 1
// i=1, textContent = Paragraph 2
// i=2, textContent = Paragraph 3
// parentNodes
const paragraph = document.querySelector("#parent p");
const parent = paragraph.parentNode;
console.log(parent.tagName); // div
參考資料
iThome鐵人賽
看影片追技術