Meine Reaktionsreise: Tag 5

Heute habe ich mich in die Welt der DOM-Manipulation gewagt, einem grundlegenden Konzept in der Webentwicklung. Das Document Object Model (DOM) ist die Brücke zwischen HTML und JavaScript und ermöglicht uns die dynamische Interaktion mit Webseiten und deren Änderung. Folgendes habe ich gelernt:

Was ist DOM-Manipulation?
Unter DOM-Manipulation versteht man den Prozess der Verwendung von JavaScript zur Interaktion mit und Änderung der Struktur, des Stils oder des Inhalts einer Webseite.

Zugriff auf Elemente
Um das DOM zu manipulieren, müssen wir zunächst die Elemente auswählen oder darauf zugreifen. JavaScript bietet mehrere Methoden, um dies zu erreichen:

getElementById: Wählt ein Element anhand seiner ID aus.

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

querySelector: Wählt das erste passende Element mithilfe von CSS-Selektoren aus.

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

querySelectorAll: Wählt alle passenden Elemente als NodeList aus.

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

Andere Methoden:

• getElementsByClassName (wählt Elemente nach Klassennamen aus).
• getElementsByTagName (wählt Elemente nach Tag-Namen aus).

Elemente manipulieren
1. Inhalt ändern
Verwenden Sie die Eigenschaft innerHTML oder textContent, um den Inhalt eines Elements zu ändern.

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

2. Stile ändern
Sie können Stile dynamisch mithilfe der Stileigenschaft aktualisieren.

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

3. Klassen hinzufügen/entfernen
Verwenden Sie die Eigenschaft classList, um Klassen hinzuzufügen, zu entfernen oder umzuschalten.

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

4. Attribute
Sie können Attribute wie src, alt, href usw. ändern.

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

Ereignisbehandlung
DOM-Manipulation geht oft mit Ereignissen einher. Sie können auf Benutzerinteraktionen wie Klicks, Tastendrücke oder Mausbewegungen achten.

Beispiel: Hinzufügen eines Klickereignisses

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

Beispiel: Inhalt bei Eingabe aktualisieren

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

Dynamische Elementerstellung
Sie können Elemente dynamisch erstellen und anhängen.

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

Abschließende Gedanken
DOM Manipulation ist unglaublich leistungsstark und ermöglicht Entwicklern die Erstellung interaktiver und dynamischer Webseiten. Es bildet die Grundlage für Frameworks wie React, bei denen DOM-Updates mithilfe virtueller DOMs effizienter gehandhabt werden.

Ich bin gespannt, wie sich diese Konzepte auf meinem weiteren Weg zu React Native auswirken werden.

Tag 6, ich komme! ?

Das obige ist der detaillierte Inhalt vonMeine Reaktionsreise: Tag 5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!