DOM-Manipulation: Auswählen und Bearbeiten von DOM-Elementen

Einführung in das DOM

Das Document Object Model (DOM) ist ein entscheidendes Konzept für die Webentwicklung. Es dient als Programmierschnittstelle, die es Entwicklern ermöglicht, mit der Struktur, dem Stil und dem Inhalt einer Webseite zu interagieren und diese zu ändern. Wenn eine Webseite im Browser geladen wird, wird das HTML-Dokument in das DOM konvertiert, eine baumartige Struktur, in der jeder Knoten ein Element, ein Attribut oder einen Text darstellt. Diese Struktur ermöglicht es Entwicklern, dynamisch auf Teile der Seite zuzugreifen und diese zu bearbeiten, wodurch das Web-Erlebnis interaktiver und ansprechender wird.

Für Anfänger und diejenigen, die mit dem DOM nicht vertraut sind, stellen Sie es sich als den Bauplan eines Hauses vor. So wie Sie in einem Haus Möbel neu anordnen oder Wände streichen können, können Sie mit dem DOM den Inhalt und Stil einer Webseite ändern, nachdem diese geladen wurde.

Elemente auswählen

Bevor Sie das DOM manipulieren können, müssen Sie die Elemente auswählen, mit denen Sie arbeiten möchten. JavaScript bietet mehrere Methoden zum Auswählen von Elementen, sodass Sie mit verschiedenen Teilen der Webseite interagieren können. Hier ist ein Blick auf einige gängige Methoden:

1. Auswählen eines Elements anhand der ID

Die getElementById-Methode ist eine der einfachsten Möglichkeiten, ein einzelnes Element auszuwählen. Es gibt das Element zurück, das der angegebenen ID entspricht.

// Selecting an element by ID
const heading = document.getElementById('heading');

In diesem Beispiel verweist „heading“ nun auf das Element mit der ID „heading“. Sie können diese Referenz verwenden, um das Element weiter zu bearbeiten.

2. Elemente nach Klassennamen auswählen

Um mehrere Elemente mit derselben Klasse auszuwählen, können Sie die Methode getElementsByClassName verwenden. Diese Methode gibt eine Live-HTML-Elementsammlung zurück.

// Selecting elements by class name
const items = document.getElementsByClassName('item');

Die Variable items enthält jetzt eine Sammlung aller Elemente mit dem Klassennamen item. Diese Methode ist besonders nützlich, wenn Sie dieselbe Aktion auf mehrere Elemente anwenden müssen.

3. Auswählen von Elementen mithilfe eines CSS-Selektors

Mit den Methoden querySelector und querySelectorAll können Sie Elemente mithilfe von CSS-Selektoren auswählen. Diese Methoden sind vielseitig und können verwendet werden, um Elemente nach Tag-Namen, Klasse, ID oder einem anderen gültigen CSS-Selektor anzusprechen.

// Selecting a single element using a CSS selector
const button = document.querySelector('button');

// Selecting multiple elements using a CSS selector
const listItems = document.querySelectorAll('li');

querySelector wählt das erste Element aus, das mit dem Selektor übereinstimmt, während querySelectorAll alle übereinstimmenden Elemente auswählt und eine NodeList zurückgibt, die einem Array ähnelt.

Elemente manipulieren

Sobald Sie ein Element ausgewählt haben, können Sie es bearbeiten, um seinen Inhalt, seine Attribute und Stile zu ändern. Dadurch können Sie dynamische Webseiten erstellen, die auf Benutzerinteraktionen oder andere Ereignisse reagieren.

1. Textinhalt ändern

Mit der Eigenschaft textContent können Sie den Text innerhalb eines Elements ändern. Dies ist nützlich, um den Inhalt basierend auf Benutzereingaben oder anderen Bedingungen dynamisch zu aktualisieren.

// Changing text content
heading.textContent = 'Hello, World!';

In diesem Beispiel wird der Text innerhalb des Elements, auf das durch die Überschrift verwiesen wird, in „Hello, World!“ aktualisiert.

2. Ein Attribut ändern

Mit der setAttribute-Methode können Sie die Attribute eines Elements ändern, z. B. src, href, alt oder deaktiviert.

// Changing an attribute
button.setAttribute('disabled', true);

Hier wird die Schaltfläche deaktiviert, indem das Attribut „disabled“ auf „true“ gesetzt wird. Dies kann verwendet werden, um Benutzerinteraktionen zu verhindern, bis eine bestimmte Bedingung erfüllt ist.

3. Stile ändern

Mit der style-Eigenschaft können Sie die Inline-CSS-Stile eines Elements ändern. Sie können Eigenschaften wie Farbe, Hintergrundfarbe, Schriftgröße und mehr ändern.

// Changing styles
heading.style.color = 'blue';

In diesem Beispiel wird die Farbe des Texts im Überschriftenelement in Blau geändert.

Elemente erstellen und entfernen

Zusätzlich zum Ändern bestehender Elemente können Sie neue Elemente erstellen und diese zum DOM hinzufügen oder Elemente entfernen, die nicht mehr benötigt werden.

1. Ein neues Element erstellen

Sie können ein neues Element mit der Methode createElement erstellen. Nach der Erstellung können Sie seine Eigenschaften festlegen und es an ein vorhandenes Element im DOM anhängen.

// Creating a new element
const newElement = document.createElement('p');
newElement.textContent = 'This is a new paragraph.';
document.body.appendChild(newElement);

In diesem Beispiel wird ein neues

Das Element wird erstellt, sein Textinhalt wird festgelegt und es wird am Ende des -Elements hinzugefügt. Element.

2. Entfernen eines Elements

Um ein Element aus dem DOM zu entfernen, können Sie die Methode „remove“ verwenden. Dies ist besonders nützlich, um den Inhalt Ihrer Seite dynamisch zu verwalten.

// Removing an element
const oldElement = document.getElementById('old-element');
oldElement.remove();

Hier wird das Element mit der ID old-element aus dem DOM entfernt, wodurch es effektiv von der Webseite gelöscht wird.

Beispiel aus der Praxis: To-Do-Liste

Um diese Konzepte in Aktion zu sehen, erstellen wir eine einfache To-Do-List-Anwendung. Dieses Beispiel zeigt, wie DOM-Elemente in einem realen Szenario ausgewählt und bearbeitet werden.

HTML Structure

First, let's create the HTML structure for our To-Do List.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>To-Do List</title>
</head>
<body>
  <h1 id="heading">To-Do List</h1>
  <ul id="todo-list"></ul>
  <input type="text" id="new-todo" placeholder="New to-do">
  <button id="add-todo">Add To-Do</button>
</body>
</html>

In this structure:

• We have a heading (

  ) with an ID of heading.

• An unordered list (
  ) with an ID of todo-list, where our to-do items will be displayed.
  • An input field for adding new to-do items, with an ID of new-todo.
  • A button with an ID of add-todo to add new items to the list.

  JavaScript for Interactivity

  Next, we'll add some JavaScript to make the To-Do List interactive.
  

  <script>
    // Selecting elements
    const todoList = document.getElementById('todo-list');
    const newTodoInput = document.getElementById('new-todo');
    const addTodoButton = document.getElementById('add-todo');
  
    // Adding a new to-do item
    addTodoButton.addEventListener('click', () => {
      const newTodoText = newTodoInput.value;
      if (newTodoText === '') return; // Prevent adding empty to-do items
  
      // Create a new list item
      const newTodoItem = document.createElement('li');
      newTodoItem.textContent = newTodoText;
  
      // Append the new item to the list
      todoList.appendChild(newTodoItem);
  
      // Clear the input field
      newTodoInput.value = '';
    });
  </script>
  

  Explanation:

  1. Selecting Elements: We begin by selecting the necessary elements using their IDs.
  2. Event Listener: We add a click event listener to the "Add To-Do" button. When clicked, the event listener function is triggered.
  3. Input Validation: Inside the function, we first check if the input field is empty to prevent adding empty to-do items.
  4. Creating a New Element: If the input is not empty, we create a new
  5. element and set its text content to the value entered in the input field.
  6. Appending the New Item: The new
  7. is then appended to the existing
     element.
     • Clearing the Input Field: Finally, the input field is cleared, ready for the next to-do item.

  This simple application demonstrates the power of DOM manipulation in creating interactive and dynamic web pages.

  Conclusion

  DOM manipulation is a fundamental skill for any web developer. By understanding how to select and manipulate DOM elements, you can create web pages that are not only static but also responsive to user interactions. The examples provided in this article serve as a foundation for more advanced topics, such as event handling, animations, and dynamic content loading.

  By practicing these techniques and applying them to real-world scenarios, you'll gain a deeper understanding of how the web works and be well on your way to mastering front-end development.

  Das obige ist der detaillierte Inhalt vonDOM-Manipulation: Auswählen und Bearbeiten von DOM-Elementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!