Beherrschen des JavaScript-HTML-DOM: Erstellen dynamischer und interaktiver Webseiten-js-Tutorial-php.cn

Mastering the JavaScript HTML DOM: Building Dynamic and Interactive Webpages

JavaScript HTML DOM: Eine vollständige Anleitung

Das Document Object Model (DOM) ist eine Programmierschnittstelle für Webdokumente. Es stellt die Struktur einer Webseite als Baum von Objekten dar und ermöglicht Entwicklern die Bearbeitung von HTML und CSS mithilfe von JavaScript. Durch die Beherrschung von DOM können Sie dynamische, interaktive Webseiten erstellen.

Was ist das DOM?

Das DOM ist eine strukturierte Darstellung eines HTML-Dokuments. Es ermöglicht JavaScript, dynamisch auf die Elemente, Attribute und Inhalte einer Webseite zuzugreifen und diese zu bearbeiten.

Beispiel:

Für diesen HTML-Code:

<!DOCTYPE html>
<html>
  <head>
    <title>DOM Example</title>
  </head>
  <body>
    <h1>



<p>The DOM represents it as:<br>
</p>

<pre class="brush:php;toolbar:false">- Document
  - html
    - head
      - title
    - body
      - h1
      - p

Nach dem Login kopieren

Zugriff auf das DOM

JavaScript bietet Methoden zum Auswählen und Bearbeiten von DOM-Elementen.

Gemeinsame Auswahlmethoden

getElementById Wählt ein Element anhand seiner ID aus.

   const title = document.getElementById("title");
   console.log(title.innerText); // Output: Hello, DOM!

Nach dem Login kopieren

getElementsByClassName Wählt Elemente anhand ihres Klassennamens aus (gibt eine Sammlung zurück).

   const paragraphs = document.getElementsByClassName("description");
   console.log(paragraphs[0].innerText);

Nach dem Login kopieren

getElementsByTagName Wählt Elemente anhand ihres Tag-Namens aus (z. B. div, p).

   const headings = document.getElementsByTagName("h1");
   console.log(headings[0].innerText);

Nach dem Login kopieren

querySelector Wählt das erste Element aus, das einem CSS-Selektor entspricht.

   const title = document.querySelector("#title");

Nach dem Login kopieren

querySelectorAll Wählt alle Elemente aus, die einem CSS-Selektor entsprechen (gibt eine NodeList zurück).

   const paragraphs = document.querySelectorAll(".description");

Nach dem Login kopieren

DOM-Manipulation

Nach der Auswahl können Sie Elemente, Attribute und Inhalte dynamisch ändern.

1. Inhalt ändern

innerHTML: Legt HTML-Inhalt fest oder ruft ihn ab.

  document.getElementById("title").innerHTML = "Welcome to the DOM!";

Nach dem Login kopieren

innerText oder textContent: Legt einfachen Text fest oder ruft ihn ab.

  document.getElementById("title").innerText = "Hello, World!";

Nach dem Login kopieren

2. Attribute ändern

Verwenden Sie setAttribute und getAttribute, um Elementattribute zu ändern.

  const link = document.querySelector("a");
  link.setAttribute("href", "https://example.com");

Nach dem Login kopieren

Attribute wie id, className oder src direkt ändern.

  const image = document.querySelector("img");
  image.src = "image.jpg";

Nach dem Login kopieren

3. Stile ändern

CSS-Eigenschaften direkt ändern.

<!DOCTYPE html>
<html>
  <head>
    <title>DOM Example</title>
  </head>
  <body>
    <h1>



<p>The DOM represents it as:<br>
</p>

<pre class="brush:php;toolbar:false">- Document
  - html
    - head
      - title
    - body
      - h1
      - p

Nach dem Login kopieren

Elemente hinzufügen und entfernen

1. Elemente hinzufügen

createElement: Erstellt ein neues Element.
appendChild: Hängt ein Element an ein übergeordnetes Element an.

   const title = document.getElementById("title");
   console.log(title.innerText); // Output: Hello, DOM!

Nach dem Login kopieren

2. Elemente entfernen

removeChild: Entfernt ein untergeordnetes Element.

   const paragraphs = document.getElementsByClassName("description");
   console.log(paragraphs[0].innerText);

Nach dem Login kopieren

Ereignisbehandlung im DOM

Ereignisse sind vom Browser erkannte Aktionen oder Ereignisse, wie z. B. Klicks oder Tastendrücke.

Ereignis-Listener hinzufügen

Verwenden Sie addEventListener, um Ereignisse an Elemente zu binden.

   const headings = document.getElementsByTagName("h1");
   console.log(headings[0].innerText);

Nach dem Login kopieren

Allgemeine Ereignisse

Mausereignisse: Klicken, Doppelklick, Mouseover, Mouseout
Tastaturereignisse: Keydown, Keyup
Ereignisse bilden: einreichen, ändern, fokussieren

Durchquerung des DOM

Sie können mithilfe von Beziehungen im DOM-Baum zwischen Elementen navigieren.

Eltern und Kinder

parentNode: Ruft den übergeordneten Knoten ab.
childNodes: Listet alle untergeordneten Knoten auf.
Kinder: Listet alle untergeordneten Elemente auf.

   const title = document.querySelector("#title");

Nach dem Login kopieren

Geschwister

nextSibling: Ruft den nächsten Geschwisterknoten ab.
previousSibling : Ruft den vorherigen Geschwisterknoten ab.

Erweiterte DOM-Funktionen

1. Elemente klonen

Erstellen Sie ein Duplikat eines Elements mit cloneNode.

   const paragraphs = document.querySelectorAll(".description");

Nach dem Login kopieren

2. Arbeiten mit Klassen

Verwenden Sie die classList-Eigenschaft, um Klassen zu bearbeiten.

  document.getElementById("title").innerHTML = "Welcome to the DOM!";

Nach dem Login kopieren

3. Verwenden von Vorlagen

HTML-Vorlagen ermöglichen wiederverwendbare Inhalte.

  document.getElementById("title").innerText = "Hello, World!";

Nach dem Login kopieren

Best Practices für die DOM-Manipulation

Reflows und Neulackierungen minimieren:
- Batch-DOM-Änderungen, um übermäßiges Rendern zu vermeiden.
- Verwenden Sie documentFragment für mehrere Aktualisierungen.
Ereignisdelegation verwenden:

Hängen Sie Ereignisse an übergeordnete Elemente statt an einzelne untergeordnete Elemente an.

<!DOCTYPE html>
<html>
  <head>
    <title>DOM Example</title>
  </head>
  <body>
    <h1>



<p>The DOM represents it as:<br>
</p>

<pre class="brush:php;toolbar:false">- Document
  - html
    - head
      - title
    - body
      - h1
      - p

Nach dem Login kopieren

Vermeiden Sie Inline-JavaScript: Verwenden Sie externe Skripte oder addEventListener für eine saubere Trennung des Codes.

Fazit

Das JavaScript HTML DOM ist ein leistungsstarkes Tool zum Erstellen dynamischer und interaktiver Webseiten. Durch die Beherrschung von DOM-Manipulation, Ereignisbehandlung und Best Practices können Entwickler reaktionsfähige und benutzerfreundliche Anwendungen erstellen, die das gesamte Benutzererlebnis verbessern.

Hallo, ich bin Abhay Singh Kathayat!
Ich bin ein Full-Stack-Entwickler mit Fachwissen sowohl in Front-End- als auch in Back-End-Technologien. Ich arbeite mit einer Vielzahl von Programmiersprachen und Frameworks, um effiziente, skalierbare und benutzerfreundliche Anwendungen zu erstellen.
Sie können mich gerne unter meiner geschäftlichen E-Mail-Adresse erreichen: kaashshorts28@gmail.com.

Das obige ist der detaillierte Inhalt vonBeherrschen des JavaScript-HTML-DOM: Erstellen dynamischer und interaktiver Webseiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!