在 Web 開發領域，HTML 構成了網頁的骨架，而 JavaScript 則賦予網頁生命。了解如何使用 JavaScript 公開和操作 HTML 資訊對於建立動態、互動式 Web 應用程式至關重要。本文深入探討使用 JavaScript 存取和修改 HTML 內容的核心技術。

1. 存取 HTML 元素

使用 getElementById

存取 HTML 元素的最簡單方法之一是使用其 id 屬性。 document.getElementById 方法傳回具有指定值的 ID 屬性的元素。

let element = document.getElementById('myElement');

使用 getElementsByClassName

要存取具有相同類別名稱的多個元素，請使用 document.getElementsByClassName。此方法傳回元素的即時 HTMLCollection。

let elements = document.getElementsByClassName('myClass');

使用 getElementsByTagName

要透過標籤名稱存取元素，可以使用 document.getElementsByTagName。此方法傳回具有給定標籤名稱的元素的即時 HTMLCollection。

let paragraphs = document.getElementsByTagName('p');

使用 querySelector 和 querySelectorAll

對於更複雜的選擇，querySelector 和 querySelectorAll 提供了強大的解決方案。 querySelector 傳回與指定 CSS 選擇器相符的第一個元素，而 querySelectorAll 傳回所有符合元素。

let firstElement = document.querySelector('.myClass');
let allElements = document.querySelectorAll('.myClass');

2. 操作 HTML 內容

變更內部 HTML

innerHTML 屬性可讓您取得或設定元素內的 HTML 內容。這對於動態更新網頁內容很有用。

let element = document.getElementById('myElement');
element.innerHTML = '
New content
';

更改內部文本

若要只修改元素的文字內容，請使用innerText 或textContent 屬性。與innerHTML不同，這些屬性不會解析HTML標籤。

let element = document.getElementById('myElement');
element.innerText = 'New text content';

修改屬性

您可以使用 setAttribute 方法或直接存取屬性 property 來變更元素的屬性。

let element = document.getElementById('myElement');
element.setAttribute('src', 'newImage.jpg');

// Or directly
element.src = 'newImage.jpg';

新增和刪除類

JavaScript 提供 classList 屬性來新增、刪除和切換元素上的類別。這對於動態操作 CSS 樣式特別有用。

let element = document.getElementById('myElement');
element.classList.add('newClass');
element.classList.remove('oldClass');
element.classList.toggle('toggleClass');

3. 建立和刪除元素

建立新元素

document.createElement 方法用於建立新的 HTML 元素。建立元素後，您可以使用諸如appendChild或insertBefore之類的方法將其附加到DOM。

let newElement = document.createElement('div');
newElement.innerHTML = 'I am a new element';
document.body.appendChild(newElement);

刪除元素

要移除元素，請使用removeChild方法。首先，存取要刪除的元素的父節點，然後對其呼叫removeChild。

let parent = document.getElementById('parentElement');
let child = document.getElementById('childElement');
parent.removeChild(child);

更換元件

replaceChild 方法可讓您用新節點取代現有的子節點。

let parent = document.getElementById('parentElement');
let oldChild = document.getElementById('oldChild');
let newChild = document.createElement('div');
newChild.innerHTML = 'I am a new child';
parent.replaceChild(newChild, oldChild);

4. 事件處理

新增事件監聽器

事件偵聽器可讓您執行 JavaScript 程式碼來回應使用者互動。 addEventListener 方法是新增事件的首選方法，因為它允許將相同類型的多個事件新增至一個元素。

let button = document.getElementById('myButton');
button.addEventListener('click', function() {
    alert('Button clicked!');
});

刪除事件監聽器

您也可以使用removeEventListener方法刪除事件偵聽器。這要求您引用事件偵聽器建立期間使用的確切函數。

function handleClick() {
    alert('Button clicked!');
}

let button = document.getElementById('myButton');
button.addEventListener('click', handleClick);

// Later on...
button.removeEventListener('click', handleClick);

5. 使用表單

存取表單值

要存取表單元素的值，請使用 value 屬性。這對於讀取用戶輸入很有用。

let input = document.getElementById('myInput');
let inputValue = input.value;

驗證表格

JavaScript 可用於在提交之前驗證表單輸入。這透過提供即時回饋來增強用戶體驗。

let form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
    let input = document.getElementById('myInput');
    if (input.value === '') {
        alert('Input cannot be empty');
        event.preventDefault();
    }
});

結論

掌握使用 JavaScript 公開和操作 HTML 資訊的藝術，為創建動態和互動式 Web 應用程式開啟了一個充滿可能性的世界。透過利用 JavaScript 中可用的各種方法和屬性，您可以有效地管理和操作網頁的內容和結構，從而提供豐富且引人入勝的使用者體驗。不斷嘗試和探索，發現更多提升 Web 開發技能的方法！