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="/8225168-python-file-handling-how-to-create-open-append-read-write" title="Handhabung von Python-Dateien: Erstellen, Öffnen, Anhängen, Lesen, Schreiben" rel="bookmark"><img src="https://cdn.css-code.org/7015330/python_file_handling_how_to_create-_open-_append-_read-_write.png.webp" loading="lazy" alt="Handhabung von Python-Dateien: Erstellen, Öffnen, Anhängen, Lesen, Schreiben" title="Handhabung von Python-Dateien: Erstellen, Öffnen, Anhängen, Lesen, Schreiben" 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="/8225168-python-file-handling-how-to-create-open-append-read-write" title="Handhabung von Python-Dateien: Erstellen, Öffnen, Anhängen, Lesen, Schreiben" rel="bookmark">Handhabung von Python-Dateien: Erstellen, Öffnen, Anhängen, Lesen, Schreiben 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="/8225169-python-rename-file-and-directory-using-os-rename" title="Python Datei und Verzeichnis mit os.rename () umbenennen" rel="bookmark"><img src="https://cdn.css-code.org/6138576/python_rename_file_and_directory_using_osrename.png.webp" loading="lazy" alt="Python Datei und Verzeichnis mit os.rename () umbenennen" title="Python Datei und Verzeichnis mit os.rename () umbenennen" 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="/8225169-python-rename-file-and-directory-using-os-rename" title="Python Datei und Verzeichnis mit os.rename () umbenennen" rel="bookmark">Python Datei und Verzeichnis mit os.rename () umbenennen 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="/8225170-python-zip-file-with-example" title="Python-ZIP-Datei mit Beispiel" rel="bookmark"><img src="https://cdn.css-code.org/4452092/python_zip_file_with_example.png.webp" loading="lazy" alt="Python-ZIP-Datei mit Beispiel" title="Python-ZIP-Datei 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="/8225170-python-zip-file-with-example" title="Python-ZIP-Datei mit Beispiel" rel="bookmark">Python-ZIP-Datei mit Beispiel 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="/8004231-185-playing-with-css-masks" title="# 185: Spielen mit CSS-Masken - CSS-Tricks" rel="bookmark"># 185: Spielen mit CSS-Masken - CSS-Tricks</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="/8004232-18-introduction-to-the-band-website-template" title="# 18: Einführung in die Band-Website-Vorlage - CSS-Tricks" rel="bookmark"># 18: Einführung in die Band-Website-Vorlage - CSS-Tricks</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="/8004233-184-inside-and-aligned-lists" title="# 184: Inside & Aligned Lists - CSS-Tricks" rel="bookmark"># 184: Inside & Aligned Lists - CSS-Tricks</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="/8004235-187-notion-for-team-meetings-and-documentation" title="# 187: Begriff für Teambesprechungen & Dokumentation - CSS-Tricks" rel="bookmark"># 187: Begriff für Teambesprechungen & Dokumentation - CSS-Tricks</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="/8004236-189-notion-for-personal-and-public-use" title="# 189: Begriff für den persönlichen und öffentlichen Gebrauch - CSS-Tricks" rel="bookmark"># 189: Begriff für den persönlichen und öffentlichen Gebrauch - CSS-Tricks</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="/8004237-188-exploring-the-overlapping-header-pattern" title="# 188: Erkunden des überlappenden Header-Musters - CSS-Tricks" rel="bookmark"># 188: Erkunden des überlappenden Header-Musters - CSS-Tricks</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="/8004238-169-how-to-think-like-a-front-end-developer" title="# 169: Wie man wie ein Front-End-Entwickler denkt - CSS-Tricks" rel="bookmark"># 169: Wie man wie ein Front-End-Entwickler denkt - CSS-Tricks</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="/8004239-192-git-tricks-for-getting-yourself-out-of-trouble" title="# 192: Git-Tricks, um Probleme zu lösen - CSS-Tricks" rel="bookmark"># 192: Git-Tricks, um Probleme zu lösen - CSS-Tricks</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="/8004240-193-scully-the-ssg-for-angular" title="# 193: Scully: die SSG für Angular - CSS-Tricks" rel="bookmark"># 193: Scully: die SSG für Angular - CSS-Tricks</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="/8004241-195-how-to-draw-a-line-with-css" title="# 195: Zeichnen einer Linie mit CSS - CSS-Tricks" rel="bookmark"># 195: Zeichnen einer Linie mit CSS - CSS-Tricks</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="/8004242-178-percy-catches-visual-changes-in-any-workflow" title="# 178: Percy fängt visuelle Änderungen in jedem Workflow ab - CSS-Tricks" rel="bookmark"># 178: Percy fängt visuelle Änderungen in jedem Workflow ab - CSS-Tricks</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="/8004243-19-designing-a-unique-page-for-twitter-updates" title="# 19: Entwerfen einer einzigartigen Seite für Twitter-Updates - CSS-Tricks" rel="bookmark"># 19: Entwerfen einer einzigartigen Seite für Twitter-Updates - CSS-Tricks</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="/8004244-198-about-the-position-property" title="# 198: Über die Positionseigenschaft - CSS-Tricks" rel="bookmark"># 198: Über die Positionseigenschaft - CSS-Tricks</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="/8004245-197-a-look-at-stackbit-and-stackbit-studio" title="# 197: Ein Blick auf Stackbit und Stackbit Studio - CSS-Tricks" rel="bookmark"># 197: Ein Blick auf Stackbit und Stackbit Studio - CSS-Tricks</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="/8004246-196-learning-grid-and-flexbox-with-kyle-simpson" title="# 196: Lernen von Grid & Flexbox mit Kyle Simpson - CSS-Tricks" rel="bookmark"># 196: Lernen von Grid & Flexbox mit Kyle Simpson - CSS-Tricks</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="/8223894-how-to-create-customer-account-group-in-sap" title="So erstellen Sie eine Kundenkontengruppe in SAP" rel="bookmark"><img src="https://cdn.css-code.org/3369533/how_to_create_customer_account_group_in_sap.png.webp" loading="lazy" alt="So erstellen Sie eine Kundenkontengruppe in SAP" title="So erstellen Sie eine Kundenkontengruppe in SAP" 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="/8223894-how-to-create-customer-account-group-in-sap" title="So erstellen Sie eine Kundenkontengruppe in SAP" rel="bookmark">So erstellen Sie eine Kundenkontengruppe in SAP 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="/8223895-customer-master-data-tutorial-create-display-block-delete-in-sap" title="Kundenstammdaten-Tutorial: Erstellen, Anzeigen, Sperren, Löschen in SAP" rel="bookmark"><img src="https://cdn.css-code.org/5955476/customer_master_data_tutorial_create-_display-_block-_delete_in_sap.png.webp" loading="lazy" alt="Kundenstammdaten-Tutorial: Erstellen, Anzeigen, Sperren, Löschen in SAP" title="Kundenstammdaten-Tutorial: Erstellen, Anzeigen, Sperren, Löschen in SAP" 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="/8223895-customer-master-data-tutorial-create-display-block-delete-in-sap" title="Kundenstammdaten-Tutorial: Erstellen, Anzeigen, Sperren, Löschen in SAP" rel="bookmark">Kundenstammdaten-Tutorial: Erstellen, Anzeigen, Sperren, Löschen in SAP 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="/8223896-accounts-receivable-in-sap-fi" title="Debitorenbuchhaltung in SAP FI" rel="bookmark"><img src="https://cdn.css-code.org/7223878/accounts_receivable_in_sap_fi.png.webp" loading="lazy" alt="Debitorenbuchhaltung in SAP FI" title="Debitorenbuchhaltung in SAP FI" 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="/8223896-accounts-receivable-in-sap-fi" title="Debitorenbuchhaltung in SAP FI" rel="bookmark">Debitorenbuchhaltung in SAP FI 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="/8225627-vb-net-data-types-and-variable-declaration-with-dim" title="VB.Net-Datentypen und Variablendeklaration mit DIM" rel="bookmark">VB.Net-Datentypen und Variablendeklaration mit DIM</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225628-for-each-next-exit-continue-statement-in-vb-net-with-example" title="Für jedes ... Weiter, Beenden, Fortsetzung der Anweisung in VB.net mit BEISPIEL" rel="bookmark">Für jedes ... Weiter, Beenden, Fortsetzung der Anweisung in VB.net mit BEISPIEL</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225629-select-case-statement-in-vb-net-with-example" title="Wählen Sie ... Case Statement in VB.Net mit Beispiel" rel="bookmark">Wählen Sie ... Case Statement in VB.Net mit Beispiel</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225630-vb-net-combobox-control-with-example" title="VB.Net ComboBox Control mit BEISPIEL" rel="bookmark">VB.Net ComboBox Control mit BEISPIEL</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225631-try-catch-finally-throws-user-defined-exception-in-vb-net" title="Versuchen Sie ... Catch ... Schließlich wird eine benutzerdefinierte Ausnahme in VB.Net ausgelöst" rel="bookmark">Versuchen Sie ... Catch ... Schließlich wird eine benutzerdefinierte Ausnahme in VB.Net ausgelöst</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="/8003774-test-if-dragenterdragover-event-contains-files" title="Testen Sie, ob das Dragenter / Dragover-Ereignis Dateien enthält CSS-Tricks" rel="bookmark">Testen Sie, ob das Dragenter / Dragover-Ereignis Dateien enthält CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003775-strip-html-tags-in-javascript" title="HTML-Tags in JavaScript entfernen - CSS-Tricks" rel="bookmark">HTML-Tags in JavaScript entfernen - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003776-strip-whitespace-from-string" title="Leerzeichen von String entfernen - CSS-Tricks" rel="bookmark">Leerzeichen von String entfernen - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003777-support-tabs-in-textareas" title="Unterstützungsregisterkarten in Textbereichen - CSS-Tricks" rel="bookmark">Unterstützungsregisterkarten in Textbereichen - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003778-test-if-element-supports-attribute" title="Testen Sie, ob das Element das Attribut - unterstützt CSS-Tricks" rel="bookmark">Testen Sie, ob das Element das Attribut - unterstützt CSS-Tricks</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="/8225913-ethical-hacking-pdf-download-free-tutorial-course" title="Ethical Hacking PDF: Laden Sie den kostenlosen Tutorial-Kurs herunter" rel="bookmark">Ethical Hacking PDF: Laden Sie den kostenlosen Tutorial-Kurs herunter</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225914-excel-data-validation-filters-grouping" title="Excel-Datenüberprüfung, Filter, Gruppierung" rel="bookmark">Excel-Datenüberprüfung, Filter, Gruppierung</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225915-how-to-create-charts-in-excel-types-and-examples" title="So erstellen Sie Diagramme in Excel: Typen & Beispiele" rel="bookmark">So erstellen Sie Diagramme in Excel: Typen & Beispiele</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225916-excel-formulas-and-functions-learn-with-basic-examples" title="Excel-Formeln & Funktionen: Lernen Sie mit grundlegenden BEISPIELEN" rel="bookmark">Excel-Formeln & Funktionen: Lernen Sie mit grundlegenden BEISPIELEN</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225917-if-and-or-nested-if-and-not-logical-functions-in-excel" title="IF, AND, OR, Nested IF & NICHT logische Funktionen in Excel" rel="bookmark">IF, AND, OR, Nested IF & NICHT logische Funktionen in Excel</a></h3> </div> </div> </li> </ul> </div> </div> </div> <p>© Copyright de.css-code.org, 2025 April | <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>