¿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:
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:
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:
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.
Top comments (0)