O atributo e a propriedade do elemento DOM são fáceis de misturar e não podem ser distinguidos. Os dois são coisas diferentes, mas os dois estão intimamente relacionados. Muitos novos amigos, inclusive eu no passado, geralmente não entendem.
O atributo é traduzido para o termo chinês "características" e a propriedade é traduzida para o termo "atributo" chinês. Do significado literal dos chineses, há de fato uma pequena diferença. Vamos falar sobre atributo primeiro.
atributo é um nó de recurso. Cada elemento DOM possui um atributo de atributos correspondentes para armazenar todos os nós de atributo. Atributos é um recipiente de uma classe de matriz. Para ser preciso, é Namenodemap. Em suma, é um contêiner semelhante a uma matriz, mas não é o mesmo que uma matriz. Cada índice numérico de atributos armazena um nó de atributo na forma de um par de nomes-valor (name = ”value”).
Copie o código da seguinte
O código HTML do elemento DIV acima inclui classe, ID e GameID personalizado. Esses recursos são armazenados em atributos, semelhante à seguinte forma:
Copie o código da seguinte forma: [, id = "Box", gameid = "880"]
Você pode acessar o nó do atributo assim:
A cópia do código é a seguinte:
var elem = document.getElementById ('caixa');
console.log (elem.attributes [0] .name); // aula
console.log (elem.attributes [0] .Value); // caixa
No entanto, o IE6-7 armazena muitas coisas em atributos, e o método de acesso acima é diferente dos resultados de retorno do navegador padrão. Normalmente, você precisa obter um nó de atributo e usar o método getAttribute diretamente:
Copie o código da seguinte forma: console.log (elem.getAttribute ('gameId')); // 880
Para definir um nó de atributo para usar o método SetAttribute, use removeattribute para excluir:
A cópia do código é a seguinte: elem.setAttribute ('testattr', 'testVal');
console.log (elem.removeattribute ('gameId')); // indefinido
Os atributos serão atualizados dinamicamente à medida que os nós de atributo são adicionados ou removidos.
propriedade é uma propriedade. Se o elemento DOM for considerado um objeto comum, a propriedade será uma propriedade armazenada no objeto na forma de um par de nomes-valor (name = ”valor”). É muito mais fácil adicionar e excluir propriedades, e não é diferente dos objetos comuns:
A cópia do código é a seguinte:
elem.gameid = 880; // Adicionar
console.log (elem.gameid) // get
exclua elem.gameid // excluir
A razão pela qual atributo e propriedade são fáceis de misturar é que muitos nós de atributos têm um atributo de propriedade correspondente, como o ID e a classe do elemento Div acima, são atributos e propriedades correspondentes, que podem ser acessadas e modificadas, independentemente do método usado.
A cópia do código é a seguinte:
console.log (elem.getAttribute ('id')); // caixa
console.log (elem.id); // caixa
elem.id = 'hello';
console.log (elem.getAttribute ('id')); // olá
Mas para nós de atributos personalizados ou propriedades personalizadas, os dois não têm nada a ver um com o outro.
A cópia do código é a seguinte:
console.log (elem.getAttribute ('gameId')); // 880
console.log (elem.gameId); // indefinido
elem.areaid = '900';
console.log (elem.getAttribute ('AreaId')) // NULL
Para o IE6-7, não há distinção entre atributo e propriedade:
A cópia do código é a seguinte:
console.log (elem.getAttribute ('gameId')); // 880
console.log (elem.gameId); // 880
elem.areaid = '900';
console.log (elem.getAttribute ('AreaId')) // 900
Muitos novatos provavelmente caem neste poço facilmente.
Alguns nós de atributos comuns dos elementos DOM têm atributos de propriedade correspondentes. O mais especial são algumas propriedades com o valor do tipo booleano, como alguns elementos de formulário:
A cópia do código é a seguinte:
<input type = "Radio" checked = "checked" id = "Raido">
var radio = document.getElementById ('rádio');
console.log (radio.getAttribute ('verificado')); // verificado
console.log (Radio.Checked); // verdadeiro
Para esses nós de atributos especiais, somente se esse nó existir, o valor da propriedade correspondente é verdadeiro, como:
A cópia do código é a seguinte:
<input type = "Radio" checked = "qualquer coisa" id = "Raido">
var radio = document.getElementById ('rádio');
console.log (radio.getAttribute ('verificado')); // qualquer coisa
console.log (Radio.Checked); // verdadeiro
Finalmente, a fim de distinguir melhor entre atributo e propriedade, pode-se basicamente resumir que os nós de atributo sejam visíveis no código HTML, e a propriedade é apenas um atributo comum de par de nomes-valor.
A cópia do código é a seguinte:
// Ambos GameID e ID são nós de atributo
// id também pode ser acessado e modificado por meio de propriedade
<div gameid = "880" id = "caixa"> Olá </div>
// AreaID é apenas uma propriedade
elem.areaid = 900;