3. 選擇器與 DOM 操作

3.1 JavaScript DOM 操作基礎

在這個篇教材你將學到如何使用JavaScript與HTML文檔進行交互。

DOM 是一種由瀏覽器提供的介面，用於動態地操控 HTML 和 XML 文檔的方法。它將文檔表示為一個樹狀結構，其中每個節點代表文檔中的一個元素(Element)、屬性(Attribute)或內容(text)。

選擇元素

• 按ID選擇元素：

  var elementById = document.getElementById("title");

• 按Class選擇元素：

  var elementsByClass = document.getElementsByClassName("myClass");

• 按標籤名選擇元素：

  var elementsByTag = document.getElementsByTagName("div");

• 複雜選擇：

  var complexSelection = document.querySelector("div.myClass");

更改內容

• innerHTML 屬性：

  elementById.innerHTML = "新的內容";

• textContent 屬性：

  elementById.textContent = "新的文本內容";

修改樣式

• 通過 style 屬性來修改元素的樣式：

  elementById.style.color = "red";
  elementById.style.fontSize = "20px";

操作類

• 更改 class：

  elementById.classList.add("newClass");
  elementById.classList.remove("oldClass");

3.2 jQuery 選擇器基礎

這一節將介紹使用jQuery庫來簡化DOM操作的基本概念。

引入jQuery

下面介紹兩種載入方式。

CDN (Content delivery network)

可以前往:https://releases.jquery.com/ 選取所需要的版本，使用下方範例添加至 HTML

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

下載

可以前往: https://jquery.com/download/ 將檔案下載後使用下方範例添加至 HTML

<script src="js/jquery-x.x.x.min.js"></script>

選擇器

jQuery選擇器與CSS選擇元素方式差不多，下方介紹部分方式，使用jQuery將使用 $ 函數選擇元素：

// 選擇所有的 <p> 元素
$('p');
// 選擇具有 "myClass" 類別的所有 <div> 元素
$('div.myClass');
// 選擇具有 "myId" ID 的元素
$('#myId');
// 選擇所有 <div> 元素的直接子元素 <p>
$('div > p');
// 選擇所有 <p> 元素的直接父元素 <div>
$('p < div');
// 選擇所有 <li> 元素的同級元素 <li>
$('li ~ li');
// 選擇第一個 <div> 元素
$('div:first');
// 選擇最後一個 <p> 元素
$('p:last');
// 選擇所有的輸入框
$(':input');
// 選擇所有被選中的選擇框
$(':checked');

3.3 操作元素屬性和內容

這個主題涵蓋如何使用JavaScript和jQuery來操作元素的屬性和內容，包括：

• 屬性操作： 使用 getAttribute 和 setAttribute 來獲取和設置屬性。

• 數據屬性： 使用 data-* 屬性存儲和檢索數據。

• 內容操作： 使用 innerHTML、innerText 和 text 方法更改元素的內容。

3.4 新增和刪除元素

在這一節，你將學到如何使用JavaScript和jQuery來動態地新增和刪除HTML元素，其中包括：

• 新增元素： 使用 createElement 和 appendChild 方法。

• 刪除元素： 使用 removeChild 方法。

• 替換元素： 使用 replaceChild 方法。