{"id":618,"date":"2023-11-13T17:57:21","date_gmt":"2023-11-13T20:57:21","guid":{"rendered":"https:\/\/stackcodelab.com\/blog\/?p=618"},"modified":"2023-11-13T17:57:45","modified_gmt":"2023-11-13T20:57:45","slug":"manipulacion-del-dom","status":"publish","type":"post","link":"https:\/\/stackcodelab.com\/blog\/manipulacion-del-dom\/","title":{"rendered":"Manipulaci\u00f3n del DOM"},"content":{"rendered":"\n

Accediendo y modificando elementos del documento<\/em><\/h2>\n\n\n\n

\u00bfQu\u00e9 es el DOM?<\/strong> El DOM es la representaci\u00f3n en forma de \u00e1rbol de la estructura de una p\u00e1gina web. Cada elemento HTML (como etiquetas <div><\/code>, <p><\/code>, <a><\/code>, etc.) es un nodo en el \u00e1rbol. JavaScript permite acceder y manipular estos nodos para realizar cambios din\u00e1micos en la p\u00e1gina web.<\/p>\n\n\n\n

Accediendo a elementos del DOM<\/strong>\u00a0Para acceder a un elemento del DOM, puedes utilizar m\u00e9todos como:\u00a0<\/p>\n\n\n\n

document.getElementById()<\/code>,\u00a0<\/p>\n\n\n\n

document.querySelector()<\/code>,\u00a0<\/p>\n\n\n\n

document.getElementsByClassName()<\/code>, etc.<\/p>\n\n\n\n

Ejemplo:<\/p>\n\n\n\n

\/\/ Acceder a un elemento por su ID\r\nlet miElemento = document.getElementById(\"mi-elemento\");\r\n\r\n\/\/ Acceder al primer elemento con una clase espec\u00edfica\r\nlet elementosClase = document.querySelector(\".clase\");\r\n\r\n\/\/ Acceder a varios elementos con una misma clase\r\nlet elementosClase = document.getElementsByClassName(\"clase\");\r\n<\/code><\/pre>\n\n\n\n
Modificando elementos del DOM<\/strong> Una vez que has accedido a un elemento del DOM, puedes modificar su contenido, estilo y atributos.<\/p>\n\n\n\n
Ejemplo:<\/p>\n\n\n\n
\/\/ Modificar el contenido de un elemento\r\nmiElemento.innerHTML = \"Nuevo contenido\";\r\n\r\n\/\/ Cambiar el estilo de un elemento\r\nmiElemento.style.color = \"red\";\r\n\r\n\/\/ Modificar atributos\r\nmiElemento.setAttribute(\"href\", \"https:\/\/www.ejemplo.com\");\r\nManipulaci\u00f3n de eventos\r\n<\/code><\/pre>\n\n\n\n
Manipulaci\u00f3n de eventos<\/em><\/p>\n\n\n\n
\u00bfQu\u00e9 son los eventos?<\/strong> Los eventos son acciones que ocurren en una p\u00e1gina web, como hacer clic en un bot\u00f3n, mover el mouse, escribir en un campo de texto, etc. Puedes utilizar JavaScript para responder a estos eventos y ejecutar c\u00f3digo espec\u00edfico cuando ocurran.<\/p>\n\n\n\n
Agregar eventos<\/strong> Puedes agregar eventos a elementos del DOM utilizando m\u00e9todos como addEventListener()<\/code>.<\/p>\n\n\n\n
Ejemplo: <\/p>\n\n\n\n
let miBoton = document.getElementById(\"mi-boton\");\r\n\r\nmiBoton.addEventListener(\"click\", function() {\r\n  alert(\"\u00a1Has hecho clic en el bot\u00f3n!\");\r\n});\r\n<\/code><\/pre>\n\n\n\n
Ejercicios Pr\u00e1cticos: Crear Interacciones de Usuario<\/em><\/p>\n\n\n\n
Ejercicio 1: Crear un bot\u00f3n que cambie el color de fondo de una p\u00e1gina web al hacer clic. Los lectores deben aprender a seleccionar un elemento, agregar un evento y modificar el estilo de un elemento. <\/p>\n\n\n\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <title>Ejercicio de Cambio de Color<\/title>\r\n<\/head>\r\n<body>\r\n  <button id=\"cambiar-color\">Cambiar Color de Fondo<\/button>\r\n  <script>\r\n    let boton = document.getElementById(\"cambiar-color\");\r\n    boton.addEventListener(\"click\", function() {\r\n      document.body.style.backgroundColor = \"lightblue\";\r\n    });\r\n  <\/script>\r\n<\/body>\r\n<\/html>\r\n<\/code><\/pre>\n\n\n\n
Ejercicio 2: Crear un formulario de contacto que muestre un mensaje de agradecimiento cuando se env\u00eda. Este ejercicio ense\u00f1a a los lectores c\u00f3mo trabajar con formularios y eventos. <\/p>\n\n\n\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <title>Formulario de Contacto<\/title>\r\n<\/head>\r\n<body>\r\n  <form id=\"formulario\">\r\n    <label for=\"nombre\">Nombre:<\/label>\r\n    <input type=\"text\" id=\"nombre\" name=\"nombre\">\r\n    <button type=\"submit\">Enviar<\/button>\r\n  <\/form>\r\n  <p id=\"mensaje\" style=\"display: none;\">\u00a1Gracias por tu mensaje!<\/p>\r\n  <script>\r\n    let formulario = document.getElementById(\"formulario\");\r\n    let mensaje = document.getElementById(\"mensaje\");\r\n\r\n    formulario.addEventListener(\"submit\", function(event) {\r\n      event.preventDefault(); \/\/ Evita que se env\u00ede el formulario\r\n      mensaje.style.display = \"block\"; \/\/ Muestra el mensaje de agradecimiento\r\n    });\r\n  <\/script>\r\n<\/body>\r\n<\/html>\r\n<\/code><\/pre>\n\n\n\n
Estos ejercicios pr\u00e1cticos ayudar\u00e1n a los lectores a aplicar y consolidar lo que han aprendido sobre la manipulaci\u00f3n del DOM y la gesti\u00f3n de eventos en JavaScript. La interacci\u00f3n en tiempo real con una p\u00e1gina web es fundamental en el desarrollo frontend.<\/p>\n","protected":false},"excerpt":{"rendered":"
Accediendo y modificando elementos del documento \u00bfQu\u00e9 es el DOM? El DOM es la representaci\u00f3n en forma de \u00e1rbol de la estructura de una p\u00e1gina web. Cada elemento HTML (como etiquetas <div>, <p>, <a>, etc.) es un nodo en el \u00e1rbol. JavaScript permite acceder y manipular estos nodos para realizar cambios din\u00e1micos en la p\u00e1gina web. Accediendo a elementos […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[33],"tags":[],"class_list":["post-618","post","type-post","status-publish","format-standard","hentry","category-javascript-y-otras-hierbas"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"arquitecto","author_link":"https:\/\/stackcodelab.com\/blog\/author\/arquitecto\/"},"uagb_comment_info":0,"uagb_excerpt":"Accediendo y modificando elementos del documento \u00bfQu\u00e9 es el DOM? El DOM es la representaci\u00f3n en forma de \u00e1rbol de la estructura de una p\u00e1gina web. Cada elemento HTML (como etiquetas <div>, <p>, <a>, etc.) es un nodo en el \u00e1rbol. JavaScript permite acceder y manipular estos nodos para realizar cambios din\u00e1micos en la p\u00e1gina web. Accediendo a elementos…","_links":{"self":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/618","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/comments?post=618"}],"version-history":[{"count":1,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/618\/revisions"}],"predecessor-version":[{"id":619,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/618\/revisions\/619"}],"wp:attachment":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/media?parent=618"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/categories?post=618"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/tags?post=618"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}