{"id":812,"date":"2024-07-31T07:29:05","date_gmt":"2024-07-31T05:29:05","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=812"},"modified":"2024-07-31T07:29:05","modified_gmt":"2024-07-31T05:29:05","slug":"004-dom-atributos-y-data-attributes","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/javascript\/javascript-practico\/13-dom-document-object-model\/004-dom-atributos-y-data-attributes\/","title":{"rendered":"004. DOM: Atributos y Data-Attributes"},"content":{"rendered":"\n<p>En este cap\u00edtulo veremos como poder interactuar con los <strong>atributos<\/strong> de nuestras <strong>etiquetas HTML<\/strong>. hay que recordar que a partir de <strong>HTML5<\/strong>, el est\u00e1ndar permite crear nuestros propios atributos, que es lo que se conoce como <strong>Data Attributes<\/strong>, los cuales, se forman colocando la palabra <strong><em>data-<\/em><\/strong> y despu\u00e9s el nombre que queramos ponerle.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;a href=\"enlace.html\" data-description=\"enlace\"&gt;Nombre&lt;\/a&gt;<\/pre>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Nota<\/strong>: por convenci\u00f3n los <strong>Data Attributes<\/strong> se suelen poner en ingl\u00e9s, pero no es necesario.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Obtener los datos de los atributos<\/h2>\n\n\n\n<p>Existen 2 maneras de mandar llamar a los atributos y tambi\u00e9n de establecerles valores:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Mediante el m\u00e9todo <strong><em>getAttribute(\u00abatributo\u00bb)<\/em><\/strong>.<\/li>\n<\/ul>\n\n\n\n<p><strong>Ejm con notaci\u00f3n del punto<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">console.log(document.documentElement.lang);<\/pre>\n\n\n\n<p><strong>Ejm con el atributo getAttribute<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">console.log(document.documentElement.getAttribute(\"lang\");<\/pre>\n\n\n\n<p><strong>Ejm com ambos<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">console.log(document.querySelector(\".link-dom\").href);\n\/\/ Imprime toda la URL\nconsole.log(document.querySelector(\".link-dom\").getAttribute(\"href\"));\n\/\/ Imprime s\u00f3lo lo que tiene ese atributo<\/pre>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Nota<\/strong>: por norma, deber\u00edamos utilizar <strong>getAttribute()<\/strong>.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Modificar los datos de los atributos<\/h2>\n\n\n\n<p>Para modificar los datos de los atributos tenemos, al igual&nbsp; que para obtenerlos, dos m\u00e9todos.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Notaci\u00f3n del punto<\/strong> (.).<\/li>\n\n\n\n<li>Con el m\u00e9todo <strong><em>setAttribute(\u00abatributo\u00bb, \u00abvalor del atributo\u00bb)<\/em><\/strong>.<\/li>\n<\/ul>\n\n\n\n<p><strong>Ejm con la notaci\u00f3n del punto (.)<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">document.documentElement.lang = \"en\";<\/pre>\n\n\n\n<p><strong>Ejm con setAttribute()<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">document.documentElement.setAttribute(\"lang\", \"es\");<\/pre>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Nota<\/strong>: como ocurre con la obtenci\u00f3n de los atributos, deber\u00eda usarse <strong>setAttribute()<\/strong>.<\/p>\n<\/blockquote>\n\n\n\n<p>Es conveniente saber que cuando declaramos una variable que hace referencia al <strong>DOM<\/strong>, se suele anteponer el signo de d\u00f3lar ($) a dicha variable, para que se sepa que es una variable que hace referencia al <strong>DOM<\/strong>. De esta manera se sabe cuales son las variables que tienen que ver con la <strong>l\u00f3gica de programaci\u00f3n<\/strong>, y las variables que tienen que ver con el <strong>DOM<\/strong>. Tambi\u00e9n, por norma, todas las variables que hacen referencia al <strong>DOM<\/strong> se suelen declarar con la palabra reservada <strong>const<\/strong>.<\/p>\n\n\n\n<p>Por lo tanto, a partir de este cap\u00edtulo utilizaremos el <strong>signo de d\u00f3lar<\/strong> (<strong><em>$<\/em><\/strong>) para referirnos a las <strong>variables<\/strong> que hacen referencia a <strong>elementos HTML<\/strong>.<\/p>\n\n\n\n<p><strong>Ejm con setAttribute()<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ Guardamos la ruta en una variable\n$linkDOM = document.querySelector(\".link-dom\");\n\n$linkDOM.setAttribute(\"target\", \"_blank\");\n\/\/ para evitar el hackeo utilizamos tambi\u00e9n el atributo rel\n$linkDOM.setAttribute(\"rel\", \"noopener\");\n$linkDOM.setAttribute(\"href\", \"https:\/\/sutilweb.eu\");<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Validar elementos<\/h2>\n\n\n\n<p>Para validar que un atributo est\u00e1 en la etiqueta, disponemos del m\u00e9todo <strong><em>hasAttribute(\u00abatributo\u00bb)<\/em><\/strong> para validar si el atributo est\u00e1 o no en dicho elemento.<\/p>\n\n\n\n<p><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$linkDOM.hasAttribute(\"rel\");\n\/\/ Valida true o false dependiendo de si est\u00e1 o no<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Eliminar elementos<\/h2>\n\n\n\n<p>Al igual que tenemos un <strong><em>getAttribute()<\/em><\/strong> y un <strong><em>setAttribute()<\/em><\/strong> para obtener y modificar valores de atributos respectivamente, tenemos un <strong><em>removeAttribute(\u00abatributo\u00bb)<\/em><\/strong> para remover el atributo de la(s) etiqueta(s)<\/p>\n\n\n\n<p><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$linkDOM.removeAttribute(\"rel\");\n\/\/ Elimina el atributo rel<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Manipulaci\u00f3n de los Data Attributes<\/h2>\n\n\n\n<p>Al igual que con los atributos normales, los <strong>Data Attributes<\/strong> disponen de los mismos <strong>m\u00e9todos<\/strong>, osea, la <strong>notaci\u00f3n del punto<\/strong>, <strong><em>getAttribute(\u00abatributo\u00bb)<\/em><\/strong>, <strong><em>setAttribute(\u00abatributo\u00bb,\u00bbvalor del atributo\u00bb)<\/em><\/strong> y <strong><em>removeAttribute(\u00abatributo\u00bb)<\/em><\/strong> para eliminar el <strong>atributo<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Visualizar Data Attributes<\/h3>\n\n\n\n<p>Para utilizar los <strong>Data Attributes<\/strong> tenemos igualmente la <strong>notaci\u00f3n del punto<\/strong>, y tambi\u00e9n podemos hacer uso de <strong><em>getAttribute(\u00abatributo\u00bb)<\/em><\/strong>. Para la notaci\u00f3n del punto debemos utilizar la palabra <strong><em>dataset<\/em><\/strong>.<\/p>\n\n\n\n<p><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">console.log($linkDOM.getAttribute(\"data-description\");\n\n\/* Utilizando la notaci\u00f3n del punto nos devuelve\nun map *\/\nconsole.log($linkDOM.dataset); \/\/ Notaci\u00f3n del punto<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Modificar Data Attributes<\/h3>\n\n\n\n<p>De igual manera lo podemos hacer con la <strong>notaci\u00f3n del punto<\/strong> utilizando <strong><em>dataset<\/em><\/strong>, o con el m\u00e9todo <strong><em>setAttribute()<\/em><\/strong>.<\/p>\n\n\n\n<p><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ Con la notaci\u00f3n del punto\n$linkDOM.dataset.description = \"Descripci\u00f3n\";\n\/\/ Con setAttribute()\n$linkDOM.setAttribute(\"data-description\",\"Descripci\u00f3n\");<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Resumen<\/h2>\n\n\n\n<p>Por lo tanto, para ver, modificar, saber si existe el atributo y eliminar atributos, tenemos las siguientes herramientas.<\/p>\n\n\n\n<p><strong>Atributos normales<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ver atributos\n<ul class=\"wp-block-list\">\n<li><strong>Notaci\u00f3n del punto <\/strong>y <strong><em>documentElement<\/em><\/strong><\/li>\n\n\n\n<li>M\u00e9todo <strong><em>getAttribute(\u00abatributo\u00bb)<\/em><\/strong><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Modificar atributos\n<ul class=\"wp-block-list\">\n<li><strong>Notaci\u00f3n del punto<\/strong><\/li>\n\n\n\n<li>M\u00e9todo <strong><em>setAttribute(\u00abatributo\u00bb, \u00abvalor del atributo\u00bb)<\/em><\/strong><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Eliminar atributos\n<ul class=\"wp-block-list\">\n<li>M\u00e9todo <strong><em>removeAttribute(\u00abatributo\u00bb)<\/em><\/strong><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Ver si hay un atributo\n<ul class=\"wp-block-list\">\n<li>M\u00e9todo <strong><em>hasAttribute(\u00abatributo\u00bb)<\/em><\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><strong>Atributos tipo Data Attributes<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ver atributos\n<ul class=\"wp-block-list\">\n<li><strong>Notaci\u00f3n del punto<\/strong> y <em><strong>dataset<\/strong><\/em><\/li>\n\n\n\n<li>M\u00e9todo <strong><em>getAttribute(\u00abatributo\u00bb)<\/em><\/strong><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Modificar atributos\n<ul class=\"wp-block-list\">\n<li><strong>Notaci\u00f3n del punto<\/strong> y <em><strong>dataset<\/strong><\/em><\/li>\n\n\n\n<li>M\u00e9todo <strong><em>setAttribute(\u00abatributo\u00bb, \u00abvalor del atributo\u00bb)<\/em><\/strong><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Eliminar atributos\n<ul class=\"wp-block-list\">\n<li>M\u00e9todo <strong><em>removeAttribute(\u00abatributo\u00bb)<\/em><\/strong><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Ver si hay un atributo\n<ul class=\"wp-block-list\">\n<li>M\u00e9todo <strong><em>hasAttribute(\u00abatributo\u00bb)<\/em><\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>En este cap\u00edtulo veremos como poder interactuar con los atributos de nuestras etiquetas HTML. hay que recordar que a partir [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":800,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"","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":""},"class_list":["post-812","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"En este cap\u00edtulo veremos como poder interactuar con los atributos de nuestras etiquetas HTML. hay que recordar que a partir [&hellip;]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/812","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"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=812"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/812\/revisions"}],"predecessor-version":[{"id":814,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/812\/revisions\/814"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/800"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=812"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}