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="/8224740-jsp-elements-jsp-declaration-jsp-syntax-jsp-expression-jsp-comments" title="JSP-Elemente - JSP-Deklaration, JSP-Syntax, JSP-Ausdruck, JSP-Kommentare" rel="bookmark"><img src="https://cdn.css-code.org/3591710/jsp_elements_-_jsp_declaration-_jsp_syntax-_jsp_expression-_jsp_comments.png.webp" loading="lazy" alt="JSP-Elemente - JSP-Deklaration, JSP-Syntax, JSP-Ausdruck, JSP-Kommentare" title="JSP-Elemente - JSP-Deklaration, JSP-Syntax, JSP-Ausdruck, JSP-Kommentare" 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="/8224740-jsp-elements-jsp-declaration-jsp-syntax-jsp-expression-jsp-comments" title="JSP-Elemente - JSP-Deklaration, JSP-Syntax, JSP-Ausdruck, JSP-Kommentare" rel="bookmark">JSP-Elemente - JSP-Deklaration, JSP-Syntax, JSP-Ausdruck, JSP-Kommentare 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="/8224741-jsp-directives-page-include-and-taglib-tutorial" title="JSP-Richtlinien: Page, Include & Taglib Tutorial" rel="bookmark"><img src="https://cdn.css-code.org/6045755/jsp_directives_page-_include_ampamp_taglib_tutorial.png.webp" loading="lazy" alt="JSP-Richtlinien: Page, Include & Taglib Tutorial" title="JSP-Richtlinien: Page, Include & Taglib Tutorial" 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="/8224741-jsp-directives-page-include-and-taglib-tutorial" title="JSP-Richtlinien: Page, Include & Taglib Tutorial" rel="bookmark">JSP-Richtlinien: Page, Include & Taglib Tutorial 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="/8224742-jsp-implicit-objects-complete-tutorial" title="Implizite JSP-Objekte: Vollständiges Lernprogramm" rel="bookmark"><img src="https://cdn.css-code.org/4977282/jsp_implicit_objects_complete_tutorial.png.webp" loading="lazy" alt="Implizite JSP-Objekte: Vollständiges Lernprogramm" title="Implizite JSP-Objekte: Vollständiges Lernprogramm" 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="/8224742-jsp-implicit-objects-complete-tutorial" title="Implizite JSP-Objekte: Vollständiges Lernprogramm" rel="bookmark">Implizite JSP-Objekte: Vollständiges Lernprogramm 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="/8002915-direction" title="Richtung - CSS-Tricks" rel="bookmark">Richtung - 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="/8002916-contain" title="Enthalten - CSS-Tricks" rel="bookmark">Enthalten - 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="/8002917-cursor" title="Cursor - CSS-Tricks" rel="bookmark">Cursor - 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="/8002918-flex" title="Flex - CSS-Tricks" rel="bookmark">Flex - 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="/8002919-empty-cells" title="Leere Zellen - CSS-Tricks" rel="bookmark">Leere Zellen - 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="/8002921-fill" title="Füllen - CSS-Tricks" rel="bookmark">Füllen - 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="/8002922-flex-basis" title="Flex-Basis - CSS-Tricks" rel="bookmark">Flex-Basis - 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="/8002924-counter-set" title="Gegensatz - CSS-Tricks" rel="bookmark">Gegensatz - 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="/8002925-flex-flow" title="Flex-flow - CSS-Tricks" rel="bookmark">Flex-flow - 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="/8002926-flex-grow" title="Flex-grow - CSS-Tricks" rel="bookmark">Flex-grow - 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="/8002927-flex-direction" title="Flex-Richtung - CSS-Tricks" rel="bookmark">Flex-Richtung - 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="/8002928-flex-shrink" title="Flex-Shrink - CSS-Tricks" rel="bookmark">Flex-Shrink - 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="/8002929-filter" title="Filter - CSS-Tricks" rel="bookmark">Filter - 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="/8002930-display" title="Anzeige - CSS-Tricks" rel="bookmark">Anzeige - 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="/8002931-flex-wrap" title="Flex-Wrap - CSS-Tricks" rel="bookmark">Flex-Wrap - 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="/8226194-14-best-latex-editor-in-2021-windows-mac" title="14 BESTER LaTeX-Editor im Jahr 2021 (Windows, Mac)" rel="bookmark"><img src="https://cdn.css-code.org/7854680/14_best_latex_editor_in_2021_windows-_mac.png.webp" loading="lazy" alt="14 BESTER LaTeX-Editor im Jahr 2021 (Windows, Mac)" title="14 BESTER LaTeX-Editor im Jahr 2021 (Windows, Mac)" 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="/8226194-14-best-latex-editor-in-2021-windows-mac" title="14 BESTER LaTeX-Editor im Jahr 2021 (Windows, Mac)" rel="bookmark">14 BESTER LaTeX-Editor im Jahr 2021 (Windows, Mac) 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="/8226195-10-best-notepad-alternatives-for-windows-mac-linux-2021" title="10 besten Notepad ++ - Alternativen für Windows, Mac, Linux (2021)" rel="bookmark"><img src="https://cdn.css-code.org/2443041/10_best_notepad_alternatives_for_windows-_mac-_linux_2021.png.webp" loading="lazy" alt="10 besten Notepad ++ - Alternativen für Windows, Mac, Linux (2021)" title="10 besten Notepad ++ - Alternativen für Windows, Mac, Linux (2021)" 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="/8226195-10-best-notepad-alternatives-for-windows-mac-linux-2021" title="10 besten Notepad ++ - Alternativen für Windows, Mac, Linux (2021)" rel="bookmark">10 besten Notepad ++ - Alternativen für Windows, Mac, Linux (2021) 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="/8226196-11-best-fiverr-alternatives-in-2021" title="11 BEST Fiverr Alternatives im Jahr 2021" rel="bookmark"><img src="https://cdn.css-code.org/8829676/11_best_fiverr_alternatives_in_2021.png.webp" loading="lazy" alt="11 BEST Fiverr Alternatives im Jahr 2021" title="11 BEST Fiverr Alternatives im Jahr 2021" 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="/8226196-11-best-fiverr-alternatives-in-2021" title="11 BEST Fiverr Alternatives im Jahr 2021" rel="bookmark">11 BEST Fiverr Alternatives im Jahr 2021 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="/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</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <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</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <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</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8223897-how-to-create-one-time-customer-fd01-in-sap" title="So erstellen Sie einen einmaligen Kunden FD01 in SAP" rel="bookmark">So erstellen Sie einen einmaligen Kunden FD01 in SAP</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8223898-how-to-create-customer-sales-invoice-fb70-in-sap-fico" title="So erstellen Sie eine Kundenverkaufsrechnung FB70 in SAP FICO" rel="bookmark">So erstellen Sie eine Kundenverkaufsrechnung FB70 in SAP FICO</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="/8003518-font-stacks" title="Schriftstapel - CSS-Tricks" rel="bookmark">Schriftstapel - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003519-force-webkits-file-upload-input-button-to-the-right" title="Erzwingen Sie die Eingabe-Schaltfläche zum Hochladen von Dateien von WebKit nach rechts - CSS-Tricks" rel="bookmark">Erzwingen Sie die Eingabe-Schaltfläche zum Hochladen von Dateien von WebKit nach rechts - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003520-forcing-grayscale-printing" title="Graustufendruck erzwingen - CSS-Tricks" rel="bookmark">Graustufendruck erzwingen - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003521-force-vertical-scrollbar" title="Vertikale Bildlaufleiste erzwingen - CSS-Tricks" rel="bookmark">Vertikale Bildlaufleiste erzwingen - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003522-give-clickable-elements-a-pointer-cursor" title="Geben Sie anklickbaren Elementen einen Zeigercursor - CSS-Tricks" rel="bookmark">Geben Sie anklickbaren Elementen einen Zeigercursor - 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="/8003387-110-photoshopping-comment-thread" title="# 110: Photoshopping-Kommentarthread - CSS-Tricks" rel="bookmark"># 110: Photoshopping-Kommentarthread - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003388-111-building-comment-thread" title="# 111: Kommentarthread erstellen - CSS-Tricks" rel="bookmark"># 111: Kommentarthread erstellen - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003389-112-building-comments-thread-wrapup" title="# 112: Erstellen von Kommentaren Thread Wrapup - CSS-Tricks" rel="bookmark"># 112: Erstellen von Kommentaren Thread Wrapup - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003390-113-photoshopping-comment-form" title="# 113: Photoshopping-Kommentarformular - CSS-Tricks" rel="bookmark"># 113: Photoshopping-Kommentarformular - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003391-109-preparing-for-working-on-comments" title="# 109: Vorbereiten der Bearbeitung von Kommentaren - CSS-Tricks" rel="bookmark"># 109: Vorbereiten der Bearbeitung von Kommentaren - CSS-Tricks</a></h3> </div> </div> </li> </ul> </div> </div> </div> <p>© Copyright de.css-code.org, 2025 August | <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>