2

mi duda es cual seria la diferencia en la edicion de un atributo por ejemplo:

element.setAttribute("value","hola");

y de esta otra forma

element.value="hola"

1
  • En el caso que planteas seria igual, pero como modificarias el valor de un data-attribute? Commented el 7 mar. 2022 a las 2:46

1 respuesta 1

5

Nota: Voy a dar una visión muy, muy, muy simplificada de este problema y de la confusión entre propiedades y atributos. Cualquier añadido que quiera aportar la comunidad será recibido con los brazos abiertos


Propiedades vs. Atributos

Existen varias diferencias entre utilizar .propiedad y .setAttribute().

Por simplificarlo bastante se podría decir que se está mezclando el concepto propiedad de un objeto con el concepto atributo de un elemento. Cuando utilizamos .propiedad estamos modificando el valor de la propiedad del objeto js que estemos referenciando. Al utilizar .setAttribute() lo que conseguimos es modificar el valor de un atributo del elemento HTML.

A priori, aunque hay ciertas excepciones (principalmente con los inputs), los atributos estándar de un elemento HTML y las propiedades están "sincronizadas". Un ejemplo de esto:

element = document.getElementById('test');
element.setAttribute('name', 'email');
console.log(element.name);

// El resultado es: email

element.name = 'nombre';
console.log(element.getAttribute('name'));

// El resultado es: nombre
<input id="test" name="telefono" value="666666666">

Una de las excepciones sería por ejemplo modificar el value del input:

element = document.getElementById('test');
element.setAttribute('value', '999999999');

// El input muestra 999999999

element.value = '111111111';

// El input muestra 111111111

console.log(element.getAttribute('value'));

// El resultado sigue siendo: 999999999
<input id="test" name="telefono" value="666666666">

Salvo estos casos puntuales se podría decir que los atributos estándar están sincronizados con las propiedades del elemento.

Hay un ejemplo clásico que ilustra el hecho de que no estemos trabajando exactamente con lo mismo, que es el atributo .style. Acceder al atributo style con .getAttribute('style') nos devuelve el string que haya en ese atributo. Pero acceder a la propiedad con .style nos da otro resultado completamente diferente en tipo de variable y contenido:

element = document.getElementById('test');

console.log(element.getAttribute('style'));

// obtenemos el contenido del atributo style en formato string

console.log(element.style);

//obtenemos TODO el objeto style definido explícitamente (no el interpretado), para eso podemos utilizar window.getComputedStyle(element)
#test{
  color: red;
}
<input id="test" name="telefono" value="666666666" style="border-color:green">

Otro ejemplo que ilustra la diferencia entre propiedad y atributo puede ser el atributo href:

console.log(document.getElementById('test').getAttribute('href'))

// Obtenemos el contenido del atributo href

console.log(document.getElementById('test').href)

// Obtenemos la URL absoluta
<a id="test" href="#ok">

¿Qué ocurre con los atributos no estándar?

Nada.

La propiedad y el atributo no se sincronizan y de hecho pueden tener valores diferentes a no ser que los modifiquemos a la vez. Si modificamos un atributo en el DOM e intentamos leerlo desde la propiedad que debería existir ocurre esto:

element = document.getElementById('test');
element.setAttribute('prueba', 'probando');

console.log(element.prueba);

// devuelve undefined

console.log(element.getAttribute('prueba'));

// devuelve el valor correcto
<a id="test" href="#ok">Enlace</a>

Y si lo hacemos a la inversa, más de lo mismo:

element = document.getElementById('test');
element.prueba = 'probando';

console.log(element.prueba);

// devuelve el valor correcto

console.log(element.getAttribute('prueba'));

// devuelve null
<a id="test" href="#ok">Enlace</a>

Este último ejemplo es muy visual porque nos da dos pistas de lo que ocurre realmente.

Si nos fijamos en el ejemplo anterior obteníamos undefined, ya que el objeto no tiene definida la propiedad a la que estábamos accediendo pero en el ejemplo actual obtenemos un null, que es el valor vacío del atributo.

Si además inspeccionamos el elemento con cualquier inspector de código del navegador que estemos utilizando veremos que en este ejemplo no se ha creado ese atributo en el elemento, pero en el anterior sí a pesar de no ser un atributo estándar.

Es decir, la única diferencia es que no hay sincronización entre propiedades y atributos...

...salvo con data-

data-attrs

De cara a poder facilitar que existan atributos personalizados en los elementos del DOM que estén sincronizados con las propiedades del objeto JS se crearon los atributos data-*.

Estos atributos sí están sincronizados en la propiedad .dataset (pasando de kebab-case a lowerCamelCase y viceversa), por lo que la problemática estaría resuelta:

element = document.getElementById('test');
element.dataset.pruebaData = 'probando';

console.log(element.getAttribute('data-prueba-data'));

// devuelve el valor correcto

element.setAttribute('data-prueba-data', 'probando de nuevo');

console.log(element.dataset.pruebaData);

// devuelve el valor correcto
<a id="test" href="#ok">Enlace</a>

Resumiendo

La diferencia entre modificar un atributo con .setAttribute y .propiedad es sencillamente que no estamos modificando lo mismo (incluso hay casos en los que tendría utilidad un comportamiento independiente). La confusión está en que asumimos la sincronización entre ambas partes dando por hecho que son lo mismo cuando no es así.

2
  • Excelente respuesta, muy bien explicada y con ejemplos claros.
    – Triby
    Commented el 7 mar. 2022 a las 16:43
  • super bien explicado, todo totalmente claro, muchos de los que estamos empezando nos confundimos con esa sincronizacion y creeemos que estamos modificando lo mismo.
    – NoWayBro
    Commented el 8 mar. 2022 a las 2:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.