1. Definición
Propiedad: Propiedad, todos los elementos HTML están representados por el tipo HTMLELEMENT. El tipo de htmlelement hereda directamente del elemento y agrega algunos atributos. Los atributos agregados corresponden a cada elemento HTML con las siguientes 5 características estándar: ID, Título, Lang, Dir, ClassName. Un nodo DOM es un objeto, por lo que puede agregar propiedades y métodos personalizados como otros objetos JavaScript. El valor de la propiedad puede ser cualquier tipo de datos, que sea confidencial, y la propiedad personalizada no aparecerá en el código HTML, sino que solo existe en JS.
Atributo: la característica, diferente de la propiedad, el atributo solo puede ser una cadena, la caso insensible, aparece en InnerHTML, y todos los atributos se pueden enumerar a través de atributos de matriz de clases.
2. Similitudes
Las propiedades DOM estándar se sincronizan con atributos. Se agrega un atributo reconocido (no customado) al objeto DOM como propiedad. Por ejemplo, ID, alineación, estilo, etc., en este momento, las propiedades se pueden operar mediante propiedades operativas o métodos DOM como getAttribute () que usan las características de operación. Sin embargo, el nombre del atributo pasado a getAttribute () es el mismo que el nombre de atributo real. Por lo tanto, al obtener el valor característico de la clase, debe pasar en "clase".
3. Diferencias
1). Para algunas características estándar, hay una diferencia en los valores obtenidos por GetAttribute y Point (.). Como HREF, SRC, Value, Style, OnClick y otros manejadores de eventos.
2) .href: GetAttribute obtiene el valor real de HREF, mientras que los puntos obtienen la URL completa, que tiene una diferencia de navegador.
La copia del código es la siguiente:
<script>
var a = document.body.children [0]
a.href = '/'
alerta ('atributo:' + a.getattribute ('href')) // '/'
alerta ('propiedad:' + a.href) // es decir: '/', otros: URL completa
</script>
El valor de SRC es similar al HREF, pero es decir, también devolverá una URL completa;
El valor del valor también tiene algunas propiedades incorporadas para la sincronización 'unidireccional' (unidireccional).
Por ejemplo, Input.Value Synchronize de Atribute (es decir, la propiedad obtiene la sincronización del atributo)
La copia del código es la siguiente:
<input type = "text" value = "markup">
<script>
var input = document.body.children [0];
input.SetAttribute ('valor', 'nuevo');
alerta (input.value); // 'nuevo', input.value cambió
alerta (input.getatrrioBute (valor)); // 'nuevo'
</script>
Pero el atributo no puede obtener la sincronización de la propiedad:
La copia del código es la siguiente:
<input type = "text" value = "markup">
<script>
var input = document.body.children [0];
input.Value = 'nuevo';
alerta (input.getAttribute ('valor')); // 'Markup', ¡no cambiado!
</script>
getAttribute obtiene el valor inicial, mientras que los puntos obtienen el valor inicial o el valor modificado .value. Por ejemplo, cuando el visitante ingresa ciertos caracteres, el atributo 'Valor' mantiene el valor original después de que se actualiza la propiedad. El valor original se puede usar para verificar si la entrada cambia o para restablecerla.
Para los controladores de eventos como Style y OnClick, el método GetAttribute devuelve una cadena cuando se accede, mientras que el DOT devuelve la función de control y controlador de eventos correspondientes.
Para la propiedad marcada en la entrada
La copia del código es la siguiente:
<script>
var input = document.body.children [0]
alerta (input.ecked) // Verdadero
alert (input.getAttribute ('checked')) // String vacío
</script>
getAttribute obtiene el valor que realmente está configurando. El punto devuelve un valor booleano.
Diferencias en la compatibilidad del navegador
1. En IE <9 navegadores, puede usar números DOT y getAttribute para acceder a propiedades personalizadas entre sí.
2. IE <8 (incluido IE8 IE7 Modo de compatibilidad), la propiedad y el atributo son los mismos. Debido a que el atributo no es sensible a la caja, en este caso, cuando se usa GetAttribute para acceder a la función, el navegador seleccionará el valor que aparece por primera vez.
La copia del código es la siguiente:
document.body.abba = 1 // Asignar propiedad (ahora puede leerla por getAttribute)
document.body.abba = 5 // Asignar propiedad con otro caso
// debe obtener una propiedad llamada 'ABBA' de manera insensible a los casos.
alerta (document.body.getAttribute ('abba')) // 1
Propiedad prioritaria
En aplicaciones reales, el 98% de las operaciones DOM utilizan propiedades.
Solo hay dos situaciones que requieren el uso de atributos
1. Personalice los atributos HTML porque no está sincronizado con la propiedad DOM.
2. Acceda a los atributos HTML incorporados, que no se pueden sincronizar desde la propiedad. Por ejemplo, el valor de valor de la etiqueta de entrada.