1

estoy empezando con javascript pero tengo una duda con respecto a obtener el valor de los atributos de los elementos, hay alguna diferencia aparte de lo teorico en este codigo, o cual es mas recomendable y porque?

   let atributo=element.getAttribute('type');

obtenerlo mediante la propiedad

let atributo = element.type;

2 respuestas 2

1

Esta es una pregunta interesante! Para entender la respuesta necesitamos diferenciar entre dos conceptos que tienden a confundirse:

En un documento HTML/XML los elementos que lo componen se declaran entre los símbolos < y >, es lo que llamamos generalmente etiquetas. Estos elementos pueden contener otros elementos dentro, en el cuerpo (body), pero también pueden tener atributos:

<mi-etiqueta atributo1="valor1">
  <otra-etiqueta />
</mi-etiqueta>

Cuando trabajas con un documento HTML/XML en Javascript, lo que generalmente haces es trabajar con su DOM: una representación de ese documento donde cada elemento es un objeto. Por tanto, cada atributo de un elemento se mapea a una propiedad de un objeto. Podríamos decir que el documento HTML se usa para inicializar el árbol DOM.

Por tanto tenemos un documento donde hay elementos con atributos y un árbol donde hay objetos con propiedades.

Entonces, ¿cuál es la diferencia real entre atributos y propiedades? Veamos un ejemplo en funcionamiento:

const elemento = document.getElementById("identificador");
console.log("atributo href", elemento.getAttribute("href"));
console.log("propiedad href:", elemento.href);
console.log("propiedad class:", elemento.class);
console.log("propiedad className:", elemento.className);
 console.log("atributo style", elemento.getAttribute("style"));
console.log("propiedad style:", elemento.style);
<a id="identificador" href="/url" class="clase1 clase2" style="border:solid black 1px">Texto</a>

Como puedes ver, hay cierto "procesamiento" de los valores de los atributos. Y, aunque en general cualquier cambio en las propiedades se refleja en los atributos y viceversa (usando .setAttribute(...)), esto no es 100% así, como vamos a ver:

Frameworks como Angular usan un truco para manejar los estilos de cada componente de manera individual sin riesgo de afectar a otras partes del documento. Imagina que definimos un componente que está compuesto de div y queremos que tenga el fondo negro:

div {
  background-color: black;
  color: yellow;
}
<div>
Mi componente 1
</div>

Ahora, sin saber que ese componente existe, otro desarrollador crea para la misma página otro que quiere con fondo blanco. Los estilos colisionarían! La solución es usar atributos "inventados" con valores aleatorios que se generan para cada componente para añadir una mayor especifidad a la regla de CSS. En este caso, un cambio de atributos afecta a los estilos pero no pasa así con las propiedades:

const tres= document.getElementById("tres");

//no afecta al estilo
tres.componente1_3tt34="1";

setTimeout(() => {
  //afecta al estilo a los dos segundos
  tres.setAttribute("componente1_3tt34", "1");
}, 2000);
div[componente1_3tt34] {
  background-color: black;
  color: yellow;
}

div[componente2_a9df] {
  background-color: white;
  color: blue
}
div {
  width: 50%;
  height: 50px;
}
<div componente1_3tt34>
Mi componente 1
</div>

<div componente2_a9df>
Mi componente 2
</div>

<div id="tres">
Mi componente 3
</div>

0

¿Cuál es la diferencia?

Creo que la diferencia es notoria, la diferencia entre usar getAttribute a usar .type es que con getAttribute puedes especificar no solo el type, si no también class id name, entre otras. Con element.type solo logras obtener el type del elemento.

¿Cuál es más recomendable?

Supongo que es a tu necesidad, si solo quieres el type y deseas ahorrar código, puedes usar element.type, o si quieres saber la clase o id del elemento al que pasarás una función, puedes usar element.getAttribute().

He aquí una pequeña demostración de cada una:

var div1 = document.querySelector(".div1").getAttribute('class');
var div2 = document.querySelector(".input1").type;

console.log(div1)
console.log(div2)
 <div class="div1 class" name="divname" id="div1id">SOY EL DIV 1</div>
<br>
<input type="text" class="input1" id="input1" value="SOY EL INPUT1">

Espero haber solucionado tu duda.

1
  • Creo que la pregunta realmente es ¿Cuál es la diferencia entre element.getAttribute("<nombre_del_atributo>") y element.<nombre_del_atributo> Commented el 17 abr. 2022 a las 11:07

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.