Maison > interface Web > js tutoriel > Mon parcours React : jour 5

Mon parcours React : jour 5

Linda Hamilton
Libérer: 2024-11-24 12:44:11
original
630 Les gens l'ont consulté

My React Journey: Day 5

Aujourd'hui, je me suis aventuré dans le monde de la manipulation DOM, un concept fondamental du développement web. Le Document Object Model (DOM) est le pont entre HTML et JavaScript, nous permettant d'interagir dynamiquement avec et de modifier les pages Web. Voici ce que j'ai appris :

Qu'est-ce que la manipulation DOM ?
La manipulation DOM est le processus d'utilisation de JavaScript pour interagir avec et modifier la structure, le style ou le contenu d'une page Web.

Accès aux éléments
Pour manipuler le DOM, nous devons d'abord sélectionner ou accéder aux éléments. JavaScript propose plusieurs méthodes pour y parvenir :

getElementById : sélectionne un élément par son ID.

const header = document.getElementById('main-header');
console.log(header); // Logs the element with ID 'main-header'
Copier après la connexion

querySelector : sélectionne le premier élément correspondant à l'aide des sélecteurs CSS.

const firstButton = document.querySelector('.btn');
console.log(firstButton); // Logs the first element with class 'btn'
Copier après la connexion

querySelectorAll : sélectionne tous les éléments correspondants en tant que NodeList.

const allButtons = document.querySelectorAll('.btn');
console.log(allButtons); // Logs a list of all elements with class 'btn'
Copier après la connexion

Autres méthodes :

  • getElementsByClassName (sélectionne les éléments par nom de classe).
  • getElementsByTagName (sélectionne les éléments par nom de balise).

Manipulation des éléments
1. Changer le contenu
Utilisez la propriété innerHTML ou textContent pour modifier le contenu d'un élément.

const title = document.getElementById('title');
title.innerHTML = 'Welcome to My React Journey!';
title.textContent = 'Day 5 - DOM Manipulation';
Copier après la connexion

2. Changer de style
Vous pouvez dynamiquement mettre à jour les styles à l'aide de la propriété style.

const button = document.querySelector('.btn');
button.style.backgroundColor = 'blue';
button.style.color = 'white';
Copier après la connexion

3. Ajout/Suppression de classes
Utilisez la propriété classList pour ajouter, supprimer ou basculer des classes.

button.classList.add('active');   // Adds 'active' class
button.classList.remove('btn');  // Removes 'btn' class
button.classList.toggle('hidden'); // Toggles 'hidden' class
Copier après la connexion

4. Attributs
Vous pouvez modifier des attributs comme src, alt, href, etc.

const image = document.querySelector('img');
image.setAttribute('src', 'new-image.jpg');
image.setAttribute('alt', 'A beautiful scenery');
Copier après la connexion

Gestion des événements
La manipulation du DOM va souvent de pair avec les événements. Vous pouvez écouter les interactions des utilisateurs telles que les clics, les pressions sur des touches ou les mouvements de la souris.

Exemple : Ajout d'un événement de clic

const button = document.querySelector('.btn');
button.addEventListener('click', () => {
    alert('Button clicked!');
});
Copier après la connexion

Exemple : Mise à jour du contenu en entrée

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

Création d'éléments dynamiques
Vous pouvez créer et ajouter des éléments de manière dynamique.

const newElement = document.createElement('p');
newElement.textContent = 'This is a new paragraph added dynamically!';
document.body.appendChild(newElement);
Copier après la connexion

Pensées finales
La manipulation DOM est incroyablement puissante, permettant aux développeurs de créer des pages Web interactives et dynamiques. Il constitue la base de frameworks comme React, où les mises à jour du DOM sont gérées plus efficacement à l'aide de DOM virtuels.

Je suis impatient de voir comment ces concepts se concrétisent à mesure que je progresse dans mon parcours React Native.

Jour 6, me voilà ! ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal