HTML es el lenguaje estándar para crear documentos destinados a ser mostrados en navegadores web. Es muy habitual confundirse con atributos y propiedades al realizar la manipulación de objetos DOM en JavaScript. Antes de conocer las diferencias, primero definamos el modelo de objeto del documento.
DOM: Es el acrónimo de Document Object Model . Cuando el navegador analiza su código HTML, crea un Node DOM correspondiente. Se accede a las propiedades HTML desde este objeto de Node.
En términos más simples, DOM es una API para HTML, y usamos lenguajes como JavaScript o marcos como React, Vue.js para acceder y manipular el HTML usando los objetos DOM correspondientes.
Notas:
- Algunas propiedades DOM no tienen atributos correspondientes.
- Algunos atributos HTML no tienen propiedades correspondientes.
- Algunos atributos HTML, como ‘clase’, asignación 1:1 a propiedades.
Echemos un vistazo a algunos ejemplos rápidos para demostrar las diferencias entre atributos y propiedades.
Ejemplo: considere el siguiente fragmento de código HTML.
html
<!DOCTYPE html>
<html>
<body>
<input id="input" type="number"
value="Phone Number:">
<p id="display"></p>
<script>
var element = document.getElementById("input");
// Getting the property, returns "Phone Number:"
window.alert(element.getAttribute("value"));
element.value = 1234;
var x = element.value;
// Getting the attribute, returns "1234"
document.getElementById("display").innerHTML
= "Value Attribute: " + x;
</script>
</body>
</html>
Producción:
Ahora, consideremos que el usuario ingresa «1234», luego element.getAttribute («valor») devolverá «Número de teléfono:» porque lo proporcionamos como el valor inicial de este atributo. Pero element.value devolverá «1234».
Por lo tanto, el atributo de valor tiene el contenido de texto inicial proporcionado por el desarrollador en el código fuente HTML porque la propiedad de valor refleja el contenido de texto actual dentro del cuadro de entrada (proporcionado por el usuario en este caso).
Ahora que tenemos una idea básica sobre la diferencia, profundicemos y aprendamos más diferencias.
Atributo: los atributos están definidos por HTML y se utilizan para personalizar una etiqueta.
html
<!DOCTYPE html>
<html>
<body>
<p>
Click the button the display
the number of attributes
associated with it.
</p>
<button id="AttributeDemo"
onclick="myFunction()">
Try it
</button>
<p id="display"></p>
<script>
function myFunction() {
var Attrdemo = document.getElementById(
"AttributeDemo").attributes.length;
document.getElementById(
"display").innerHTML = Attrdemo;
}
</script>
</body>
</html>
El resultado es 2 porque los dos atributos son: id=”AttributeDemo” y onclick=”myFunction()”.
Nota: El fragmento de código document.getElementsById(‘AttributeDemo’).attributes devuelve una colección de los atributos del Node especificado, como un objeto NamedNodeMap. Para acceder a los Nodes, podemos usar el método de indexación genérico. Reemplace la siguiente línea en el fragmento de código anterior.
javascript
var Attrdemo = document.getElementById( 'AtrributeDemo').attributes[1].name;
Producción:
onclick
Los atributos tienen un tipo de datos de string. Entonces, sin importar el valor del atributo, siempre devolverá una string.
Ejemplo:
document.getElementById('AtrributeDemo').getAttribute('id')
Producción:
AttributeDemo
Propiedad: A diferencia de los atributos, que se definen en HTML, las propiedades pertenecen al DOM. Dado que DOM es un objeto en JavaScript, podemos obtener y establecer propiedades.
javascript
<!DOCTYPE html>
<html>
<body>
<p>
Click the "display" button for
the number of attributes
associated with it.
</p>
<button id="AttributeDemo"
onclick="myFunction()">
Try it
</button>
<p id="display"></p>
<script>
function myFunction() {
// Setting the property
// 'geeksforgeeks' to a number
document.getElementById('AttributeDemo')
.geeksforgeeks = 777;
// Getting the property, returns 1
var x = document.getElementById(
'AttributeDemo').geeksforgeeks;
document.getElementById(
"display").innerHTML = x;
}
</script>
</body>
</html>
Producción:
Los atributos predeterminados (no definidos por el usuario) cambian cuando cambia la propiedad correspondiente y viceversa.
html
<!DOCTYPE html>
<html>
<body>
<p>
Click the button the display the
current className & the edited
className
</p>
<button id="demo1" class="button"
onclick="Function1()">
Click Me
</button>
<p id="displayCurrent"></p>
<p id="diplayEdited"></p>
<script>
function Function1() {
var div = document.getElementById("demo1");
// Returns "button"
window.alert("Current Class : "
+ div.getAttribute("class"));
div.setAttribute("class", "GeeksForGeeks");
// Returns : "GeeksForGeeks"
window.alert("Edited Class : "
+ div.getAttribute("class"));
}
</script>
</body>
</html>
Producción:
Nota:
- Los atributos no personalizados (como id, clase, etc.) tienen una asignación 1:1 a las propiedades.
- Usamos ‘className’ para acceder (obtener o establecer) la propiedad ‘clase’ porque ‘clase’ es una palabra clave reservada en JavaScript.
- Los atributos que tienen un valor predeterminado definido permanecen constantes cuando cambia la propiedad correspondiente.
Diferencia entre atributos HTML y propiedades DOM:
| Atributo | Propiedad |
|---|---|
| Los atributos están definidos por HTML. | Las propiedades están definidas por el DOM. |
| El valor de un atributo es constante. | El valor de una propiedad es variable. |
| Estos se utilizan para inicializar las propiedades DOM. Después de la inicialización, el trabajo finaliza. |
No hay tal trabajo definido. |
Publicación traducida automáticamente
Artículo escrito por preritpathak y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA