今天，我進入了 DOM 操作的世界，這是 Web 開發中的一個基本概念。文件物件模型 (DOM) 是 HTML 和 JavaScript 之間的橋樑，使我們能夠動態地與網頁互動和修改網頁。這是我學到的：
什麼是 DOM 操作？
DOM 操作是使用 JavaScript 與網頁互動以及更改
訪問元素
要操作 DOM，我們首先需要選擇或存取
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'
其他方法：
操作元素
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');
事件處理
範例
：新增點擊事件
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);
最後的想法
隨著我在 React Native 之旅中取得進一步進展，我很高興看到這些概念如何發揮作用。
第六天，我來了！
?以上是我的 React 之旅：第 5 天的詳細內容。更多資訊請關注PHP中文網其他相關文章！
