¿Qué es el DOM? El significado del Modelo de Objeto de Documento en JavaScript
El Document Object Model (DOM) es una interfaz de programación que permite a los desarrolladores interactuar con las páginas web. Es un árbol de nodos que representa la estructura de un documento HTML, donde cada nodo representa un elemento, atributo o texto. El DOM está diseñado para que las aplicaciones puedan acceder y actualizar dinámicamente el contenido, estructura y estilo de un documento. Esta capacidad es esencial para crear sitios web dinámicos e interactivos que responden a las acciones del usuario.
En esencia, el DOM proporciona una manera de «ver» y «manipular» el código HTML de un documento web como si fuera un objeto. Esto permite que JavaScript acceda a la estructura de la página, modifique el contenido y el estilo de los elementos, y responda a las acciones del usuario en tiempo real.
¿Qué significa DOM?
La abreviatura «DOM» significa Document Object Model, que en español se traduce como Modelo de Objeto de Documento.
El DOM como un Árbol
La mejor manera de entender el DOM es visualizarlo como un árbol. La raíz de este árbol es el nodo , y cada rama representa un elemento, atributo o texto dentro del documento.
Por ejemplo, si una página HTML tiene el siguiente código:
html
<!DOCTYPE html>
<html>
<head>
<title>Mi página web</title>
</head>
<body>
<h1>Título principal</h1>
<p>Este es un párrafo de texto.</p>
</body>
</html>
El DOM representaría este código como un árbol con los siguientes nodos:
- Raíz:
- Rama 1:
- Nodo:
</li> </ul> </li> <li><strong>Rama 2:</strong> <body> <ul> <li><strong>Nodo:</strong><br /> <h1></li> <li><strong>Nodo:</strong> </li> </ul> </li> </ul> <h2><strong>Manipulación del DOM con JavaScript</strong></h2> <p>JavaScript juega un papel crucial en la interacción con el <strong>DOM</strong>. A través de JavaScript, los desarrolladores pueden:</p> <h3><strong>Seleccionar Elementos</strong></h3> <p>El primer paso para manipular el <strong>DOM</strong> es seleccionar los elementos específicos que queremos modificar. JavaScript ofrece varias formas de hacerlo:</p> <ul> <li><strong>getElementById:</strong> Selecciona un elemento por su ID único. Por ejemplo, <code>document.getElementById("myElement")</code>.</li> <li><strong>querySelector:</strong> Selecciona el primer elemento que coincida con el selector CSS proporcionado. Por ejemplo, <code>document.querySelector(".myClass")</code>.</li> <li><strong>querySelectorAll:</strong> Selecciona todos los elementos que coincidan con el selector CSS proporcionado. Por ejemplo, <code>document.querySelectorAll("p")</code>.</li> </ul> <h3><strong>Agregar Nuevos Elementos</strong></h3> <p>JavaScript permite crear nuevos elementos HTML y agregarlos al documento:</p> <ul> <li><strong>createElement:</strong> Crea un nuevo elemento HTML. Por ejemplo, <code>document.createElement("p")</code>.</li> <li><strong>appendChild:</strong> Agrega un nuevo elemento como hijo de otro elemento existente. Por ejemplo, <code>document.body.appendChild(newParagraph)</code>.</li> </ul> <h3><strong>Cambiar Estilos</strong></h3> <p>El <strong>DOM</strong> permite modificar el estilo de los elementos HTML:</p> <ul> <li><strong>style:</strong> La propiedad <code>style</code> permite modificar estilos CSS en línea. Por ejemplo, <code>document.getElementById("myElement").style.color = "blue";</code>.</li> </ul> <h3><strong>Escuchar Eventos</strong></h3> <p>Los eventos son acciones que ocurren en un documento web, como clics en botones, carga de la página, etc. JavaScript permite agregar funciones que se ejecutan cuando ocurren estos eventos:</p> <ul> <li><strong>addEventListener:</strong> Agrega una función que se ejecuta cuando ocurre un evento específico. Por ejemplo, <code>document.getElementById("myButton").addEventListener("click", function() { alert("¡Hiciste clic!"); });</code>.</li> </ul> <h2><strong>Ejemplos de Código</strong></h2> <p>Estos ejemplos de código ilustran cómo manipular el <strong>DOM</strong> con JavaScript:</p> <p><strong>Ejemplo 1: Creación de una Lista</strong></p> <p>«`javascript<br /> // Crear un elemento de lista<br /> const newListItem = document.createElement(«li»);</p> <p>// Agregar texto al elemento de lista<br /> newListItem.textContent = «Nuevo elemento»;</p> <p>// Obtener la lista existente<br /> const myList = document.getElementById(«myList»);</p> <p>// Agregar el nuevo elemento a la lista<br /> myList.appendChild(newListItem);<br /> «`</p> <p><strong>Ejemplo 2: Cambio de Color de Texto</strong></p> <p>«`javascript<br /> // Seleccionar el párrafo<br /> const myParagraph = document.getElementById(«myParagraph»);</p> <p>// Cambiar el color del texto<br /> myParagraph.style.color = «red»;<br /> «`</p> <p><strong>Ejemplo 3: Activación de Alertas al Hacer Clic</strong></p> <p>«`javascript<br /> // Seleccionar el botón<br /> const myButton = document.getElementById(«myButton»);</p> <p>// Agregar un listener al evento «click»<br /> myButton.addEventListener(«click», function() {<br /> alert(«¡Hiciste clic en el botón!»);<br /> });<br /> «`</p> <h2><strong>Importancia del DOM en el Desarrollo Web</strong></h2> <p>El <strong>DOM</strong> es fundamental para el desarrollo web moderno. Permite crear sitios web dinámicos e interactivos que responden a las acciones del usuario, mejorando la experiencia del usuario. </p> <h2><strong>Consideraciones Importantes</strong></h2> <ul> <li><strong>Rendimiento:</strong> El acceso y la manipulación del <strong>DOM</strong> pueden afectar el rendimiento de la página. Es importante optimizar el código para evitar operaciones intensivas de <strong>DOM</strong>.</li> <li><strong>Seguridad:</strong> Los ataques de secuencias de comandos entre sitios (XSS) pueden explotar las vulnerabilidades del <strong>DOM</strong>. Es esencial implementar medidas de seguridad para proteger las aplicaciones web.</li> </ul> <h2><strong>Conclusión</strong></h2> <p>El <strong>Document Object Model</strong> es una herramienta esencial para los desarrolladores web que desean crear sitios web interactivos y dinámicos. Comprender cómo funciona el <strong>DOM</strong> y cómo interactuar con él a través de JavaScript es fundamental para crear experiencias web atractivas y eficientes.</p> <div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://reactivelinux.com/if-matlab/" target="_blank" rel="dofollow" class="u4bdf8f04e321e7067bb4334e379c51ba"><!-- INLINE RELATED POSTS 1/3 //--><style> .u4bdf8f04e321e7067bb4334e379c51ba { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#eaeaea; border:0!important; border-left:4px solid #34495E!important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); text-decoration:none; } .u4bdf8f04e321e7067bb4334e379c51ba:active, .u4bdf8f04e321e7067bb4334e379c51ba:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .u4bdf8f04e321e7067bb4334e379c51ba { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .u4bdf8f04e321e7067bb4334e379c51ba .ctaText { font-weight:bold; color:#464646; text-decoration:none; font-size: 16px; } .u4bdf8f04e321e7067bb4334e379c51ba .postTitle { color:#000000; text-decoration: underline!important; font-size: 16px; } .u4bdf8f04e321e7067bb4334e379c51ba:hover .postTitle { text-decoration: underline!important; } </style><div style="padding-left:1em; padding-right:1em;"><span class="ctaText">LEER:</span> <span class="postTitle">If Else en MATLAB: Guía Completa con Ejemplos</span></div></a></div> <div class="clearfix mb-3"></div> <nav class="navigation post-navigation" aria-label="Entradas"> <h2 class="screen-reader-text">Navegación de entradas</h2> <div class="nav-links"><div class="nav-previous"><a href="https://reactivelinux.com/unity-learn/" rel="prev"><div class="fa fa-angle-double-left"></div><span></span> Unity Learn: Crea tus propios juegos 2D y 3D con Unity </a></div><div class="nav-next"><a href="https://reactivelinux.com/latex-table/" rel="next"> Tablas LaTeX: Guía Completa para Crear Tablas Profesionales <div class="fa fa-angle-double-right"></div><span></span></a></div></div> </nav> </article> </div> <div class="py-4 px-3 mb-4 bs-card-box bs-single-related"> <!--Start bs-realated-slider --> <div class="bs-widget-title mb-3"> <!-- bs-sec-title --> <h4 class="title">Podría interesarte</h4> </div> <!-- // bs-sec-title --> <div class="related-post"> <div class="row"> <!-- featured_post --> <!-- blog --> <div class="col-md-4"> <div class="bs-blog-post three md back-img bshre mb-md-0" > <a class="link-div" href="https://reactivelinux.com/italic-html/"></a> <div class="inner"> <div class="bs-blog-category"> <div class="bs-blog-category"><a class="blogarise-categories category-color-1" href="https://reactivelinux.com/category/desarrollo/" alt="Ver todas las entradas en Desarrollo"> Desarrollo </a></div> </div> <h4 class="title sm mb-0"> <a href="https://reactivelinux.com/italic-html/" title="Permalink to: HTML Cursiva: Guía Completa para Texto en Itálica"> HTML Cursiva: Guía Completa para Texto en Itálica</a> </h4> <div class="bs-blog-meta"> </div> </div> </div> </div> <!-- blog --> <!-- blog --> <div class="col-md-4"> <div class="bs-blog-post three md back-img bshre mb-md-0" > <a class="link-div" href="https://reactivelinux.com/js-operator/"></a> <div class="inner"> <div class="bs-blog-category"> <div class="bs-blog-category"><a class="blogarise-categories category-color-1" href="https://reactivelinux.com/category/desarrollo/" alt="Ver todas las entradas en Desarrollo"> Desarrollo </a></div> </div> <h4 class="title sm mb-0"> <a href="https://reactivelinux.com/js-operator/" title="Permalink to: Operadores JavaScript: Guía Completa con Ejemplos"> Operadores JavaScript: Guía Completa con Ejemplos</a> </h4> <div class="bs-blog-meta"> </div> </div> </div> </div> <!-- blog --> <!-- blog --> <div class="col-md-4"> <div class="bs-blog-post three md back-img bshre mb-md-0" > <a class="link-div" href="https://reactivelinux.com/pygame-pong/"></a> <div class="inner"> <div class="bs-blog-category"> <div class="bs-blog-category"><a class="blogarise-categories category-color-1" href="https://reactivelinux.com/category/desarrollo/" alt="Ver todas las entradas en Desarrollo"> Desarrollo </a></div> </div> <h4 class="title sm mb-0"> <a href="https://reactivelinux.com/pygame-pong/" title="Permalink to: PyGame Pong Simple: Crea tu Primer Juego en Python"> PyGame Pong Simple: Crea tu Primer Juego en Python</a> </h4> <div class="bs-blog-meta"> </div> </div> </div> </div> <!-- blog --> </div> </div> </div> <!--End bs-realated-slider --> </div> </div> <!--/row--> </div> <!--/container--> </main> <!--==================== Missed ====================--> <div class="missed"> <div class="container"> <div class="row"> <div class="col-12"> <div class="wd-back"> <div class="bs-widget-title"> <h2 class="title">Te has perdido</h2> </div> <div class="missed-area"> <div class="bs-blog-post three md back-img bshre mb-0" "> <a class="link-div" href="https://reactivelinux.com/italic-html/"></a> <div class="inner"> <div class="bs-blog-category"><a class="blogarise-categories category-color-1" href="https://reactivelinux.com/category/desarrollo/" alt="Ver todas las entradas en Desarrollo"> Desarrollo </a></div> <h4 class="title sm mb-0"> <a href="https://reactivelinux.com/italic-html/" title="Permalink to: HTML Cursiva: Guía Completa para Texto en Itálica"> HTML Cursiva: Guía Completa para Texto en Itálica</a> </h4> </div> </div> <div class="bs-blog-post three md back-img bshre mb-0" "> <a class="link-div" href="https://reactivelinux.com/js-operator/"></a> <div class="inner"> <div class="bs-blog-category"><a class="blogarise-categories category-color-1" href="https://reactivelinux.com/category/desarrollo/" alt="Ver todas las entradas en Desarrollo"> Desarrollo </a></div> <h4 class="title sm mb-0"> <a href="https://reactivelinux.com/js-operator/" title="Permalink to: Operadores JavaScript: Guía Completa con Ejemplos"> Operadores JavaScript: Guía Completa con Ejemplos</a> </h4> </div> </div> <div class="bs-blog-post three md back-img bshre mb-0" "> <a class="link-div" href="https://reactivelinux.com/pygame-pong/"></a> <div class="inner"> <div class="bs-blog-category"><a class="blogarise-categories category-color-1" href="https://reactivelinux.com/category/desarrollo/" alt="Ver todas las entradas en Desarrollo"> Desarrollo </a></div> <h4 class="title sm mb-0"> <a href="https://reactivelinux.com/pygame-pong/" title="Permalink to: PyGame Pong Simple: Crea tu Primer Juego en Python"> PyGame Pong Simple: Crea tu Primer Juego en Python</a> </h4> </div> </div> <div class="bs-blog-post three md back-img bshre mb-0" "> <a class="link-div" href="https://reactivelinux.com/sql-len/"></a> <div class="inner"> <div class="bs-blog-category"><a class="blogarise-categories category-color-1" href="https://reactivelinux.com/category/desarrollo/" alt="Ver todas las entradas en Desarrollo"> Desarrollo </a></div> <h4 class="title sm mb-0"> <a href="https://reactivelinux.com/sql-len/" title="Permalink to: Función SQL LEN(): Encuentra la longitud de cadenas de texto"> Función SQL LEN(): Encuentra la longitud de cadenas de texto</a> </h4> </div> </div> </div><!-- end inner row --> </div><!-- end wd-back --> </div><!-- end col12 --> </div><!-- end row --> </div><!-- end container --> </div> <!-- end missed --> <!--==================== FOOTER AREA ====================--> <footer > <div class="overlay" style="background-color: ;"> <!--Start bs-footer-widget-area--> <div class="bs-footer-widget-area"> <div class="container"> <div class="row"> <div id="block-8" class="col-md-12 rotateInDownLeft animated bs-widget widget_block"><ul class="wp-block-page-list"><li class="wp-block-pages-list__item"><a class="wp-block-pages-list__item__link" href="https://reactivelinux.com/contacto/">Contacto</a></li><li class="wp-block-pages-list__item"><a class="wp-block-pages-list__item__link" href="https://reactivelinux.com/politica-de-cookies/">Política de cookies</a></li><li class="wp-block-pages-list__item"><a class="wp-block-pages-list__item__link" href="https://reactivelinux.com/politica-de-privacidad/">Política de privacidad</a></li><li class="wp-block-pages-list__item"><a class="wp-block-pages-list__item__link" href="https://reactivelinux.com/proposito/">Propósito</a></li><li class="wp-block-pages-list__item"><a class="wp-block-pages-list__item__link" href="https://reactivelinux.com/sobre-nosotros/">Sobre nosotros</a></li></ul></div><div id="block-9" class="col-md-12 rotateInDownLeft animated bs-widget widget_block"> <div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex"> <div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://reactivelinux.com/sitemap.xml" target="_blank" rel="noreferrer noopener">Mapa del sitio web</a></div> </div> </div> </div> <!--/row--> </div> <!--/container--> </div> <div class="bs-footer-bottom-area"> <div class="container"> <div class="divide-line"></div> <div class="row align-items-center"> <div class="col-md-6"> <div class="footer-logo"> <!-- Display the Custom Logo --> <div class="site-logo"> <a href="https://reactivelinux.com/" class="navbar-brand" rel="home"><img width="500" height="500" src="https://reactivelinux.com/wp-content/uploads/iconoh.png" class="custom-logo" alt="reactivelinux.com" decoding="async" srcset="https://reactivelinux.com/wp-content/uploads/iconoh.png 500w, https://reactivelinux.com/wp-content/uploads/iconoh-300x300.png 300w, https://reactivelinux.com/wp-content/uploads/iconoh-150x150.png 150w" sizes="(max-width: 500px) 100vw, 500px" /></a> </div> <div class="site-branding-text"> <p class="site-title-footer"> <a href="https://reactivelinux.com/" rel="home">reactivelinux.com</a></p> <p class="site-description-footer">En el vasto universo digital, cada línea de código es un conjuro y cada comando, una llave. ReactiveLinux es la forja donde se moldean los arquitectos de este mundo. Aquí no recitamos manuales; desciframos los secretos de la terminal de Linux hasta convertirla en una extensión de tu pensamiento. Te guiamos a través de la sintaxis de lenguajes que dan vida a las ideas, desde los cimientos de Python hasta la velocidad de Go. Exploramos las corrientes subterráneas de la tecnología que definirán el mañana. Este no es un simple sitio de tutoriales, es tu catalizador. Un lugar para reaccionar, crear y transformar el caos digital en orden y poder.</p> </div> </div> </div> <!--col-md-3--> <!--/col-md-3--> </div> <!--/row--> </div> <!--/container--> </div> <!--End bs-footer-widget-area--> <div class="bs-footer-copyright"> <div class="container"> <div class="row"> <div class="col-md-12 text-center"> <p class="mb-0"> Copyright © All rights reserved <span class="sep"> | </span> <a href="https://themeansar.com/free-themes/blogarise/" target="_blank">BlogArise</a> por <a href="https://themeansar.com" target="_blank">Themeansar</a>. </a> </p> </div> </div> </div> </div> </div> </div> <!--/overlay--> </footer> <!--/footer--> </div> <!--/wrapper--> <!--Scroll To Top--> <a href="#" class="bs_upscr bounceInup animated"><i class="fas fa-long-arrow-alt-up"></i></a> <!--/Scroll To Top--> <!-- Modal --> <div class="modal fade bs_model" id="exampleModal" data-bs-keyboard="true" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"> <div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><i class="fa fa-times"></i></button> </div> <div class="modal-body"> <form role="search" method="get" class="search-form" action="https://reactivelinux.com/"> <label> <span class="screen-reader-text">Buscar:</span> <input type="search" class="search-field" placeholder="Buscar …" value="" name="s" /> </label> <input type="submit" class="search-submit" value="Buscar" /> </form> </div> </div> </div> </div> <!-- /Modal --> <!-- /Scroll To Top --> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/*","\/wp-content\/uploads\/*","\/wp-content\/*","\/wp-content\/plugins\/*","\/wp-content\/themes\/blogarise\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <style> footer .footer-logo img{ width: 210px; height: 70px; } </style> <style type="text/css"> /*==================== Site title and tagline ====================*/ .site-title a, .site-description{ color: #000000; } body.dark .site-title a, body.dark .site-description{ color: #fff; } /*==================== Top Bar color ====================*/ .bs-head-detail, .mg-latest-news .bn_title{ background: #0a0a0a; } .bs-head-detail .top-date, .bs-head-detail { color: ; } /*==================== Menu color ====================*/ .navbar-wp { background: ; } .bs-default .navbar-wp .navbar-nav > li > a{ background: ; color: ; } .bs-default .navbar-wp .navbar-nav > li > a:hover{ color: ; } .navbar-wp .dropdown-menu > li > a { background: #fff; color: ; } .navbar-wp .dropdown-menu > li > a:hover, .navbar-wp .dropdown-menu > li > a:focus { background: ; color: ; } .bs-headthree .navbar-wp, .navbar-wp .dropdown-menu > li > a:hover, .navbar-wp .dropdown-menu > li > a:focus, .bs-headthree .right-nav a, .bs-headthree .switch .slider::before { background: ; } /*=================== Subscribe Button Color ===================*/ .desk-header .btn-subscribe{ background: ; color: ; border-color: ; } .desk-header .btn-subscribe:hover{ background: ; color: ; border-color: ; } /*=================== Breadeking News Color ===================*/ .bs-latest-news { background: ; } .bs-latest-news .bs-latest-news-slider a { color: ; } /*=================== Slider Color ===================*/ .homemain .bs-slide.overlay:before{ background-color: #00000099; } .bs-slide .inner .title a { color: ; } @media (min-width:991px) { .bs-slide .inner .title{ font-size: 50px; } } </style> <script type="text/javascript" src="https://reactivelinux.com/wp-includes/js/dist/hooks.min.js?ver=4d63a3d491d11ffd8ac6" id="wp-hooks-js"></script> <script type="text/javascript" src="https://reactivelinux.com/wp-includes/js/dist/i18n.min.js?ver=5e580eb46a90c2b997e6" id="wp-i18n-js"></script> <script type="text/javascript" id="wp-i18n-js-after"> /* <![CDATA[ */ wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } ); /* ]]> */ </script> <script type="text/javascript" src="https://reactivelinux.com/wp-content/plugins/contact-form-7/includes/swv/js/index.js?ver=5.9.8" id="swv-js"></script> <script type="text/javascript" id="contact-form-7-js-extra"> /* <![CDATA[ */ var wpcf7 = {"api":{"root":"https:\/\/reactivelinux.com\/wp-json\/","namespace":"contact-form-7\/v1"}}; /* ]]> */ </script> <script type="text/javascript" id="contact-form-7-js-translations"> /* <![CDATA[ */ ( function( domain, translations ) { var localeData = translations.locale_data[ domain ] || translations.locale_data.messages; localeData[""].domain = domain; wp.i18n.setLocaleData( localeData, domain ); } )( "contact-form-7", {"translation-revision-date":"2024-07-17 09:00:42+0000","generator":"GlotPress\/4.0.1","domain":"messages","locale_data":{"messages":{"":{"domain":"messages","plural-forms":"nplurals=2; plural=n != 1;","lang":"es"},"This contact form is placed in the wrong place.":["Este formulario de contacto est\u00e1 situado en el lugar incorrecto."],"Error:":["Error:"]}},"comment":{"reference":"includes\/js\/index.js"}} ); /* ]]> */ </script> <script type="text/javascript" src="https://reactivelinux.com/wp-content/plugins/contact-form-7/includes/js/index.js?ver=5.9.8" id="contact-form-7-js"></script> <script type="text/javascript" src="https://reactivelinux.com/wp-content/themes/blogarise/js/dark.js?ver=6.8.2" id="blogarise-dark-js"></script> <script type="text/javascript" src="https://reactivelinux.com/wp-content/themes/blogarise/js/custom.js?ver=6.8.2" id="blogarise_custom-js-js"></script> <script> /(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1); </script> </body> </html>
- Nodo: