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"
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"
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
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">
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-
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>
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í.