Esta postagem explicará o uso de atributos de dados em JavaScript.
Como usar atributos de dados em JavaScript?
Em JavaScript, o “ dados ”Atributos são usados para armazenar informações extras que não são exibidas na página da web. Essas informações podem ser escritas, acessadas, lidas e alteradas dinamicamente de acordo com as necessidades do usuário. Esta seção executou a tarefa discutida de forma prática em atributos de dados.
Sintaxe
< dados do elemento -*= 'algum valor' >
Na sintaxe acima:
- “ elemento ”representa o elemento HTML no qual o atributo data é usado.
- “ dados-* ”denota os atributos de dados múltiplos (*) começando com o prefixo (data-), ou seja, palavra-chave de dados seguida por um hífen.
- algum valor: Ele especifica o valor do atributo de dados.
Agora, use a sintaxe acima para criar um atributo de dados.
Criar atributos de dados
< ID da div = 'meuDiv' dados - nome = 'Alvin' dados - idade = '40' dados - gênero = 'macho' divisão >O código HTML de uma linha declarado cria o seguinte “ nome dos dados ”, “ era dos dados ', e a ' gênero de dados ”atributos dentro do elemento “div” cujo id é “myDiv”.
Vamos ler/acessar os atributos dos dados criados.
Exemplo 1: Ler/acessar atributo de dados usando a propriedade “dataset”
Este exemplo aplica a propriedade “dataset” para ler/acessar atributos de dados específicos ou todos.
Primeiro, olhe para o “ botão ”Elemento que chama o“ jsFunc() ”Quando está associado“ ao clicar ”O evento é acionado ao clicar no botão:
< botão ao clicar = 'jsFunc()' > Atributo de dados de acesso botão >Agora, vá para a definição “jsFunc()”:
< roteiro >função jsFunc ( ) {
const elemento = documento. getElementById ( 'meuDiv' ) ;
console. registro ( elemento. conjunto de dados ) ;
}
roteiro >
Nas linhas de código acima:
- O ' jsFunc() ” primeiro declara uma variável “elem” que aplica o “ document.getElementById() ”Método para acessar o elemento div adicionado por meio de seu id “myDiv”.
- Em seguida, ele usa o “ console.log() ”método que usará o“ conjunto de dados ”Propriedade para acessar os atributos de dados do elemento div acessado e exibi-los no console da web.
Saída
Pressione F12 para abrir o console web:
Pode-se observar que ao clicar no botão indicado, o console mostra um “ DOMStringMap ”Contendo todos os atributos de dados do elemento div.
Acesse valor específico
Se o usuário quiser acessar o atributo de dados específico, especifique seu nome com a propriedade “dataset” assim:
< roteiro >função obter ( ) {
const elemento = documento. getElementById ( 'meuDiv' ) ;
console. registro ( elemento. conjunto de dados . nome ) ;
}
roteiro >
Neste momento, os atributos de dados “nome” são acessados usando o botão “ conjunto de dados ' propriedade.
Saída
Pode-se observar que o console mostra apenas o valor dos atributos de dados especificados ao clicar no botão.
Exemplo 2: Ler/acessar atributo de dados usando o método “getAttribute()”
Este exemplo usa o método “getAttribute()” para ler/acessar os atributos de dados.
Neste cenário, o elemento botão do primeiro exemplo também está incluído:
< botão ao clicar = 'jsFunc()' > Atributo de dados de acesso botão >Vamos ver a funcionalidade do método “getAttribute()”:
< roteiro >função jsFunc ( ) {
const elemento = documento. getElementById ( 'meuDiv' ) ;
console. registro ( elemento. getAttribute ( 'nome dos dados' ) ) ;
console. registro ( elemento. getAttribute ( 'era dos dados' ) ) ;
console. registro ( elemento. getAttribute ( 'gênero de dados' ) ) ;
}
roteiro >
No trecho de código acima:
- A variável “elem” aplica o “ document.getElementById() ”Método para acessar o elemento div adicionado usando seu id “myDiv”.
- A seguir, o “ console.log() ”O método usa o“ getAtributo() ”Método para obter o valor do atributo “data” especificado do elemento div obtido e, em seguida, exibi-lo no console da web.
- A mesma tarefa é executada para acessar os atributos de dados especificados restantes.
Observação: O método “getAttribute()” especifica o atributo de dados com o prefixo “data” seguido por um hífen (-), ou seja, (data-) que não requer ao usar a propriedade “dataset()”.
Saída
A saída acima exibe todos os valores de atributos de dados especificados ao clicar no botão.
Exemplo 3: Escreva um atributo de dados usando a propriedade “dataset”
Este exemplo grava os atributos de dados usando a propriedade “dataset”.
O conteúdo do elemento botão é alterado de acordo com o cenário atual:
< botão ao clicar = 'jsFunc()' > Atributo de gravação de dados botão >Agora, escreva o novo atributo data no elemento div adicionado:
< roteiro >função jsFunc ( ) {
const elemento = documento. getElementById ( 'meuDiv' ) ;
elemento. conjunto de dados . eu ia = 'pessoa'
console. registro ( elemento. conjunto de dados ) ;
}
roteiro >
No bloco de código acima:
- O ' conjunto de dados ”propriedade grava um novo nome de atributo de dados “id” com um valor de string especificado.
- A seguir, o “ conolse.log() ”usa a propriedade “dataset” para exibir a interface “DOMStringMap” contendo o atributo de dados recém-escrito no console da web.
Saída
Aqui, o console exibe “DOMStringMap” contendo o novo atributo de dados “id” escrito usando a propriedade “dataset”.
Exemplo 4: Atualizar valor do atributo de dados
Este exemplo atualiza o valor existente de um atributo de dados específico com a ajuda da propriedade “dataset”.
O texto do elemento do botão é alterado de acordo com o cenário fornecido:
< botão ao clicar = 'jsFunc()' > Atualizar atributo de dados botão >Agora, vá para a seção JavaScript:
< roteiro >função jsFunc ( ) {
const elemento = documento. getElementById ( 'meuDiv' ) ;
elemento. conjunto de dados . nome = 'John'
console. registro ( elemento. conjunto de dados . nome ) ;
}
roteiro >
No bloco de código acima, o valor do atributo de dados “nome” especificado é atualizado com a ajuda do “ conjunto de dados ' propriedade.
Saída
O console mostra o valor atualizado dos atributos de dados especificados ao clicar no botão.
Exemplo 5: Excluir atributo de dados
Este exemplo exclui o atributo de dados específico utilizando a palavra-chave “delete”.
O texto do elemento do botão é alterado conforme o requisito:
< botão ao clicar = 'jsFunc()' > Excluir atributo de dados botão >Agora, siga o bloco de código JavaScript:
< roteiro >função jsFunc ( ) {
const elemento = documento. getElementById ( 'meuDiv' ) ;
excluir elemento. conjunto de dados . idade ;
console. registro ( elemento. conjunto de dados . idade ) ;
}
roteiro >
O trecho de código acima especifica o “ excluir ” com a propriedade “dataset” para excluir o atributo de dados acessado.
Saída
Observa-se que o console mostra “ indefinido ”em um clique de botão que verifica claramente se o atributo de dados acessado foi excluído.
Conclusão
Em JavaScript, os atributos de dados podem ser usados de várias maneiras, como leitura, acesso, gravação, atualização e exclusão de acordo com os requisitos. Todas essas tarefas podem ser executadas com a ajuda do “ conjunto de dados ' propriedade. Porém, o usuário também pode acessar o atributo de dados um por um com a ajuda do “ getAtributo() ”Método. Este post explicou de forma prática o uso de atributos de dados em JavaScript.