我的 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中文网其他相关文章！