Compreendendo as relações entre atributos HTML e propriedades do objeto DOM

Resumo : neste tutorial, você aprenderá as relações entre atributos HTML e propriedades do objeto DOM.

Quando o navegador carrega uma página HTML , ele gera os objetos DOM correspondentes com base nos nós DOM do documento.

Por exemplo, se uma página contiver o seguinte inputelemento:

<input type="text" id="username">Linguagem de código:  JavaScript  ( javascript )

O navegador da web irá gerar um HTMLInputElementobjeto.

O inputelemento possui dois atributos:

• O typeatributo com o valor text.
• O idatributo com o valor username.

O objeto gerado HTMLInputElementterá as propriedades correspondentes:

• O input.typecom o valor text.
• O input.idcom o valor username.

Em outras palavras, o navegador da web converterá automaticamente atributos de elementos HTML em propriedades de objetos DOM.

No entanto, o navegador web converte apenas os atributos padrão nas propriedades do objeto DOM. Os atributos padrão de um elemento estão listados na especificação do elemento.

O mapeamento de propriedades de atributos nem sempre é um para um. Por exemplo:

<input type="text" id="username" secured="true">Linguagem de código:  JavaScript  ( javascript )

Neste exemplo, the securedé um atributo não padrão:

let input = document.querySelector('#username');
console.log(input.secured); // undefinedLinguagem de código:  JavaScript  ( javascript )

Métodos de atributos

Para acessar atributos padrão e não padrão, use os seguintes métodos:

• element.getAttribute(name)– obter o valor do atributo
• element.setAttribute(name, value)– defina o valor do atributo
• element.hasAttribute(name)– verificar a existência de um atributo
• element.removeAttribute(name)– remover o atributo

elemento.atributos

A element.attributespropriedade fornece uma coleção ativa de atributos disponíveis em um elemento específico. Por exemplo:

let input = document.querySelector('#username');

for(let attr of input.attributes) {
    console.log(`${attr.name} = ${attr.value}` )  
}Linguagem de código:  JavaScript  ( javascript )

Saída:

type = text
id = username
secure = trueLinguagem de código:  JavaScript  ( javascript )

Observe que element.attributesé um NamedNodeMap, não um Array, portanto, não possui métodos de Array.

Sincronização de propriedade de atributo

Quando um atributo padrão é alterado, a propriedade correspondente é atualizada automaticamente com algumas exceções e vice-versa.

Suponha que você tenha o seguinte inputelemento:

<input type="text" id="username" tabindex="1">Linguagem de código:  JavaScript  ( javascript )

O exemplo a seguir ilustra que a alteração do tabindexatributo é propagada para a tabIndexpropriedade e vice-versa:

let input = document.querySelector('#username');

// attribute -> property
input.setAttribute('tabindex', 2);
console.log(input.tabIndex);  // 2


// property -> attribute
input.tabIndex = 3;
console.log(input.getAttribute('tabIndex')); // 3Linguagem de código:  JavaScript  ( javascript )

O exemplo a seguir mostra que quando o valueatributo muda, isso se reflete na valuepropriedade, mas não o contrário:

let input = document.querySelector('#username');

// attribute -> property: OK
input.setAttribute('value','guest');
console.log(input.value);  // guest


// property -> attribute: doesn't change
input.value = 'admin';
console.log(input.getAttribute('value')); // guestLinguagem de código:  JavaScript  ( javascript )

As propriedades DOM são digitadas

O valor de um atributo é sempre uma string. Porém, quando o atributo é convertido na propriedade de um objeto DOM, o valor da propriedade pode ser uma string, um booleano, um objeto, etc.

O checkboxelemento a seguir possui o checkedatributo. Quando o checkedatributo é convertido em propriedade, é um valor booleano:

<input type="checkbox" id="chkAccept" checked> Accept

let checkbox = document.querySelector('#chkAccept');
console.log(checkbox.checked); // trueLinguagem de código:  JavaScript  ( javascript )

O seguinte mostra um inputelemento com o styleatributo:

<input type="password" id="password" style="color:red;with:100%">Linguagem de código:  JavaScript  ( javascript )

O styleatributo é uma string enquanto a stylepropriedade é um objeto:

let input = document.querySelector('#password');

let styleAttr = input.getAttribute('style');
console.log(styleAttr);

console.dir(input.style);Linguagem de código:  JavaScript  ( javascript )

Saída:

[object CSSStyleDeclaration]Linguagem de código:  JavaScript  ( javascript )

Os atributos data-*

Se você deseja adicionar um atributo personalizado a um elemento, você deve prefixá-lo com eg data-, data-securedporque todos os atributos que começam com data-são reservados para uso do desenvolvedor.

Para acessar data-*atributos, você pode usar a datasetpropriedade. Por exemplo, temos o seguinte divelemento com atributos personalizados:

<div id="main" data-progress="pending" data-value="10%"></div>Linguagem de código:  JavaScript  ( javascript )

A seguir mostramos como acessar os data-*atributos através da datasetpropriedade:

let bar = document.querySelector('#main');
console.log(bar.dataset);Linguagem de código:  JavaScript  ( javascript )

Saída:

[object DOMStringMap] {
    progress: "pending",
    value: "10%"
}Linguagem de código:  JavaScript  ( javascript )

Resumo

• Os atributos são especificados em elementos HTML.
• Propriedades são objetos DOM especificados.
• Os atributos são convertidos em propriedades respectivamente.
• Use a element.attributespropriedade para acessar atributos padrão e personalizados de um elemento.
• Use a element.datasetpropriedade para acessar os data-*atributos.