1. Definição
Propriedade: Propriedade, todos os elementos HTML são representados pelo tipo HTMLELEMENT. O tipo HTMLELEMENT herda diretamente do elemento e adiciona alguns atributos. Os atributos adicionados correspondem a cada elemento HTML com as 5 características padrão a seguir: ID, Title, Lang, Dir, ClassName. Um nó DOM é um objeto, para que possa adicionar propriedades e métodos personalizados, como outros objetos JavaScript. O valor da propriedade pode ser qualquer tipo de dados, que seja sensível ao caso, e a propriedade personalizada não aparecerá no código HTML, mas existe apenas no JS.
Atributo: Recurso, diferente da propriedade, o atributo pode ser apenas uma string, insensível a minúsculas, aparece no InnerHTML, e todos os atributos podem ser listados por meio de atributos de matriz de classe.
2. Similaridades
As propriedades DOM padrão são sincronizadas com atributos. Um atributo reconhecido (não custom) é adicionado ao objeto DOM como uma propriedade. Por exemplo, ID, alinhamento, estilo, etc., neste momento, as propriedades podem ser operadas pela propriedade operacional ou por métodos DOM, como getAttribute () que usam características de operação. No entanto, o nome do atributo aprovado para getAttribute () é o mesmo que o nome do atributo real. Portanto, ao obter o valor característico da classe, você deve passar na "classe".
3. Diferenças
1). Para algumas características padrão, há uma diferença nos valores obtidos pelo getAttribute e Point (.). Como HREF, SRC, Valor, estilo, OnClick e outros manipuladores de eventos.
2) .HREF: GetAttribute obtém o valor real do HREF, enquanto os pontos obtêm o URL completo, que tem uma diferença de navegador.
A cópia do código é a seguinte:
<Cript>
var a = document.body.Children [0]
a.href = '/'
alerta ('atributo:' + a.getAttribute ('href')) // '/'
alerta ('propriedade:' + a.href) // ou seja: '/', outros: URL completo
</script>
O valor do SRC é semelhante ao HREF, mas o IE também retornará um URL completo;
O valor do valor também possui algumas propriedades internas para a sincronização 'unidirecional' (unidirecional).
Por exemplo, input.value sincroniza do atributo (ou seja, a propriedade recebe a sincronização do atributo)
A cópia do código é a seguinte:
<input type = "text" value = "markup">
<Cript>
var input = document.body.children [0];
input.setAttribute ('value', 'novo');
alerta (input.value); // 'new', input.value mudou
alerta (input.getatrriobute (valor)); // 'novo'
</script>
Mas o atributo não pode obter sincronização da propriedade:
A cópia do código é a seguinte:
<input type = "text" value = "markup">
<Cript>
var input = document.body.children [0];
input.value = 'new';
alert (input.getAttribute ('value')); // 'marcação', não mudou!
</script>
GetAttribute obtém o valor inicial, enquanto os pontos obtêm o valor inicial ou o valor modificado. Por exemplo, quando o visitante entra em determinados caracteres, o atributo 'valor' mantém o valor original após a atualização da propriedade. O valor original pode ser usado para verificar se as alterações de entrada ou para redefini -lo.
Para manipuladores de eventos como Style e OnClick, o método GetAttribute retorna uma string quando acessado, enquanto o ponto retorna a função de objeto e manipulador de eventos correspondentes.
Para uma propriedade verificada na entrada
A cópia do código é a seguinte:
<Cript>
var input = document.body.children [0]
alerta (input.CHecked) // true
alert (input.getAttribute ('verificado')) // string vazia
</script>
getAttribute recebe o valor que você está realmente definindo. O ponto retorna um valor booleano.
Diferenças na compatibilidade do navegador
1. No IE <9 navegadores, você pode usar números de pontos e getattribute para acessar propriedades personalizadas entre si.
2. IE <8 (incluindo o modo de compatibilidade IE8 IE7), propriedade e atributo são os mesmos. Como o atributo não é sensível ao caso, neste caso, ao usar o GetAttribute para acessar o recurso, o navegador selecionará o valor que aparece pela primeira vez.
A cópia do código é a seguinte:
document.body.abba = 1 // Atribuir propriedade (agora pode lê -lo por getattribute)
document.body.abba = 5 // Atribuir propriedade com outro caso
// deve obter uma propriedade chamada 'ABBA' de maneira insensível ao caso.
alert (document.body.getAttribute ('abba')) // 1
Propriedade prioritária
Em aplicações reais, 98% das operações da DOM usam propriedades.
Existem apenas duas situações que exigem o uso de atributos
1. Personalize os atributos HTML porque não é sincronizado com a propriedade DOM.
2. Acesse os atributos HTML integrados, que não podem ser sincronizados a partir da propriedade. Por exemplo, o valor do valor da tag de entrada.