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'
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'
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'
Autres méthodes :
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';
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';
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
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');
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!'); });
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}!`; });
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);
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!