Manejo del DOM #2: Attributes & Data Attributes
Tags: webdev, javascript, learning, beginners
Published: 2024-01-24 04:32:38

## ¿Qué es un Attribute?

Los `attributes` nos proporcionan información adicional sobre los elementos del documento HTML, todos los elementos HTML pueden tener `attributes`, por ejemplo, `<html lang="es">` su atributo es `lang` y su valor es `es`, esto indigo el lenguaje de la pagina a español.

En los enlaces de una pagina, por ejemplo, `<a href="index.html">Inicio</a>` su atributo es `href` y su valor es  una dirección URL.

## Primera forma de obtener el valor de un atributo

Accediendo a elementos del HTML tenemos acceso a sus atributos con la notación del punto, veamos un ejemplo de como hacerlo.

Tomaremos como referencia un enlace en el documento HTML:

```
<a class="linkuser" href="index.html" data-link="inicio de pagina" data-name="enlace home">Ir a</a>

```

Accederemos al enlace y a su atributo:

```
let linkhref1 = document.querySelector(".linkuser").href
console.log(linkhref1)

```

Esto nos devuelve el valor del atributo `href` como en la siguiente imagen:


![Resultado](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y4wazsw75cer5i1sskhc.png)

Hay que tomar en cuenta en el resultado que nos muestra por consola, podemos observar que en este ejemplo el valor que nos muestra es una URL absoluta, diferente al valor que tiene en el documento, el valor que tiene es `index.html`, en los enlaces, por ejemplo, podríamos necesitar el valor de la URL absoluta ó solamente el valor que tiene en el documento.

Hay otra forma de acceder a los atributos de los elementos con un método en especifico el cual veremos a continuación:

## Segunda forma de obtener el valor de un atributo

Existe un método que nos permite acceder al valor de un atributo llamado `.getAttribute()` veamos como se utiliza:

```
let linkhref2 = document.querySelector(".linkuser").getAttribute("href")
console.log(linkhref2)

```

Este nos devuelve el valor que tiene en el atributo, mas no nos devuelve la ruta absoluta, veamos la imagen:


![Resultado 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0phuf4cvyiq7fwtr00j7.png)

Ambas formas nos permiten acceder al valor del atributo, hay excepciones en el caso de los enlaces así como el ejemplo anterior que nos puede devolver la ruta absoluta, esto depende de la necesidad del programador del valor que requiera.

## Creando y asignando valores a atributos en elementos HTML

Podemos asignar valores a atributos y a la vez crear nuevos atributos a elementos HTML con el método llamado `.setAttribute()` y se usa de la siguiente forma:

```
// asignando un nuevo atributo
$linkuser.setAttribute("target", "_blank")
$linkuser.setAttribute("rel", "noopener")
```

Tomando de referencia el enlace de ejemplo, le estamos asignando valores al atributo `target` & al atributo `rel`, independientemen si tenga el atributo o no, este cambia su valor o le asigna el nuevo atributo al elemento HTML.

## Validar si existe o no un atributo en elementos HTML

En caso de necesitar validar si existe un atributo en un elemento HTML. podemos usar un método especifico para eso llamado `.hasAttribute()` este nos devolverá un valor `booleano` indicando si existe o no el atributo en el elemento HTML que le indiquemos. 

Veamos un ejemplo:

```
console.log($linkuser.hasAttribute("rel"))
```

En este ejemplo nos devolverá `true` ya que anteriormente lo hemos asignado al enlace del documento, en caso de no haberlo asignado, se validaría con `false`.

## Eliminar atributo de un elemento HTML

También podemos eliminar atributos de elementos HTML en caso de que lo necesitemos con el método llamado `.removeAttribute()` y se usa de la siguiente forma:

```
$linkuser.removeAttribute("rel")
console.log($linkuser.hasAttribute("rel"))
```

Primero eliminamos el atributo que queremos eliminar, posterior, validamos que el atributo que eliminamos se haya removido del elemento HTML correctamente.

## ¿Qué es un Data-attribute?

Los `data-attribute` fueron diseñados para que sea mas fácil de extender datos asociados a un elemento en particular sin necesidad de que tengan un significado definido, permiten almacenar información sobre un elemento HTML, su sintaxis es la siguiente:

`data-nombre="valor"`

Los `data-attribute` deben anteponerse con la palabra `data` seguido por un guion (-) y un nombre, veamos un ejemplo:

```
<a class="linkuser" href="index.html" data-link="inicio de pagina" data-name="enlace home">Ir a</a>

```

Tomando de referencia el código anterior, en el enlace podemos ver que tenemos dos `data-attribute` llamados `data-link` & `data-name`. Así es como podemos definir `data-attributes` a elementos HTML con información adicional que necesitemos.

Para poder ver todos los `data-attributes` del documento HTML podemos hacerlo con la notación del punto seguido de la palabra `dataset`, veamos como:

```
// podemos acceder a todos los data-attributes del elemento
console.log($linkuser.dataset)
```

Esto nos devuelve un `DOMStringMap` es una colección con los nombres de los `data-attribute` que hemos definido en elementos del documento HTML. Veamos una imagen según el resultado anterior:


![Resultado dataset](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hhfgxz3f4q74ojahkd9r.png)

Esto nos permite darnos una mejor visibilidad de todos los `data-attributes` que hemos definido.

## Obtener el valor de un único Data Attribute

Para acceder al valor de un `data-attribute` lo hacemos con la notación del punto seguido del nombre del `data-attribute`, de la siguiente forma:

```
// podemos acceder a un data-attributes con la notación del punto
console.log($linkuser.dataset.name)
```

Este nos devuelve su valor definido en su `data-attribute`.

## Creando un nuevo Data Attribute y definiendo su valor

Para crear un nuevo `data-attribute` se hace similar al ejemplo anterior donde obtenemos el valor de ello, solo que esta vez se le asigna un valor, veamos un ejemplo:

```
// creando un nuevo data-attribute
$linkuser.dataset.unit = "nuevo dataset"
```

Con esto creamos y le asignamos valor a un nuevo `data-attribute`, pero a la vez, si el `data-attribute` ya existe, solamente sobrescribe su valor.

Para validar si existe un `data-attribute` se usa el método `.hasAttribute()` nos sirve para validar cualquier atributo o data attribute. 

Para eliminar un `data-attribute` se usa el método `.removeAttribute()`, son los mismo métodos para cualquier tipo de atributo.

Hasta aca hemos visto el valor que tiene los atributo y data-attribute en los elementos HTML, a criterio del programador los usara de manera que lo requiera.