Beherrschen der DOM-Manipulation in JavaScript: Ein umfassender Leitfaden

DOM-Manipulation in JavaScript

DOM-Manipulation ist ein grundlegender Aspekt der modernen Webentwicklung, der es Entwicklern ermöglicht, den Inhalt, die Struktur und den Stil von Webseiten dynamisch zu ändern. Das Document Object Model (DOM) stellt die HTML-Struktur einer Webseite in einem baumartigen Format dar.

---

1. Was ist das DOM?

Das DOM ist eine von Browsern bereitgestellte Schnittstelle, die es JavaScript ermöglicht, mit HTML und CSS zu interagieren. Es stellt die Seite als Knotenbaum dar, wobei jedes Element, Attribut oder jeder Text ein Knoten ist.

Beispiel:

Für den HTML-Code unten:

<div>



<p>The DOM structure looks like this:</p>

<ul>
<li>Document

<ul>
<li>HTML</li>
<li>Body

<ul>
<li>Div (id="container")</li>
<li>Paragraph ("Hello, World!")</li>
</ul>


</li>

</ul>

</li>

</ul>


<hr>

<h3>
  
  
  <strong>2. Selecting DOM Elements</strong>
</h3>

<h4>
  
  
  <strong>A. Using getElementById</strong>
</h4>

<p>Select an element by its ID.<br>
</p>

<pre class="brush:php;toolbar:false">const container = document.getElementById("container");
console.log(container); // Output: <div>



<h4>
  
  
  <strong>B. Using querySelector</strong>
</h4>

<p>Select the first matching element.<br>
</p>

<pre class="brush:php;toolbar:false">const paragraph = document.querySelector("p");
console.log(paragraph); // Output: <p>Hello, World!</p>

C. Verwenden von querySelectorAll

Wählen Sie alle passenden Elemente als NodeList aus.

const allParagraphs = document.querySelectorAll("p");
console.log(allParagraphs); // Output: NodeList of <p> elements

---

3. Ändern von DOM-Elementen

A. Inhalt ändern

Verwenden Sie die Eigenschaften textContent oder innerHTML, um Inhalte zu ändern.

const paragraph = document.querySelector("p");
paragraph.textContent = "Hello, JavaScript!";
// Changes <p>Hello, World!</p> to <p>Hello, JavaScript!</p>

B. Attribute ändern

Verwenden Sie setAttribute oder die direkte Eigenschaftszuweisung.

const image = document.querySelector("img");
image.setAttribute("src", "new-image.jpg");
image.alt = "A descriptive text";

C. Stile ändern

Ändern Sie die Stileigenschaft, um Inline-Stile anzuwenden.

const container = document.getElementById("container");
container.style.backgroundColor = "lightblue";
container.style.padding = "20px";

---

4. Elemente hinzufügen und entfernen

A. Neue Elemente erstellen

Verwenden Sie die Methode createElement.

const newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";
document.body.appendChild(newParagraph);

B. Elemente entfernen

Verwenden Sie die Methode „remove“ oder „removeChild“.

const paragraph = document.querySelector("p");
paragraph.remove(); // Removes the paragraph from the DOM

---

5. Hinzufügen von Ereignis-Listenern zu Elementen

Sie können Elementen mithilfe von Ereignis-Listenern Interaktivität hinzufügen.

const button = document.createElement("button");
button.textContent = "Click Me";

button.addEventListener("click", function() {
  alert("Button clicked!");
});

document.body.appendChild(button);

---

6. Durchquerung des DOM

Navigieren Sie durch übergeordnete, untergeordnete und Geschwisterelemente.

A. Eltern und Kinder

const child = document.querySelector("p");
const parent = child.parentElement;
console.log(parent); // Output: Parent element of <p>

const children = parent.children;
console.log(children); // Output: HTMLCollection of child elements

B. Geschwister

const sibling = child.nextElementSibling;
console.log(sibling); // Output: Next sibling element

---

7. Leistungsoptimierung

1. DokumentFragment für Stapelaktualisierungen verwenden: Minimieren Sie Reflows und Neulackierungen, indem Sie DOM-Updates gruppieren.

   const fragment = document.createDocumentFragment();
   for (let i = 0; i < 5; i++) {
     const li = document.createElement("li");
     li.textContent = `Item ${i + 1}`;
     fragment.appendChild(li);
   }
   document.querySelector("ul").appendChild(fragment);

1. Direkte DOM-Manipulation minimieren:
   Zwischenspeichern Sie Elemente und ändern Sie sie in großen Mengen.

2. Virtuelle DOM-Bibliotheken verwenden:
   Ziehen Sie für komplexe Anwendungen Bibliotheken wie React oder Vue in Betracht.

---

8. Praxisbeispiel: To-Do-Liste

<div>



<p>The DOM structure looks like this:</p>

<ul>
<li>Document

<ul>
<li>HTML</li>
<li>Body

<ul>
<li>Div (id="container")</li>
<li>Paragraph ("Hello, World!")</li>
</ul>


</li>

</ul>

</li>

</ul>


<hr>

<h3>
  
  
  <strong>2. Selecting DOM Elements</strong>
</h3>

<h4>
  
  
  <strong>A. Using getElementById</strong>
</h4>

<p>Select an element by its ID.<br>
</p>

<pre class="brush:php;toolbar:false">const container = document.getElementById("container");
console.log(container); // Output: <div>



<h4>
  
  
  <strong>B. Using querySelector</strong>
</h4>

<p>Select the first matching element.<br>
</p>

<pre class="brush:php;toolbar:false">const paragraph = document.querySelector("p");
console.log(paragraph); // Output: <p>Hello, World!</p>

---

9. Zusammenfassung

• DOM-Manipulation ermöglicht Entwicklern die dynamische Änderung von Webseiten.
• Verwenden Sie Methoden wie getElementById, querySelector und createElement für eine effektive Manipulation.
• Minimieren Sie die direkte DOM-Manipulation für eine bessere Leistung.

Die Beherrschung der DOM-Manipulation ist für die Erstellung dynamischer, interaktiver und benutzerfreundlicher Webanwendungen unerlässlich.

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 der DOM-Manipulation in JavaScript: Ein umfassender Leitfaden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!