我的 React 之旅：第 5 天

今天，我進入了 DOM 操作的世界，這是 Web 開發中的一個基本概念。文件物件模型 (DOM) 是 HTML 和 JavaScript 之間的橋樑，使我們能夠動態地與網頁互動和修改網頁。這是我學到的：

什麼是 DOM 操作？
DOM 操作是使用 JavaScript 與網頁互動以及更改

網頁的結構、樣式或內容的過程。

訪問元素
要操作 DOM，我們首先需要選擇或存取

元素。 JavaScript 提供了幾種方法來實現這一點：

getElementById：透過 ID 選擇元素。

const header = document.getElementById('main-header');
console.log(header); // Logs the element with ID 'main-header'

querySelector
：使用 CSS 選擇器選擇第一個符合元素。

const firstButton = document.querySelector('.btn');
console.log(firstButton); // Logs the first element with class 'btn'

querySelectorAll
：選擇所有符合的元素作為 NodeList。

const allButtons = document.querySelectorAll('.btn');
console.log(allButtons); // Logs a list of all elements with class 'btn'

其他方法：

getElementsByClassName（以類別名稱選擇元素）。
getElementsByTagName（按標籤名稱選擇元素）。

操作元素
1.更改內容

使用innerHTML或textContent屬性來變更元素的內容。

const title = document.getElementById('title');
title.innerHTML = 'Welcome to My React Journey!';
title.textContent = 'Day 5 - DOM Manipulation';

2。改風格
您可以使用 style 屬性動態
更新樣式。

const button = document.querySelector('.btn');
button.style.backgroundColor = 'blue';
button.style.color = 'white';

3。新增/刪除類別
使用 classList
屬性新增、刪除或切換類別。

button.classList.add('active');   // Adds 'active' class
button.classList.remove('btn');  // Removes 'btn' class
button.classList.toggle('hidden'); // Toggles 'hidden' class

4。屬性
您可以修改
屬性，例如src、alt、href等

const image = document.querySelector('img');
image.setAttribute('src', 'new-image.jpg');
image.setAttribute('alt', 'A beautiful scenery');

事件處理

DOM 操作通常與事件密切相關。您可以監聽使用者交互，例如點擊、按鍵或滑鼠移動。

範例
：新增點擊事件

const button = document.querySelector('.btn');
button.addEventListener('click', () => {
    alert('Button clicked!');
});

範例
：更新輸入內容

const input = document.querySelector('#name-input');
input.addEventListener('input', () => {
    const display = document.querySelector('#name-display');
    display.textContent = `Hello, ${input.value}!`;
});

動態元素建立

您可以動態建立和附加元素。

const newElement = document.createElement('p');
newElement.textContent = 'This is a new paragraph added dynamically!';
document.body.appendChild(newElement);

最後的想法

DOM 操作非常強大，讓開發人員可以建立互動式動態網頁。它構成了 React 等框架的基礎，其中使用虛擬 DOM 可以更有效地處理 DOM 更新。

隨著我在 React Native 之旅中取得進一步進展，我很高興看到這些概念如何發揮作用。

第六天，我來了！

?

以上是我的 React 之旅：第 5 天的詳細內容。更多資訊請關注PHP中文網其他相關文章！