HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

JS-Tutorial

JS-HAUS JS-Einführung JS Wohin JS-Ausgabe JS-Anweisungen JS-Syntax JS-Kommentare JS-Variablen JS Let JS Konst JS-Operatoren JS-Arithmetik JS-Aufgabe JS-Datentypen JS-Funktionen JS-Objekte JS-Ereignisse JS-Strings JS-String-Methoden Suche nach JS-Strings JS-String-Vorlagen JS-Nummern JS-Zahlenmethoden JS-Arrays JS-Array-Methoden JS-Array-Sortierung JS-Array-Iteration JS-Array-Konstante JS-Daten JS-Datumsformate JS Date Get-Methoden JS-Datumssatzmethoden JS Math JS Zufällig JS Boolesche Werte JS-Vergleiche JS-Bedingungen JS-Schalter JS-Schleife für JS-Schleife für In JS-Schleife für Of JS-Schleife While JS Pause JS-Iterables JS-Sets JS-Karten JS Typeof JS-Typkonvertierung JS Bitweise JS RegExp JS-Fehler JS-Bereich JS Heben Strenger JS-Modus JS dieses Schlüsselwort JS-Pfeilfunktion JS-Klassen JS JSON JS-Debugging JS-Styleguide JS Best Practices JS-Fehler JS-Leistung JS Reservierte Wörter

JS-Versionen

JS-Versionen JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge JS-Geschichte

JS-Objekte

Objektdefinitionen Objekteigenschaften Objektmethoden Objektanzeige Objektzugriffsmethoden Objektkonstruktoren Objekt-Prototypen Objekt-Iterables Objektsätze Objektkarten Objektreferenz

JS-Funktionen

Funktionsdefinitionen Funktionsparameter Funktionsaufruf Funktionsaufruf Funktion anwenden Funktionsschließungen

JS-Klassen

Klasse Einführung Klassenvererbung Klasse statisch

JS asynchron

JS-Rückrufe JS asynchron JS verspricht JS Async/Warten

JS-HTML-DOM

DOM-Einführung DOM-Methoden DOM-Dokument DOM-Elemente DOM-HTML DOM-Formulare DOM-CSS DOM-Animationen DOM-Ereignisse DOM-Ereignis-Listener DOM-Navigation DOM-Knoten DOM-Sammlungen DOM-Knotenlisten

Stückliste des JS-Browsers

JS-Fenster JS-Bildschirm JS-Standort JS-Geschichte JS-Navigator JS-Popup-Warnung JS-Timing JS-Cookies

JS-Web-APIs

Web-API-Einführung Web Forms-API Webprotokoll-API Webspeicher-API Web Worker-API Web-Fetch-API Web-Geolocation-API

JS AJAX

AJAX-Einführung AJAX-XMLHttp AJAX-Anfrage AJAX-Antwort AJAX-XML-Datei AJAX-PHP AJAX ASP AJAX-Datenbank AJAX-Anwendungen AJAX-Beispiele

JS JSON

JSON-Einführung JSON-Syntax JSON vs. XML JSON-Datentypen JSON-Parsing JSON-Stringify JSON-Objekte JSON-Arrays JSON-Server JSON-PHP JSON-HTML JSON JSONP

JS vs. jQuery

jQuery-Selektoren jQuery-HTML jQuery-CSS jQuery-DOM

JS-Grafik

JS-Grafik JS-Leinwand JS Plotly JS Chart.js JS Google-Diagramm JS D3.js

JS-Beispiele

JS-Beispiele JS-HTML-DOM JS-HTML-Eingabe JS-HTML-Objekte JS-HTML-Ereignisse JS-Browser JS-Editor JS-Übungen JS-Quiz JS-Zertifikat

JS-Referenzen

JavaScript-Objekte HTML-DOM-Objekte


JavaScript -HTML-DOM

❮ Vorherige Nächste ❯

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

Das HTML-DOM (Document Object Model)

Wenn eine Webseite geladen wird, erstellt der Browser ein Dokumentobjektmodell der Seite .

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

Der HTML-DOM-Objektbaum

DOM HTML tree

Mit dem Objektmodell bekommt JavaScript alle Kraft, die es braucht, um dynamisches HTML zu erstellen:

  • JavaScript kann alle HTML-Elemente auf der Seite ändern
  • JavaScript kann alle HTML-Attribute auf der Seite ändern
  • JavaScript kann alle CSS-Stile auf der Seite ändern
  • JavaScript kann vorhandene HTML-Elemente und -Attribute entfernen
  • JavaScript kann neue HTML-Elemente und Attribute hinzufügen
  • JavaScript kann auf alle vorhandenen HTML-Ereignisse in der Seite reagieren
  • JavaScript kann neue HTML-Ereignisse auf der Seite erstellen

Was du lernen wirst

In den nächsten Kapiteln dieses Tutorials lernen Sie:

  • So ändern Sie den Inhalt von HTML-Elementen
  • So ändern Sie den Stil (CSS) von HTML-Elementen
  • So reagieren Sie auf HTML-DOM-Ereignisse
  • Wie man HTML-Elemente hinzufügt und löscht

Was ist das DOM?

Das DOM ist ein Standard des W3C (World Wide Web Consortium).

Das DOM definiert einen Standard für den Zugriff auf Dokumente:

„Das Document Object Model (DOM) des W3C ist eine plattform- und sprachneutrale Schnittstelle, die es Programmen und Skripten ermöglicht, dynamisch auf den Inhalt, die Struktur und den Stil eines Dokuments zuzugreifen und diese zu aktualisieren.“

Der W3C-DOM-Standard ist in 3 verschiedene Teile unterteilt:

  • Core DOM - Standardmodell für alle Dokumenttypen
  • XML DOM - Standardmodell für XML-Dokumente
  • HTML DOM - Standardmodell für HTML-Dokumente

Was ist das HTML-DOM?

Das HTML- DOM ist ein Standardobjektmodell und eine Programmierschnittstelle für HTML. Es definiert:

  • Die HTML-Elemente als Objekte
  • Die Eigenschaften aller HTML-Elemente
  • Die Methoden für den Zugriff auf alle HTML-Elemente
  • Die Ereignisse für alle HTML-Elemente

Mit anderen Worten: Das HTML-DOM ist ein Standard dafür, wie man HTML-Elemente erhält, ändert, hinzufügt oder löscht.


❮ Vorherige Nächste ❯