{"id":484,"date":"2024-05-28T08:52:03","date_gmt":"2024-05-28T06:52:03","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?p=484"},"modified":"2024-07-31T11:47:09","modified_gmt":"2024-07-31T09:47:09","slug":"atributos-y-data-attributes-en-javascript","status":"publish","type":"post","link":"https:\/\/sutilweb.eu\/index.php\/2024\/05\/28\/atributos-y-data-attributes-en-javascript\/","title":{"rendered":"Atributos y Data Attributes en JavaScript"},"content":{"rendered":"\n

Introducci\u00f3n<\/h2>\n\n\n\n

En el desarrollo web, la manipulaci\u00f3n de atributos HTML es una habilidad esencial para crear aplicaciones din\u00e1micas e interactivas. JavaScript proporciona herramientas poderosas para acceder y modificar tanto los atributos est\u00e1ndar<\/strong> como los data attributes<\/strong> personalizados en los elementos HTML. En este art\u00edculo, exploraremos c\u00f3mo trabajar con estos atributos en JavaScript, ofreceremos ejemplos pr\u00e1cticos y proporcionaremos recursos adicionales para profundizar en el tema.<\/p>\n\n\n\n

\u00bfQu\u00e9 son los Atributos HTML?<\/h2>\n\n\n\n

Los atributos HTML<\/strong> son propiedades que se utilizan para configurar y modificar el comportamiento de los elementos HTML. Algunos atributos comunes incluyen class<\/code>, id<\/code>, href<\/code>, src<\/code>, alt<\/code>, entre otros. Estos atributos proporcionan informaci\u00f3n adicional sobre los elementos y son fundamentales para definir c\u00f3mo se renderizan y funcionan en la p\u00e1gina web.<\/p>\n\n\n\n

Ejemplo de Atributos HTML<\/h3>\n\n\n\n
<img src=\"imagen.jpg\" alt=\"Descripci\u00f3n de la imagen\">\n<a href=\"https:\/\/www.ejemplo.com\">Enlace a Ejemplo<\/a><\/code><\/pre>\n\n\n\n
Accediendo a Atributos HTML en JavaScript<\/h2>\n\n\n\n
Obtener Atributos<\/h3>\n\n\n\n
Para obtener el valor de un atributo HTML en JavaScript, se utiliza el m\u00e9todo getAttribute<\/code>.<\/p>\n\n\n\n
const imgElement = document.querySelector('img');\nconst srcValue = imgElement.getAttribute('src');\nconsole.log(srcValue); \/\/ \"imagen.jpg\"<\/code><\/pre>\n\n\n\n
Establecer Atributos<\/h3>\n\n\n\n
Para establecer el valor de un atributo HTML, se utiliza el m\u00e9todo setAttribute<\/code>.<\/p>\n\n\n\n
const linkElement = document.querySelector('a');\nlinkElement.setAttribute('href', 'https:\/\/www.nuevo-ejemplo.com');<\/code><\/pre>\n\n\n\n
Eliminar Atributos<\/h3>\n\n\n\n
Para eliminar un atributo HTML, se utiliza el m\u00e9todo removeAttribute<\/code>.<\/p>\n\n\n\n
imgElement.removeAttribute('alt');<\/code><\/pre>\n\n\n\n
\u00bfQu\u00e9 son los Data Attributes?<\/h2>\n\n\n\n
Los data attributes<\/strong> son atributos personalizados que permiten almacenar datos adicionales en los elementos HTML. Estos atributos son \u00fatiles para pasar informaci\u00f3n desde el HTML al JavaScript de manera estructurada. Los data attributes se definen con el prefijo data-<\/code>.<\/p>\n\n\n\n
Ejemplo de Data Attributes<\/h3>\n\n\n\n
<div data-user-id=\"12345\" data-role=\"admin\"><\/div><\/code><\/pre>\n\n\n\n
Accediendo a Data Attributes en JavaScript<\/h2>\n\n\n\n
Obtener Data Attributes<\/h3>\n\n\n\n
Para acceder a los data attributes en JavaScript, se utiliza la propiedad dataset<\/code>.<\/p>\n\n\n\n
const divElement = document.querySelector('div');\nconst userId = divElement.dataset.userId;\nconst role = divElement.dataset.role;\nconsole.log(userId); \/\/ \"12345\"\nconsole.log(role); \/\/ \"admin\"<\/code><\/pre>\n\n\n\n
Establecer Data Attributes<\/h3>\n\n\n\n
Para establecer data attributes, se asignan valores a la propiedad dataset<\/code>.<\/p>\n\n\n\n
divElement.dataset.userId = '67890';\ndivElement.dataset.role = 'user';<\/code><\/pre>\n\n\n\n
Eliminar Data Attributes<\/h3>\n\n\n\n
Para eliminar un data attribute, se utiliza el m\u00e9todo removeAttribute<\/code> con el nombre completo del atributo.<\/p>\n\n\n\n
divElement.removeAttribute('data-role');<\/code><\/pre>\n\n\n\n
Ejemplos Pr\u00e1cticos<\/h2>\n\n\n\n
Ejemplo 1: Cambiar la Imagen al Hacer Clic<\/h3>\n\n\n\n
<img id=\"imagen\" src=\"imagen1.jpg\" data-alt-src=\"imagen2.jpg\">\n<button id=\"cambiarImagen\">Cambiar Imagen<\/button>\n\n<script>\n  const img = document.getElementById('imagen');\n  const button = document.getElementById('cambiarImagen');\n\n  button.addEventListener('click', () => {\n    const currentSrc = img.getAttribute('src');\n    const newSrc = img.dataset.altSrc;\n    img.setAttribute('src', newSrc);\n    img.dataset.altSrc = currentSrc;\n  });\n<\/script><\/code><\/pre>\n\n\n\n
Ejemplo 2: Mostrar Informaci\u00f3n Adicional<\/h3>\n\n\n\n
<div id=\"usuario\" data-name=\"Juan P\u00e9rez\" data-age=\"30\"><\/div>\n<button id=\"mostrarInfo\">Mostrar Informaci\u00f3n<\/button>\n\n<script>\n  const usuario = document.getElementById('usuario');\n  const button = document.getElementById('mostrarInfo');\n\n  button.addEventListener('click', () => {\n    const name = usuario.dataset.name;\n    const age = usuario.dataset.age;\n    alert(`Nombre: ${name}, Edad: ${age}`);\n  });\n<\/script><\/code><\/pre>\n\n\n\n
Conclusi\u00f3n<\/h2>\n\n\n\n
El manejo de atributos<\/strong> y data attributes<\/strong> en JavaScript es fundamental para crear aplicaciones web din\u00e1micas e interactivas. Los m\u00e9todos getAttribute<\/code>, setAttribute<\/code> y removeAttribute<\/code> te permiten manipular los atributos est\u00e1ndar, mientras que la propiedad dataset<\/code> proporciona una forma f\u00e1cil de trabajar con data attributes personalizados. Dominar estas t\u00e9cnicas mejorar\u00e1 significativamente tu capacidad para desarrollar aplicaciones web robustas y eficientes.<\/p>\n\n\n\n
Recursos Adicionales<\/h2>\n\n\n\n
Libros Recomendados<\/h3>\n\n\n\n
    \n
  1. Eloquent JavaScript<\/a> por Marijn Haverbeke<\/li>\n\n\n\n
  2. JavaScript: The Definitive Guide<\/a> por David Flanagan<\/li>\n\n\n\n
  3. JavaScript and JQuery: Interactive Front-End Web Development<\/a> por Jon Duckett<\/li>\n<\/ol>\n\n\n\n
    P\u00e1ginas Web Recomendadas<\/h3>\n\n\n\n
      \n
    1. MDN Web Docs: Element.setAttribute()<\/a><\/li>\n\n\n\n
    2. w3schools: HTML DOM setAttribute() Method<\/a><\/li>\n\n\n\n
    3. MDN Web Docs: Using data attributes<\/a><\/li>\n\n\n\n
    4. GeeksforGeeks: HTML DOM getAttribute() Method<\/a><\/li>\n\n\n\n
    5. JavaScript.info: Attributes and properties<\/a><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
      Introducci\u00f3n En el desarrollo web, la manipulaci\u00f3n de atributos HTML es una habilidad esencial para crear aplicaciones din\u00e1micas e interactivas. […]<\/p>\n","protected":false},"author":1,"featured_media":490,"comment_status":"closed","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":[1],"tags":[10,13,11,14,9,12],"class_list":["post-484","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-lenguajes-de-programacion","tag-atributos-html-en-javascript","tag-como-usar-data-attributes-en-javascript","tag-data-attributes-en-javascript","tag-ejemplos-de-atributos-y-data-attributes-en-javascript","tag-javascript","tag-manipulacion-de-atributos-en-javascript"],"uagb_featured_image_src":{"full":["https:\/\/sutilweb.eu\/wp-content\/uploads\/2024\/05\/Atributos-y-data-attributes-en-JavaScript.webp",1792,1024,false],"thumbnail":["https:\/\/sutilweb.eu\/wp-content\/uploads\/2024\/05\/Atributos-y-data-attributes-en-JavaScript-150x150.webp",150,150,true],"medium":["https:\/\/sutilweb.eu\/wp-content\/uploads\/2024\/05\/Atributos-y-data-attributes-en-JavaScript-300x171.webp",300,171,true],"medium_large":["https:\/\/sutilweb.eu\/wp-content\/uploads\/2024\/05\/Atributos-y-data-attributes-en-JavaScript-768x439.webp",768,439,true],"large":["https:\/\/sutilweb.eu\/wp-content\/uploads\/2024\/05\/Atributos-y-data-attributes-en-JavaScript-1024x585.webp",1024,585,true],"1536x1536":["https:\/\/sutilweb.eu\/wp-content\/uploads\/2024\/05\/Atributos-y-data-attributes-en-JavaScript-1536x878.webp",1536,878,true],"2048x2048":["https:\/\/sutilweb.eu\/wp-content\/uploads\/2024\/05\/Atributos-y-data-attributes-en-JavaScript.webp",1792,1024,false]},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Introducci\u00f3n En el desarrollo web, la manipulaci\u00f3n de atributos HTML es una habilidad esencial para crear aplicaciones din\u00e1micas e interactivas. […]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/posts\/484","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=484"}],"version-history":[{"count":5,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/posts\/484\/revisions"}],"predecessor-version":[{"id":1183,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/posts\/484\/revisions\/1183"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media\/490"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=484"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/categories?post=484"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/tags?post=484"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}