Was ist DOM?
Stellen Sie sich ein HTML-Dokument als Stammbaum vor. Jedes Element hat ein übergeordnetes Element, es kann untergeordnete Elemente und Nachbarn geben. DOM ist die Art und Weise, wie ein Browser alle Elemente einer Seite als JavaScript-Objekte organisiert, mit denen man arbeiten kann.
<!DOCTYPE html>
<html>
<body>
<h1>Привет, мир!</h1>
<p>Это параграф</p>
</body>
</html>In diesem Beispiel ist <body> der Elternteil für <h1> und <p>, und sie sind seine Kinder.
Suche nach Elementen auf der Seite
Bevor Sie etwas ändern, müssen Sie das Element finden. Es gibt mehrere Möglichkeiten:
// Suche nach ID
const header = document.getElementById('main-header');
// Suche nach Klasse (gibt eine Sammlung von Elementen zurück)
const buttons = document.getElementsByClassName('btn');
// Suche nach Tag
const paragraphs = document.getElementsByTagName('p');
// Moderne Methoden (die beliebtesten!)
const firstButton = document.querySelector('.btn'); // erstes Element
const allButtons = document.querySelectorAll('.btn'); // Alle ElementeDie Methoden querySelector und querySelectorAll sind Ihre besten Freunde. Sie funktionieren mit allen CSS-Selektoren und sind sehr praktisch.
Inhaltsänderung
Nachdem wir das Element gefunden haben, wollen wir etwas damit machen:
const title = document.querySelector('h1');
// Text bearbeiten
title.textContent = 'New title';
// HTML bearbeiten (Tags können eingefügt werden)
title.innerHTML = 'Title with <span>accent</span>';Wichtig: verwenden Sie textContent für normalen Text und innerHTML nur, wenn Sie wirklich HTML einfügen müssen. Das ist sicherer.
Arbeiten mit Attributen
Elementattribute können ebenfalls leicht geändert werden:
const link = document.querySelector('a');
// Attribut erhalten
const href = link.getAttribute('href');
// Attribut festlegen
link.setAttribute('href', 'https://example.com');
// Attribut entfernen
link.removeAttribute('target');
// Arbeiten mit Klassen
link.classList.add('active');
link.classList.remove('disabled');
link.classList.toggle('highlighted'); // Klasse wechselnÄnderung der Stile
CSS-Stile können direkt aus JavaScript geändert werden:
const box = document.querySelector('.box');
// Einen Stil ändern
box.style.backgroundColor = 'blue';
box.style.width = '200px';
// Der beste Weg ist durch Klassen
box.classList.add('big-box');Tipp: Versuchen Sie, Stile über Klassen zu ändern, nicht direkt. Dies erleichtert die Pflege des Codes.
Erstellen neuer Elemente
Sie können Elemente von Grund auf neu erstellen und zur Seite hinzufügen:
// Element erstellen
const newDiv = document.createElement('div');
// Inhalt hinzufügen
newDiv.textContent = 'I am a new element!';
newDiv.classList.add('message');
// Zur Seite hinzufügen
document.body.appendChild(newDiv); // am Ende des Körpers
// Oder an einer bestimmten Stelle einfügen
const container = document.querySelector('.container');
container.appendChild(newDiv);Elemente entfernen
Elemente können gelöscht werden:
const oldElement = document.querySelector('.old');
// Moderne Methode
oldElement.remove();
// Die alte Methode (funktioniert überall)
oldElement.parentNode.removeChild(oldElement);
Praktisches Beispiel: Aufgabenliste
Erstellen wir eine einfache Anwendung für eine Aufgabenliste. Probieren Sie es selbst aus:
Meine Aufgaben
Hier ist der Code, der diese App zum Laufen bringt:
const input = document.getElementById('taskInput');
const addBtn = document.getElementById('addBtn');
const taskList = document.getElementById('taskList');
addBtn.addEventListener('click', function() {
const taskText = input.value.trim();
if (taskText === '') return;
// Erstellen Sie ein neues Listenelement
const li = document.createElement('li');
li.textContent = taskText;
// Wir fügen die Möglichkeit hinzu, eine Aufgabe zu markieren
li.addEventListener('click', function() {
li.classList.toggle('completed');
});
// Löschtaste
const deleteBtn = document.createElement('button');
deleteBtn.textContent = 'Delete';
deleteBtn.className = 'delete-btn';
deleteBtn.addEventListener('click', function(e) {
e.stopPropagation(); // damit der Klick auf li nicht funktioniert
li.remove();
});
li.appendChild(deleteBtn);
taskList.appendChild(li);
// Wir leeren das Eingabefeld
input.value = '';
});
// Hinzufügen mit Enter
input.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
addBtn.click();
}
});Nützliche Tipps
Zwischenspeichern Sie Elemente. Wenn Sie ein Element mehrmals verwenden, speichern Sie es in einer Variablen, anstatt erneut zu suchen.
// Schlecht
document.querySelector('.box').style.width = '100px';
document.querySelector('.box').style.height = '100px';
// Gut
const box = document.querySelector('.box');
box.style.width = '100px';
box.style.height = '100px';Verwenden Sie die Ereignisübertragung. Anstatt jedem Element einen Handler hinzuzufügen, fügen Sie einen zum übergeordneten Element hinzu.
Minimieren Sie den Reflow. Häufige DOM-Änderungen können die Seite verlangsamen. Gruppieren Sie Änderungen oder verwenden Sie DocumentFragment.
Überprüfen Sie, ob Elemente vorhanden sind bevor Sie mit ihnen arbeiten, um Fehler zu vermeiden.
const element = document.querySelector('.maybe-exists');
if (element) {
element.textContent = 'Found it!';
}Befund
DOM-Manipulation ist die Grundlage interaktiver Webseiten. Mit ihrer Hilfe können Sie dynamische Benutzeroberflächen erstellen, auf Benutzeraktionen reagieren und Websites lebendig machen. Üben Sie, experimentieren Sie mit Beispielen, und bald wird es für Sie selbstverständlich sein.
Sie können Python und andere Sprachen lernen in Kodike - Wir haben eine praktische Lernplattform mit praktischen Aufgaben.
Und wir haben auch einen coolen Telegram-Kanal mit einer freundlichen Community, in der Sie Fragen stellen, Erfahrungen teilen und mit Gleichgesinnten wachsen können.
Schließen Sie sich uns an!