El atributo y la propiedad del elemento DOM son fáciles de mezclar y no se pueden distinguir. Los dos son cosas diferentes, pero los dos están estrechamente relacionados. Muchos nuevos amigos, incluido yo en el pasado, a menudo no lo entienden.
El atributo se traduce al término chino "características", y la propiedad se traduce al término "atributo" chino. Del significado literal de los chinos, de hecho hay una pequeña diferencia. Hablemos primero sobre el atributo.
El atributo es un nodo de características. Cada elemento DOM tiene un atributo de atributo de atributos correspondiente para almacenar todos los nodos de atributos. Atributos es un contenedor de una clase de matriz. Para ser precisos, es Namenodemap. En resumen, es un contenedor similar a una matriz, pero no es lo mismo que una matriz. Cada índice numérico de atributos almacena un nodo de atributo en forma de un par de valores de nombre (nombre = "valor").
Copie el código de la siguiente manera: <div id = "box" gameId = "880"> Hola </div>
El código HTML del elemento div anterior incluye clase, ID y GameId personalizado. Estas características se almacenan en atributos, similar a la siguiente forma:
Copie el código de la siguiente manera: [, id = "box", gameId = "880"]
Puede acceder al nodo de atributo como este:
La copia del código es la siguiente:
var elem = document.getElementById ('box');
console.log (elem.attributes [0] .name); // clase
console.log (elem.attributes [0] .Value); // caja
Sin embargo, IE6-7 almacena muchas cosas en atributos, y el método de acceso anterior es diferente de los resultados de retorno del navegador estándar. Por lo general, debe obtener un nodo de atributo y usar el método getAttribute directamente:
Copie el código de la siguiente manera: console.log (elem.getAttribute ('gameId')); // 880
Para establecer un nodo de atributo para usar el método SetAttribute, use RemoveAttribute para eliminar:
La copia del código es la siguiente: Elem.SetAttribute ('testAttr', 'testVal');
console.log (elem.removeattribute ('gameId')); // indefinido
Los atributos se actualizarán dinámicamente a medida que los nodos de atributos se agregan o eliminen.
La propiedad es una propiedad. Si el elemento DOM se considera un objeto de objeto ordinario, la propiedad es una propiedad almacenada en el objeto en forma de un par de valores de nombre (nombre = "valor"). Es mucho más fácil agregar y eliminar propiedades, y no es diferente de los objetos ordinarios:
La copia del código es la siguiente:
elem.gameId = 880; // Agregar
console.log (elem.gameid) // get
Eliminar elem.gameid // Eliminar
La razón por la cual el atributo y la propiedad son fáciles de mezclar es que muchos nodos de atributos tienen un atributo de propiedad correspondiente, como la ID y la clase del elemento DIV anterior son atributos y propiedades correspondientes, a las que se puede acceder y modificar sin importar qué método se use.
La copia del código es la siguiente:
console.log (elem.getAttribute ('id')); // caja
console.log (elem.id); // caja
elem.id = 'hola';
console.log (elem.getAttribute ('id')); // Hola
Pero para nodos de atributo personalizados o propiedades personalizadas, los dos no tienen nada que ver entre sí.
La copia del código es la siguiente:
console.log (elem.getAttribute ('gameId')); // 880
console.log (elem.gameId); // indefinido
elem.areaid = '900';
console.log (elem.getAttribute ('AreaId')) // nulo
Para IE6-7, no hay distinción entre atributo y propiedad:
La copia del código es la siguiente:
console.log (elem.getAttribute ('gameId')); // 880
console.log (elem.gameId); // 880
elem.areaid = '900';
console.log (elem.getAttribute ('AreaId')) // 900
Muchos novatos probablemente caen en este pozo fácilmente.
Algunos nodos de atributos comunes de los elementos DOM tienen atributos de propiedad correspondientes. Lo que es más especial es algunas propiedades con el valor del tipo booleano, como algunos elementos de forma:
La copia del código es la siguiente:
<input type = "radio" checked = "checked" id = "Raido">
var radio = document.getElementById ('radio');
console.log (radio.getAttribute ('checked')); // comprobado
console.log (radio.ecked); // verdadero
Para estos nodos de atributos especiales, solo si este nodo existe, el valor de la propiedad correspondiente es verdadero, como:
La copia del código es la siguiente:
<input type = "radio" checked = "anything" id = "Raido">
var radio = document.getElementById ('radio');
console.log (radio.getAttribute ('checked')); // cualquier cosa
console.log (radio.ecked); // verdadero
Finalmente, para distinguir mejor entre el atributo y la propiedad, se puede resumir básicamente que los nodos de atributos son visibles en el código HTML, y la propiedad es solo un atributo de par de valores de nombre ordinario.
La copia del código es la siguiente:
// tanto GameId como ID son nodos de atributos
// ID también se puede acceder y modificar a través de la propiedad
<div gameId = "880" id = "box"> hola </div>
// AreaId es solo propiedad
Elem.areaid = 900;