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="/8222654-accessibility-testing-tutorial-what-is-tools-and-examples" title="Tutorial zum Testen der Barrierefreiheit: Was ist, Tools & Beispiele" rel="bookmark"><img src="https://cdn.css-code.org/2710224/accessibility_testing_tutorial_what_is-_tools_ampamp_examples.jpg.webp" loading="lazy" alt="Tutorial zum Testen der Barrierefreiheit: Was ist, Tools & Beispiele" title="Tutorial zum Testen der Barrierefreiheit: Was ist, Tools & Beispiele" 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="/8222654-accessibility-testing-tutorial-what-is-tools-and-examples" title="Tutorial zum Testen der Barrierefreiheit: Was ist, Tools & Beispiele" rel="bookmark">Tutorial zum Testen der Barrierefreiheit: Was ist, Tools & Beispiele 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="/8222655-penetration-testing-tutorial-what-is-pentest" title="Penetrationstest-Tutorial: Was ist PenTest?" rel="bookmark"><img src="https://cdn.css-code.org/6261102/penetration_testing_tutorial_what_is_pentest_.png.webp" loading="lazy" alt="Penetrationstest-Tutorial: Was ist PenTest?" title="Penetrationstest-Tutorial: Was ist PenTest?" 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="/8222655-penetration-testing-tutorial-what-is-pentest" title="Penetrationstest-Tutorial: Was ist PenTest?" rel="bookmark">Penetrationstest-Tutorial: Was ist PenTest? 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="/8222656-what-is-system-integration-testing-sit-with-example" title="Was ist System Integration Testing (SIT) mit Beispiel" rel="bookmark"><img src="https://cdn.css-code.org/3999760/what_is_system_integration_testing_sit_with_example.png.webp" loading="lazy" alt="Was ist System Integration Testing (SIT) mit Beispiel" title="Was ist System Integration Testing (SIT) 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="/8222656-what-is-system-integration-testing-sit-with-example" title="Was ist System Integration Testing (SIT) mit Beispiel" rel="bookmark">Was ist System Integration Testing (SIT) 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="/8224606-codeigniter-routes-learn-with-example" title="CodeIgniter-Routen: Lernen Sie mit Beispiel" rel="bookmark">CodeIgniter-Routen: Lernen Sie 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="/8224607-codeigniter-form-and-form-validation-with-example" title="CodeIgniter Form & Formularvalidierung mit Beispiel" rel="bookmark">CodeIgniter Form & Formularvalidierung 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="/8224608-codeigniter-active-record-insert-select-update-delete" title="Codeigniter Active Record: Einfügen, Auswählen, Aktualisieren, Löschen" rel="bookmark">Codeigniter Active Record: Einfügen, Auswählen, Aktualisieren, Löschen</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="/8224609-codeigniter-database-tutorial-create-update-delete" title="CodeIgniter-Datenbank-Tutorial: Erstellen, Aktualisieren, Löschen" rel="bookmark">CodeIgniter-Datenbank-Tutorial: Erstellen, Aktualisieren, Löschen</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="/8224610-how-to-set-session-in-codeigniter-with-example" title="So legen Sie die Sitzung im Codeigniter anhand eines Beispiels fest" rel="bookmark">So legen Sie die Sitzung im Codeigniter anhand eines Beispiels fest</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="/8224611-how-to-upload-image-and-file-in-codeigniter-with-example" title="Hochladen von Bildern & Datei in CodeIgniter (mit Beispiel)" rel="bookmark">Hochladen von Bildern & Datei in CodeIgniter (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="/8224612-pagination-in-codeigniter-with-step-by-step-example" title="Paginierung im Codeigniter mit Schritt-für-Schritt-Beispiel" rel="bookmark">Paginierung im Codeigniter mit Schritt-für-Schritt-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="/8224613-how-to-send-email-using-codeigniter" title="So senden Sie E-Mails mit CodeIgniter" rel="bookmark">So senden Sie E-Mails mit CodeIgniter</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="/8224614-difference-between-cookie-and-session" title="Unterschied zwischen Cookie und Sitzung" rel="bookmark">Unterschied zwischen Cookie und Sitzung</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="/8224615-laravel-vs-codeigniter-which-is-better" title="Laravel vs CodeIgniter: Was ist besser?" rel="bookmark">Laravel vs CodeIgniter: Was ist besser?</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="/8224616-codeigniter-tutorial-pdf-book-for-beginners-download-now" title="Codeigniter Tutorial PDF: Buch für Anfänger (Jetzt herunterladen)" rel="bookmark">Codeigniter Tutorial PDF: Buch für Anfänger (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="/8224617-relational-data-model-in-dbms-concepts-constraints-example" title="Relationales Datenmodell in DBMS: Konzepte, Einschränkungen, Beispiel" rel="bookmark">Relationales Datenmodell in DBMS: Konzepte, Einschränkungen, 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="/8224618-database-architecture-in-dbms-1-tier-2-tier-and-3-tier" title="Datenbankarchitektur in DBMS: 1-Tier, 2-Tier und 3-Tier" rel="bookmark">Datenbankarchitektur in DBMS: 1-Tier, 2-Tier und 3-Tier</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="/8224619-dbms-schemas-internal-conceptual-external" title="DBMS-Schemata: intern, konzeptionell, extern" rel="bookmark">DBMS-Schemata: intern, konzeptionell, extern</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="/8224620-relational-algebra-in-dbms-operations-with-examples" title="Relationale Algebra in DBMS: Operationen mit Beispielen" rel="bookmark">Relationale Algebra in DBMS: Operationen mit Beispielen</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="/8001126-trigger-click-on-input-when-label-is-clicked" title="Auslöser Klicken Sie auf Eingabe, wenn auf Beschriftung geklickt wird CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/7250426/trigger_click_on_input_when_label_is_clicked_css-tricks.png.webp" loading="lazy" alt="Auslöser Klicken Sie auf Eingabe, wenn auf Beschriftung geklickt wird CSS-Tricks" title="Auslöser Klicken Sie auf Eingabe, wenn auf Beschriftung geklickt wird 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="/8001126-trigger-click-on-input-when-label-is-clicked" title="Auslöser Klicken Sie auf Eingabe, wenn auf Beschriftung geklickt wird CSS-Tricks" rel="bookmark">Auslöser Klicken Sie auf Eingabe, wenn auf Beschriftung geklickt wird 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="/8002860-align-self" title="Selbst ausrichten - CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/8122876/align-self_css-tricks.png.webp" loading="lazy" alt="Selbst ausrichten - CSS-Tricks" title="Selbst ausrichten - 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="/8002860-align-self" title="Selbst ausrichten - CSS-Tricks" rel="bookmark">Selbst ausrichten - 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="/8002861-all" title="Alle - CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/8145203/all_css-tricks.png.webp" loading="lazy" alt="Alle - CSS-Tricks" title="Alle - 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="/8002861-all" title="Alle - CSS-Tricks" rel="bookmark">Alle - CSS-Tricks 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="/8226430-information-vs-knowledge-key-differences" title="Information vs Wissen: Hauptunterschiede" rel="bookmark">Information vs Wissen: Hauptunterschiede</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8226431-25-best-etl-tools-in-2021-free-and-paid" title="25 BEST ETL Tools im Jahr 2021 (kostenlos und kostenpflichtig)" rel="bookmark">25 BEST ETL Tools im Jahr 2021 (kostenlos und kostenpflichtig)</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8226432-5-best-etl-automation-testing-tools-in-2021" title="5 besten ETL-Automatisierungstestwerkzeuge im Jahr 2021" rel="bookmark">5 besten ETL-Automatisierungstestwerkzeuge im Jahr 2021</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8226433-25-best-data-mining-tools-in-2021" title="25 BEST Data Mining Tools im Jahr 2021" rel="bookmark">25 BEST Data Mining Tools im Jahr 2021</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8226435-20-best-data-modeling-tools-design-your-database-for-free" title="20 BEST Data Modeling Tools: Entwerfen Sie Ihre Datenbank KOSTENLOS" rel="bookmark">20 BEST Data Modeling Tools: Entwerfen Sie Ihre Datenbank KOSTENLOS</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="/8224968-mysql-subquery-tutorial-with-examples" title="MySQL SubQuery Tutorial mit Beispielen" rel="bookmark">MySQL SubQuery Tutorial mit Beispielen</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8224969-mysql-limit-and-offset-with-examples" title="MySQL LIMIT & OFFSET mit Beispielen" rel="bookmark">MySQL LIMIT & OFFSET mit Beispielen</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8224971-top-40-computer-science-interview-questions-and-answers" title="Top 40 Fragen und Antworten zum Vorstellungsgespräch in der Informatik" rel="bookmark">Top 40 Fragen und Antworten zum Vorstellungsgespräch in der Informatik</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8224972-difference-between-call-by-value-and-call-by-reference" title="Unterschied zwischen Call by Value und Call by Reference" rel="bookmark">Unterschied zwischen Call by Value und Call by Reference</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8224973-r-select-filter-arrange-pipeline-with-example" title="R Wählen Sie (), Filter (), Arrange (), Pipeline mit Beispiel" rel="bookmark">R Wählen Sie (), Filter (), Arrange (), Pipeline mit Beispiel</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="/8225788-16-best-password-managers-for-mac-freepaid" title="16 BEST Password Manager für MAC (kostenlos / bezahlt)" rel="bookmark">16 BEST Password Manager für MAC (kostenlos / bezahlt)</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225789-15-best-virtual-mailbox-and-business-address-service-2021" title="15 BESTE virtuelle Mailbox & Geschäftsadressendienst (2021)" rel="bookmark">15 BESTE virtuelle Mailbox & Geschäftsadressendienst (2021)</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225790-15-best-free-online-survey-tools-and-software-2021-update" title="15 besten KOSTENLOSEN Online-Umfragetools und Software (Update 2021)" rel="bookmark">15 besten KOSTENLOSEN Online-Umfragetools und Software (Update 2021)</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225791-difference-between-information-and-data" title="Unterschied zwischen Informationen und Daten" rel="bookmark">Unterschied zwischen Informationen und Daten</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225793-15-best-online-cloud-backup-solutions-for-small-business" title="15 BESTE Online-Cloud-Backup-Lösungen für kleine Unternehmen" rel="bookmark">15 BESTE Online-Cloud-Backup-Lösungen für kleine Unternehmen</a></h3> </div> </div> </li> </ul> </div> </div> </div> <p>© Copyright de.css-code.org, 2025 Juni | <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>