JavaScript 是一種廣泛使用的客戶端腳本語言，它可以通過 HTML 和 CSS 等前端技術，動態的操作瀏覽器中的內容。當我們需要通過代碼來選中 HTML 元素，進行相應的操作時，就需要了解 JavaScript 中選中元素的方法。

選中單個元素

// 通過 id 選中元素
var elem = document.getElementById("firstElement");
// 通過標簽名選中元素
var elem = document.getElementsByTagName("header")[0];
// 通過 class 名稱選中元素
var elem = document.getElementsByClassName("nav-link")[1];
// 通過 CSS 選擇器選中元素
var elem = document.querySelector("#secondElement");

選中多個元素

// 通過標簽名選中一組元素
var elems = document.getElementsByTagName("li");
for (var i = 0; i < elems.length; i++) {
console.log(elems[i].innerText);
}
// 通過 class 名稱選中一組元素
var elems = document.getElementsByClassName("card-title");
for (var i = 0; i < elems.length; i++) {
console.log(elems[i].innerText);
}
// 通過 CSS 選擇器選中一組元素
var elems = document.querySelectorAll(".btn");
for (var i = 0; i < elems.length; i++) {
console.log(elems[i].innerText);
}

操作選中的元素

// 修改元素內容
var elem = document.getElementById("firstElement");
elem.innerText = "Hello JavaScript";
// 修改元素樣式
var elem = document.getElementById("secondElement");
elem.style.color = "red";
elem.style.fontSize = "20px";
// 添加子元素
var parentElem = document.getElementById("parentElement");
var childElem = document.createElement("li");
childElem.innerText = "New Item";
parentElem.appendChild(childElem);
// 刪除元素
var elem = document.getElementById("thirdElement");
elem.parentNode.removeChild(elem);

總結

選中元素是 JavaScript 中不可避免的操作，我們可以通過 id、標簽名、class 名稱和 CSS 選擇器等方式來選中單個或一組元素。選中的元素我們可以通過修改或添加子元素的方式來改變頁面的內容和樣式，同時我們也可以通過刪除元素的方式來減少頁面的內容。