O DOM “ Lista de tokens ”Contém muitas propriedades ou métodos que podem ser acessados pelo usuário final de acordo com suas necessidades. As propriedades e métodos fornecidos por esta lista executam operações específicas nos conjuntos de dados fornecidos e retornam o resultado de acordo. É mais parecido com um array porque possui vários membros que podem ser selecionados por seu índice e, assim como um array, o primeiro índice é “ 0 ”. Mas você não pode usar métodos como “ pop()”, “push()” ou “join()” ”.
Este blog irá explicar o funcionamento de objetos HTML DOMTokenList por JavaScript.
Como trabalhar com objetos JavaScript HTML DOMTokenList?
O HTML DOMTokenList não é nada por si só e seu valor se deve apenas às propriedades e métodos que residem nele. Vamos visitar essas propriedades e métodos detalhadamente junto com a implementação adequada.
Método 1: Método Add()
O ' Adicionar ()” anexa ou atribui novas classes, propriedades ou tokens simples ao elemento selecionado. Sua sintaxe é declarada abaixo:
htmlElemento. adicionar ( um ou mais token )
Sua implementação é realizada através do seguinte código:
< cabeça >
< estilo >
.tamanho da fonte{
tamanho da fonte: grande;
}
.cor{
cor de fundo: azulcadete;
cor: fumaça branca;
}
< / estilo >
< / cabeça >
< corpo >
< h1 estilo = 'cor: azulcadete;' > Linux < / h1 >
< botão ao clicar = 'Ação()' > Adicionador < / botão >
< p > Pressione o botão acima para aplicar estilo < / p >
< divisão eu ia = 'selecionado' >
< p > Eu sou texto selecionado. < / p >
< / divisão >
< roteiro >
função ação() {
document.getElementById('selecionado').classList.add('fontSize', 'cor');
}
< / roteiro >
< / corpo >
A explicação do código acima é a seguinte:
- Primeiro, selecione duas classes CSS “ tamanho da fonte ” e “cor” e atribua-lhes propriedades CSS aleatórias como “ tamanho da fonte”, “cor de fundo” e “cor ”.
- A seguir, crie botões usando o “< botão >” tag que invoca o “ Ação ()” usando a função “ ao clicar ”ouvinte de evento.
- Além disso, crie um pai “ divisão ”elemento e atribua a ele um id de“ selecionado ”E insira dados fictícios dentro dele.
- Depois disso, defina o “ Ação ()”funciona e armazena a referência do elemento selecionado acessando seu id único.
- Por fim, use o “ lista de classes ”Propriedade para atribuir as classes e anexar o“ adicionar ()” método. Em seguida, passe as classes CSS entre parênteses deste método e ele aplicará essas classes ao elemento selecionado.
A saída após a compilação do código acima é gerada como:
O gif acima confirma que as classes CSS foram atribuídas a um elemento selecionado através do “ adicionar ()” método.
Método 2: Método Remove()
Este método remove a classe ou id específico de um ou mais elementos selecionados, conforme feito no código abaixo:
< cabeça >< estilo >
.tamanho da fonte {
Fonte- tamanho : grande;
}
. cor {
fundo- cor :cadeteazul;
cor : fumaça branca;
}
< / estilo >
< / cabeça >
< corpo >
< h1 estilo = 'cor: azulcadete;' > Linuxhint < / h1 >
< botão ao clicar = 'Ação()' >Adicionador< / botão >
< p >Pressione o botão acima para aplicar o estilo< / p >
< divisão eu ia = 'selecionado' aula = 'cor do tamanho da fonte' >
< p >eu sou Selecionado Texto .< / p >
< / divisão >
< roteiro >
função Ação ( ) {
documento.getElementById ( 'selecionado' ) .classList.remove ( 'cor' ) ;
}
< / roteiro >
< / corpo >
A descrição do código acima é a seguinte:
- Inicialmente, o código explicado no código acima é usado aqui como exemplo.
- Aqui, tanto o “ cor ' e ' tamanho da fonte ”as classes são atribuídas diretamente ao elemento selecionado.
- Depois disso, dentro do “ Ação ()” função que é invocada pelo “ ao clicar ”ouvinte de evento o“ remover ()” método de token é usado.
- Este método utiliza uma ou várias classes que serão removidas do elemento selecionado. No nosso caso, o “ cor ”A classe será removida do elemento HTML selecionado.
A saída para o código acima é exibida como:
A saída acima mostra que a classe CSS específica foi removida do elemento selecionado usando o método “remove()”.
Método 3: Método Toggle()
O ' alternar ()” é a combinação de ambos “ adicionar ()' e ' remover ()' métodos. Primeiro atribui a classe CSS fornecida ao elemento HTML selecionado e depois a remove de acordo com as ações do usuário.
< HTML >< cabeça >
< estilo >
.tamanho da fonte {
Fonte- tamanho : xx-grande;
}
. cor {
fundo- cor :cadeteazul;
cor : fumaça branca;
}
< / estilo >
< / cabeça >
< corpo >
< h1 estilo = 'cor: azulcadete;' > Linuxhint < / h1 >
< botão ao clicar = 'Ação()' >Adicionador< / botão >
< p >Pressione o botão acima para aplicar o estilo< / p >
< divisão eu ia = 'selecionado' >
< p >eu sou Selecionado Texto .< / p >
< / divisão >
< roteiro >
função Ação ( ) {
documento.getElementById ( 'selecionado' ) .classList.toggle ( 'tamanho da fonte' ) ;
}
< / roteiro >
< / corpo >
< / HTML >
Uma descrição do código acima é apresentada abaixo:
- O mesmo programa é usado na seção acima, apenas o “ alternar ()” é substituído pelo método “ remover ()” método.
Ao final da fase de compilação, a saída será a seguinte:
A saída mostra que a classe CSS específica está sendo adicionada e removida de acordo com a ação do usuário.
Método 4: Método Contém()
O ' contém ()” é usado para verificar a disponibilidade de classes CSS específicas sobre o elemento HTML e sua implementação é descrita abaixo:
< roteiro >função Ação ( ) {
deixe x = documento. getElementById ( 'selecionado' ) . lista de classes . contém ( 'tamanho da fonte' ) ;
documento. getElementById ( 'teste' ) . HTML interno = x ;
}
roteiro >
A parte HTML e CSS permanece a mesma. Somente no “< roteiro >”, o método “contains()” é aplicado sobre o elemento selecionado para verificar se o “ tamanho da fonte ”É aplicado a esse elemento ou não. Em seguida, o resultado é exibido na página web em um elemento HTML com um id “ teste ”.
Após a compilação do código acima, a página fica assim:
A saída mostra que o valor de “ verdadeiro ”é retornado, o que significa que a classe CSS específica é aplicada sobre o elemento HTML selecionado.
Método 5: Método Item()
O ' item ()” seleciona o token ou classe CSS de acordo com seu número de índice, começando em “ 0 ', como mostrado abaixo:
< corpo >< estilo h1 = 'cor: azulcadete;' > Linux h1 >
< botão ao clicar = 'Ação()' > Verificador botão >
< p > O CSS aula que é atribuído em primeiro lugar , é recuperado : p >
< identificação h3 = 'useCaso' aula = 'primeiroCls segundoCls terceiroCls' h3 >
< roteiro >
função Ação ( ) {
deixe demoList = documento. getElementById ( 'useCaso' ) . lista de classes . item ( 0 ) ;
documento. getElementById ( 'useCaso' ) . HTML interno = lista de demonstração ;
}
roteiro >
corpo >
Explicação do código acima:
- Primeiro, várias classes CSS são atribuídas ao nosso elemento selecionado com um id “ useCase ”E o método “action()” que é invocado através do “ ao clicar ”evento.
- Nesta função, o “ item ()” método com um índice de “ 0 ”é anexado ao elemento selecionado. O resultado é armazenado na variável “ lista de demonstração ”Que é então impresso na página da web usando o“ HTML interno ' propriedade.
Após o término da compilação, a saída fica assim:
A saída mostra o nome da classe CSS que se aplica inicialmente ao elemento selecionado e é recuperada.
Método 6: propriedade de comprimento
O ' comprimento ”Propriedade de tokenList retorna o número de elementos ou classes atribuídas que são aplicadas sobre o elemento selecionado. O processo de implementação é descrito abaixo:
< roteiro >função Ação ( ) {
deixe-os demolir = documento. getElementById ( 'useCaso' ) . lista de classes . comprimento ;
documento. getElementById ( 'useCaso' ) . HTML interno = demolir ;
}
roteiro >
No bloco de código acima:
- Primeiro o “ comprimento ”A propriedade está anexada ao“ lista de classes ”Propriedade para recuperar o número de classes atribuídas ao elemento selecionado.
- A seguir, o resultado da propriedade é armazenado na variável “ demolir ”que será exibido na página da web em um elemento com um id de“ useCase ”.
- O resto do código permanece o mesmo da seção acima.
A saída gerada após a compilação é indicada abaixo:
A saída retorna as classes aplicadas ao elemento.
Método 7: Método Substituir()
O ' substituir ()” é aquele que recebe pelo menos dois parâmetros e substitui o primeiro parâmetro pelo segundo parâmetro do elemento selecionado, conforme mostrado abaixo:
< roteiro >função Ação ( ) {
deixe demoList = documento. getElementById ( 'useCaso' ) . lista de classes . substituir ( 'tamanho da fonte' , 'cor' ) ;
}
roteiro >
Aqui, o CSS “ tamanho da fonte ”classe é substituída pelo CSS“ cor ”classe para um elemento com um id de“ useCase ”. O restante do código HTML e CSS permanece o mesmo das seções acima.
Depois de modificar o “ roteiro ”E compilando o arquivo HTML principal, a saída será semelhante a esta:
A saída mostra que a classe CSS específica foi substituída por outra classe.
Método 8: propriedade de valor
O ' valor ”A propriedade da lista de tokens recupera os valores necessários atribuídos ao elemento HTML selecionado. Quando ele é anexado ao lado de “ lista de classes ”propriedade, as classes atribuídas aos elementos selecionados são recuperadas, conforme demonstrado abaixo:
< roteiro >função Ação ( ) {
deixe demoVal = documento. getElementById ( 'useCaso' ) . lista de classes . valor ;
documento. getElementById ( 'imprimir' ) . HTML interno = demoVal ;
}
roteiro >
Descrição do trecho de código mencionado acima:
- Dentro de ' Ação ()” corpo da função, o “ valor ”A propriedade está anexada ao lado de“ lista de classes ”Propriedade para recuperar todas as classes atribuídas dos elementos HTML selecionados.
- A seguir, o resultado da propriedade acima é armazenado em uma variável “ demoVal ”E inserido sobre o elemento com um id de“print”.
Após o término da fase de compilação, a saída em uma página web é gerada da seguinte forma:
A saída mostra o nome das classes CSS que são aplicadas ao elemento selecionado.
Conclusão
O objeto HTML DOM TokenList é como um array que armazena vários métodos e propriedades que são usados para aplicar funcionalidades específicas ao elemento HTML fornecido. Alguns dos métodos mais importantes e amplamente utilizados fornecidos pelo TokenList são “ add()”, “remove()”, “toggle()”, “contém()”, “item()” e “replace() ”. As propriedades fornecidas pelo TokenList são “ comprimento ' e ' valor ”. Este artigo explicou o procedimento para trabalhar com o objeto JavaScript HTML DOMTokenList.