Was ist DOM in JavaScript?
JavaScript kann mithilfe des Document Object Model (DOM) auf alle Elemente einer Webseite zugreifen. Tatsächlich erstellt der Webbrowser beim Laden der Seite ein DOM der Webseite. Das DOM-Modell wird als Baum von Objekten wie folgt erstellt:
Verwendung von DOM und Ereignissen
Mit DOM kann JavaScript mehrere Aufgaben ausführen. Es kann neue Elemente und Attribute erstellen, vorhandene Elemente und Attribute ändern und sogar vorhandene Elemente und Attribute entfernen. JavaScript kann auch auf vorhandene Ereignisse reagieren und neue Ereignisse auf der Seite erstellen.
getElementById, innerHTML Beispiel
- getElementById: Zugriff auf Elemente und Attribute, deren ID festgelegt ist.
- innerHTML: Um auf den Inhalt eines Elements zuzugreifen.
Probieren Sie dieses Beispiel selbst aus:
DOM !!! </ title></ head><body> <h2>Willkommen </ h1> <p>Dies ist die Begrüßungsnachricht. </p> <h2>Technologie </ h2> <p>Dies ist der Technologiebereich. </p> <script type = "text />var text = document.getElementById ("one"). innerHTML;alert ("Die erste Überschrift ist" + Text);</ script></ body></ html></pre> <h3>Beispiel für getElementsByTagName</h3> <p>getElementsByTagName: Zugriff auf Elemente und Attribute mithilfe des Tag-Namens. Diese Methode gibt ein Array aller Elemente mit demselben Tag-Namen zurück.</p> <p>Probieren Sie dieses Beispiel selbst aus:</p> <pre translate="no" class="codeguru"><html><head><title> DOM !!! </ title></ head><body> <h2>Willkommen </ h1> <p>Dies ist die Begrüßungsnachricht. </p> <div id="container-5533149ee6411a5f99b370c693e87966"></div> <h2>Technologie </ h2> <p id = "second"> Dies ist der Technologiebereich. </p> <script type = "text />varagraphs = document.getElementsByTagName ("p");alert ("Inhalt im zweiten Absatz ist" + Absätze [1] .innerHTML);document.getElementById ("second"). innerHTML = "Die ursprüngliche Nachricht wird geändert.";</ script></ body></ html></pre> <h3>Beispiel für einen Ereignishandler</h3> <ol> <li>createElement: Zum Erstellen eines neuen Elements</li> <li>removeChild: Entferne ein Element</li> <li>Sie können einem bestimmten Element wie folgt einen <strong>Ereignishandler</strong> hinzufügen :</li> </ol> <pre translate="no"> document.getElementById(id).onclick=function(){lines of code to be executed}</pre> <p>ODER</p> <pre translate="no">document.getElementById(id).addEventListener("click", functionname)</pre> <p>Probieren Sie dieses Beispiel selbst aus:</p> <pre translate="no" class="codeguru"><html><head><title> DOM !!! </ title></ head><body><input type = "button" id = "btnClick" value = "Klick mich !!" /><script type = "text />document.getElementById ("btnClick"). addEventListener ("click", clicked);Funktion geklickt (){alert ("Du hast mich angeklickt !!!");}}</ script></ body></ html></pre> <form class="hidden" code-box" name="sample"> Dieser Code kann bearbeitet werden. Klicken Sie zum Ausführen auf Ausführen<textarea name="codeguru"> </textarea> <p><input type="submit" value="Lauf" style="background-color:#df5035;" color:#ffffff;"></p> </div> </article> <div id="container-5533149ee6411a5f99b370c693e87966"></div> </div> </div> </div> </div> </div> <aside class="col-lg-4 sidebar sidebar--right"> <div class="widget widget-popular-posts"> <h2 class="widget-title">Beliebte Beiträge</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8004162-122-the-state-of-favicons" title="# 122: Der Staat Favicons - CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/9897078/122_the_state_of_favicons_css-tricks.png.webp" loading="lazy" alt="# 122: Der Staat Favicons - CSS-Tricks" title="# 122: Der Staat Favicons - CSS-Tricks" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004162-122-the-state-of-favicons" title="# 122: Der Staat Favicons - CSS-Tricks" rel="bookmark"># 122: Der Staat Favicons - CSS-Tricks 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8004163-124-a-modern-web-designers-workflow" title="# 124: Der Workflow eines modernen Webdesigners - CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/2067075/124_a_modern_web_designers_workflow_css-tricks.png.webp" loading="lazy" alt="# 124: Der Workflow eines modernen Webdesigners - CSS-Tricks" title="# 124: Der Workflow eines modernen Webdesigners - CSS-Tricks" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004163-124-a-modern-web-designers-workflow" title="# 124: Der Workflow eines modernen Webdesigners - CSS-Tricks" rel="bookmark"># 124: Der Workflow eines modernen Webdesigners - CSS-Tricks 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8004164-126-using-modernizr" title="# 126: Verwenden von Modernizr - CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/5547423/126_using_modernizr_css-tricks.png.webp" loading="lazy" alt="# 126: Verwenden von Modernizr - CSS-Tricks" title="# 126: Verwenden von Modernizr - CSS-Tricks" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004164-126-using-modernizr" title="# 126: Verwenden von Modernizr - CSS-Tricks" rel="bookmark"># 126: Verwenden von Modernizr - CSS-Tricks 2025</a></h3> </div> </div> </li> </ul> </div> <div class="widget widget-popular-posts"> <h2 class="widget-title">Die besten Bewertungen für den Monat</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8225632-vb-net-textbox-control-tutorial-properties-with-example" title="VB.Net TEXTBOX Control Tutorial: Eigenschaften mit Beispiel" rel="bookmark">VB.Net TEXTBOX Control Tutorial: Eigenschaften mit Beispiel</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8225633-vb-net-tutorial-pdf-with-beginners-examples-download-now" title="VB.NET Tutorial PDF mit Anfängern Beispiele: (Jetzt herunterladen)" rel="bookmark">VB.NET Tutorial PDF mit Anfängern Beispiele: (Jetzt herunterladen)</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8225634-what-is-vbscript-introduction-and-examples" title="Was ist VBScript? Einführung & Beispiele" rel="bookmark">Was ist VBScript? Einführung & Beispiele</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8225635-vbscript-variable-declaration-with-data-types-dim-string-boolean" title="VBScript-Variablendeklaration mit Datentypen: Dim, String, Boolean" rel="bookmark">VBScript-Variablendeklaration mit Datentypen: Dim, String, Boolean</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8225636-vbscript-operators-logical-and-or-arithmetic-comparison-example" title="VBScript-Operatoren: Logische (UND, ODER) Arithmetik, Vergleichsbeispiel" rel="bookmark">VBScript-Operatoren: Logische (UND, ODER) Arithmetik, Vergleichsbeispiel</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8225637-vbscript-conditional-statement-if-else-elseif-select-case-example" title="VBScript-Bedingungsanweisung: IF Else, ElseIF, Select Case Example" rel="bookmark">VBScript-Bedingungsanweisung: IF Else, ElseIF, Select Case Example</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8225638-vbscript-functions-and-procedures-with-example" title="VBScript-Funktionen & Verfahren mit Beispiel" rel="bookmark">VBScript-Funktionen & Verfahren mit Beispiel</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8225639-top-25-vbscript-interview-questions-and-answers" title="Top 25 VBScript Interview Fragen & Antworten" rel="bookmark">Top 25 VBScript Interview Fragen & Antworten</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8225640-what-is-an-api-meaning-definition-types-application-example" title="Was ist eine API? Bedeutung, Definition, Typen, Anwendung, Beispiel" rel="bookmark">Was ist eine API? Bedeutung, Definition, Typen, Anwendung, Beispiel</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8225641-vbscript-loops-do-while-do-until-while-for-each-example" title="VBScript-Schleifen: Do While, Do Until, While für jeden (Beispiel)" rel="bookmark">VBScript-Schleifen: Do While, Do Until, While für jeden (Beispiel)</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8225642-what-are-web-services-architecture-types-example" title="Was sind Webdienste? Architektur, Typen, Beispiel" rel="bookmark">Was sind Webdienste? Architektur, Typen, Beispiel</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8225643-wsdl-tutorial-web-services-description-language-with-example" title="WSDL-Lernprogramm: Web Services-Beschreibungssprache mit Beispiel" rel="bookmark">WSDL-Lernprogramm: Web Services-Beschreibungssprache mit Beispiel</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8225644-web-servicews-security-tutorial-with-soap-example" title="Web Service (WS) Sicherheits-Tutorial mit SOAP-Beispiel" rel="bookmark">Web Service (WS) Sicherheits-Tutorial mit SOAP-Beispiel</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8225645-soap-vs-rest-difference-between-web-api-services" title="SOAP Vs. REST: Unterschied zwischen Web-API-Diensten" rel="bookmark">SOAP Vs. REST: Unterschied zwischen Web-API-Diensten</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8225646-soa-service-oriented-architecture-principles" title="SOA-Prinzipien (Service Oriented Architecture)" rel="bookmark">SOA-Prinzipien (Service Oriented Architecture)</a></h3> </div> </div> </li> </ul> </div> <div id="container-5533149ee6411a5f99b370c693e87966"></div> <div class="widget widget-popular-posts"> <h2 class="widget-title">Top Artikel</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8226406-top-15-big-data-tools-open-source-software-for-data-analytics" title="Top 15 Big Data Tools - Open Source Software für Data Analytics" rel="bookmark"><img src="https://cdn.css-code.org/3620710/top_15_big_data_tools_open_source_software_for_data_analytics.jpg.webp" loading="lazy" alt="Top 15 Big Data Tools - Open Source Software für Data Analytics" title="Top 15 Big Data Tools - Open Source Software für Data Analytics" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8226406-top-15-big-data-tools-open-source-software-for-data-analytics" title="Top 15 Big Data Tools - Open Source Software für Data Analytics" rel="bookmark">Top 15 Big Data Tools - Open Source Software für Data Analytics 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8226407-cassandra-collection-set-list-map-with-example" title="Cassandra Collection: Set, Liste, Karte mit Beispiel" rel="bookmark"><img src="https://cdn.css-code.org/9220677/cassandra_collection_set-_list-_map_with_example.png.webp" loading="lazy" alt="Cassandra Collection: Set, Liste, Karte mit Beispiel" title="Cassandra Collection: Set, Liste, Karte mit Beispiel" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8226407-cassandra-collection-set-list-map-with-example" title="Cassandra Collection: Set, Liste, Karte mit Beispiel" rel="bookmark">Cassandra Collection: Set, Liste, Karte mit Beispiel 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8226408-cassandra-query-languagecql-insert-into-update-delete-example" title="Cassandra Query Language (CQL): Einfügen in, Aktualisieren, Löschen (Beispiel)" rel="bookmark"><img src="https://cdn.css-code.org/2432322/cassandra_query_languagecql_insert_into-_update-_delete_example.png.webp" loading="lazy" alt="Cassandra Query Language (CQL): Einfügen in, Aktualisieren, Löschen (Beispiel)" title="Cassandra Query Language (CQL): Einfügen in, Aktualisieren, Löschen (Beispiel)" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8226408-cassandra-query-languagecql-insert-into-update-delete-example" title="Cassandra Query Language (CQL): Einfügen in, Aktualisieren, Löschen (Beispiel)" rel="bookmark">Cassandra Query Language (CQL): Einfügen in, Aktualisieren, Löschen (Beispiel) 2025</a></h3> </div> </div> </li> </ul> </div> </aside> </div> </div> <footer class="footer footer--dark"> <div class="container"> <div class="footer__widgets"> <div class="row"> <div class="col-lg-4"> <div class="widget"> <h2 class="widget-title">Beliebte Beiträge</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003850-keep-text-inputs-in-sync" title="Halten Sie die Texteingaben synchron - CSS-Tricks" rel="bookmark">Halten Sie die Texteingaben synchron - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003851-link-nudging" title="Link Nudging - CSS-Tricks" rel="bookmark">Link Nudging - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003852-jquery-zebra-stripe-a-table" title="JQuery Zebra Stripe a Table - CSS-Tricks" rel="bookmark">JQuery Zebra Stripe a Table - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003853-jquery-sticky-footer" title="JQuery Sticky Footer - CSS-Tricks" rel="bookmark">JQuery Sticky Footer - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003854-konami-code" title="Konami Code - CSS-Tricks" rel="bookmark">Konami Code - CSS-Tricks</a></h3> </div> </div> </li> </ul> </div> </div> <div class="col-lg-4"> <div class="widget"> <h2 class="widget-title">Tipp Der Redaktion</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8223788-all-about-internal-order-in-sap" title="Alles über den Innenauftrag in SAP" rel="bookmark">Alles über den Innenauftrag in SAP</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8223789-settlement-of-internal-orders-tutorial-ko02-and-ko88-in-sap" title="Tutorial zur Abwicklung von Innenaufträgen: KO02 & KO88 in SAP" rel="bookmark">Tutorial zur Abwicklung von Innenaufträgen: KO02 & KO88 in SAP</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8223790-creation-of-profit-center-using-standard-hierarchy-in-sap" title="Erstellung eines Profit Centers unter Verwendung der Standardhierarchie in SAP" rel="bookmark">Erstellung eines Profit Centers unter Verwendung der Standardhierarchie in SAP</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8223791-sap-profit-center-tutorial-create-group-posting-and-planning" title="SAP Profit Center Tutorial: Erstellen, Gruppieren, Buchen & Planung" rel="bookmark">SAP Profit Center Tutorial: Erstellen, Gruppieren, Buchen & Planung</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8223795-sap-co-tables-important-tables-in-controlling-module" title="SAP CO-Tabellen: Wichtige Tabellen im Controlling-Modul" rel="bookmark">SAP CO-Tabellen: Wichtige Tabellen im Controlling-Modul</a></h3> </div> </div> </li> </ul> </div> </div> <div class="col-lg-4"> <div class="widget"> <h2 class="widget-title">Top Artikel</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003085-unicode-bidi" title="Unicode-bidi - CSS-Tricks" rel="bookmark">Unicode-bidi - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003086-vertical-align" title="Vertikal ausrichten - CSS-Tricks" rel="bookmark">Vertikal ausrichten - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003087-widows" title="Witwen - CSS-Tricks" rel="bookmark">Witwen - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003088-word-break" title="Wortumbruch - CSS-Tricks" rel="bookmark">Wortumbruch - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003089-writing-mode" title="Schreibmodus - CSS-Tricks" rel="bookmark">Schreibmodus - CSS-Tricks</a></h3> </div> </div> </li> </ul> </div> </div> </div> <p>© Copyright de.css-code.org, 2025 September | <a href="https://de.css-code.org/about-site" title="Über Site">Über Site</a> | <a href="https://de.css-code.org/contacts" title="Kontakte">Kontakte</a> | <a href="https://de.css-code.org/privacy-policy" title="Datenschutz-Bestimmungen">Datenschutz-Bestimmungen</a>. </p> </div> </div> </footer> <link href="https://css-code.org/template/css/style.min.css" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" /> </body> </html>