HTML-DOM-Methoden

querySelector ()

Die Document-Methode querySelector()gibt das firstElement innerhalb des Dokuments zurück, das dem angegebenen Selektor oder der angegebenen Selektorgruppe entspricht. Wenn keine Übereinstimmungen gefunden werden, wird null zurückgegeben.

HTML-Inhalt:

 element-example 

JavaScript-Inhalt:

document.querySelector("#id-example"); // Returns the element with id "id-example" document.querySelector(".class-example"); // Returns the element with class "class-example" document.querySelector("a"); // Returns the "a" element 

Hinweis querySelector()gibt das erste übereinstimmende Element zurück. Um alle Übereinstimmungen zurückzugeben, verwenden Sie stattdessen die querySelectorAll () -Methode.

 First Second 
document.querySelector("#example"); // Returns only the element containing 'First'

innerHTML

Die innerHTMLRequisite gibt den HTML-Inhalt innerhalb eines ausgewählten Elements zurück und lässt Sie auch einen neuen HTML-Inhalt definieren.

Elementinhalt abrufen

Demo

var element = document.getElementById("demo"); console.log(element.innerHTML) //logs 

Demo

Elementinhalt festlegen

var element = document.getElementById("demo"); element.innerHTML = " Demo ";

Der HTML-Code wird jetzt so sein

 Demo 

Sicherheitsüberlegungen

Der festgelegte Wert innerHTMLsollte aus vertrauenswürdigen Quellen stammen, da Javascript alles in dieses Element einfügt und es als einfaches HTML ausgeführt wird.

Beispiel:

Durch Festlegen eines " alert();" - Werts wird die Javascript-Funktion "alert ()" ausgelöst:

var element = document.getElementById("demo"); element.innerHTML = "alert();";

Diese Art von Angriff wird als Cross Site Scripting oder kurz XSS bezeichnet.

Dies ist eine der häufigsten Methoden, um einen XSS-Angriff auszuführen. Wenn Sie ein bisschen mehr lernen und lernen möchten, sich dagegen zu verteidigen, schauen Sie sich diese Ressource an.

getElementById ()

Die getElementById()Methode gibt das Element zurück, das das Attribut id mit dem angegebenen Wert hat. Es wird ein Argument benötigt, bei dem es sich um eine Zeichenfolge mit Groß- und Kleinschreibung der ID für das gewünschte Element handelt.

Diese Methode ist eine der häufigsten Methoden im HTML-DOM und wird fast jedes Mal verwendet, wenn Sie ein Element in Ihrem Dokument bearbeiten oder Informationen von ihm abrufen möchten. Hier ist ein einfaches Beispiel für die Syntax:

HTML-Inhalt:

JavaScript-Inhalt:

document.getElementById("demo"); // Returns the element with id "demo"

Wenn Sie mehr als ein Element mit dem gleichen Wert von id(schlechte Praxis!) Haben , getElementByIdwird das erste gefundene Element zurückgegeben:

 First Second 
document.getElementById("demo"); // Returns the element with id "demo" containing 'First'

Mehr Informationen:

document.getElementById ()

Alternativlösungen:

Eine häufig verwendete Alternative dazu document.getElementByIdist die Verwendung eines jQuery-Selektors, über den Sie hier mehr lesen.

Weitere Infos zum HTML DOM

Mit dem HTML-DOM kann JavaScript auf alle Elemente eines HTML-Dokuments zugreifen und diese ändern.

Wenn eine Webseite geladen wird, erstellt der Browser ein D OKUMENT O bject M odel der Seite.

Das HTML-DOM-Modell ist als Baum von Objekten aufgebaut:

Jedes Element im DOM wird auch als Knoten bezeichnet.

   My title    My Link 

My header

Das DOM für den obigen HTML-Code lautet wie folgt:

DOM tree

Mit dem Objektmodell erhält JavaScript die erforderliche Leistung, um dynamisches HTML zu erstellen:

  • JavaScript can change all the HTML elements in the page
  • JavaScript can change all the HTML attributes in the page
  • JavaScript can change all the CSS styles in the page
  • JavaScript can remove existing HTML elements and attributes
  • JavaScript can add new HTML elements and attributes
  • JavaScript can react to all existing HTML events in the page
  • JavaScript can create new HTML events in the page