suchen

Heim >Web-Frontend >js-Tutorial >Beherrschen des JavaScript-HTML-DOM: Erstellen dynamischer und interaktiver Webseiten

Beherrschen des JavaScript-HTML-DOM: Erstellen dynamischer und interaktiver Webseiten

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-12-20 02:57:12358Durchsuche

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

Zugriff auf das DOM

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

Gemeinsame Auswahlmethoden

  1. getElementById Wählt ein Element anhand seiner ID aus. 
   const title = document.getElementById("title");
   console.log(title.innerText); // Output: Hello, DOM!
  1. getElementsByClassName Wählt Elemente anhand ihres Klassennamens aus (gibt eine Sammlung zurück). 
   const paragraphs = document.getElementsByClassName("description");
   console.log(paragraphs[0].innerText);
  1. getElementsByTagName Wählt Elemente anhand ihres Tag-Namens aus (z. B. div, p). 
   const headings = document.getElementsByTagName("h1");
   console.log(headings[0].innerText);
  1. querySelector Wählt das erste Element aus, das einem CSS-Selektor entspricht. 
   const title = document.querySelector("#title");
  1. querySelectorAll Wählt alle Elemente aus, die einem CSS-Selektor entsprechen (gibt eine NodeList zurück). 
   const paragraphs = document.querySelectorAll(".description");

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!";
  • innerText oder textContent: Legt einfachen Text fest oder ruft ihn ab. 
  document.getElementById("title").innerText = "Hello, World!";

2. Attribute ändern

  • Verwenden Sie setAttribute und getAttribute, um Elementattribute zu ändern. 
  const link = document.querySelector("a");
  link.setAttribute("href", "https://example.com");
  • Attribute wie id, className oder src direkt ändern. 
  const image = document.querySelector("img");
  image.src = "image.jpg";

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

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!

2. Elemente entfernen

  • removeChild: Entfernt ein untergeordnetes Element. 
   const paragraphs = document.getElementsByClassName("description");
   console.log(paragraphs[0].innerText);

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);

Allgemeine Ereignisse

  1. Mausereignisse: Klicken, Doppelklick, Mouseover, Mouseout
  2. Tastaturereignisse: Keydown, Keyup
  3. 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");

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");

2. Arbeiten mit Klassen

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

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

3. Verwenden von Vorlagen

HTML-Vorlagen ermöglichen wiederverwendbare Inhalte.

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

Best Practices für die DOM-Manipulation

  1. Reflows und Neulackierungen minimieren:

    • Batch-DOM-Änderungen, um übermäßiges Rendern zu vermeiden.
    • Verwenden Sie documentFragment für mehrere Aktualisierungen.

  2. 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
  1. 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!

JavaScript batch css html Object for select using class Interface Property Event Collection dom this innerHTML Access
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Entmystifizierung der Destrukturierungszuweisung in JavaScriptNächster Artikel：Entmystifizierung der Destrukturierungszuweisung in JavaScript

In Verbindung stehende Artikel

Mehr sehen