Encontre o elemento por conteúdo usando JavaScript

Ao lidar com os dados a granel, pode haver a possibilidade de ambiguidade na localização do elemento em relação ao conteúdo contido enquanto o acessava. Nesse caso, verificar cada um dos elementos se torna desafiador. Por exemplo, integrando o elemento com um pedaço particular de conteúdo. Em tais situações, encontrar elementos por conteúdo usando JavaScript ajuda a acessar os dados convenientemente.

Este blog discutirá as abordagens para encontrar elementos por conteúdo usando JavaScript.

Como encontrar elementos por conteúdo usando JavaScript?

Para encontrar elementos por conteúdo usando JavaScript, as seguintes abordagens estão em combinação com o “QuerySelectorAll ()”Método e o“TextContent" propriedade:

• ““inclui ()”Método.
• ““de()" e "corresponder()" métodos.

Abordagem 1: Encontre o elemento por conteúdo em javascript usando o método ()

O "QuerySelectorAll ()”O método busca todos os elementos que correspondem a um (s) seletor (s) CSS e retorna uma lista de nós. Enquanto o conteúdo do texto fornece o conteúdo do texto do nó específico, e o método inclui () retorna “verdadeiro”Se a string especificada estiver incluída em uma string específica.

Essas abordagens podem ser aplicadas em combinação para acessar o “div”Elemento, acesse o texto incluído e anexe o elemento a uma matriz nula na condição satisfeita.

Sintaxe

documento.QuerySelectorAll (seletores)

Na sintaxe dada:

• ““Seletores”Corresponde a um ou mais de um seletor CSS.

corda.Inclui (valor)

Aqui, o método inclui () procurará o dado “valor"No associado"corda”.

Exemplo

Vamos passar pela seguinte demonstração:

Linux Dica

Execute as etapas a seguir, conforme fornecido no snippet de código acima:

• Na primeira etapa, especifique o “div”Elemento com o conteúdo declarado em forma de texto.
• No código JS, inicialize o valor da string que precisa ser correspondido para o conteúdo de texto no “div" elemento.
• Depois disso, declare uma matriz vazia chamada “incluir”.
• Na próxima etapa, aplique o “QuerySelectorAll ()”Método e o“para de”Faça um loop para buscar o“div”Elemento por tag e itera através dele, respectivamente.
• Agora, aplique o “TextContent”Propriedade e a“inclui ()”Método em combinação para verificar se o valor da string inicializado está incluído no“div" elemento.
• Nesse caso, o elemento será anexado ao criado “nulo”Array através da“empurrar()”Método.

Saída

Da saída acima, é evidente que o elemento é empurrado para a matriz na condição satisfeita.

Abordagem 2: Encontre o elemento por conteúdo em JavaScript usando a matriz.de () e match () métodos

O "Variedade.de()”O método retorna uma matriz de um objeto com o comprimento da matriz como seu parâmetro. O "corresponder()”Método corresponde a uma string com uma expressão regular. Esses métodos podem ser implementados da mesma forma para acessar o elemento combinando o conteúdo do valor de string específico com o conteúdo de texto do elemento.

Sintaxe

Variedade.de (objeto, mapa, valor)

Na sintaxe acima mencionada:

• ““objeto”Aponta para o objeto a ser convertido em uma matriz.
• ““mapa”Corresponde à função do mapa que precisa ser mapeada em cada item.
• ““valor”É o valor a ser utilizado como“ isto ”para a função de mapa.

corda.Match (Match)

Na sintaxe dada:

• ““corresponder”Refere -se ao valor necessário para ser pesquisado.

Exemplo

Vamos visão geral do exemplo abaixo:

Este é o material relacionado a JavaScript

Execute as etapas a seguir nas linhas de código acima:

• Da mesma forma, inclua o “

  " elemento.

• No código JavaScript, da mesma forma, inicialize o valor da string declarado.
• Na próxima etapa, aplique o “de()”Método com o“QuerySelectorAll ()”Método como seu parâmetro, que buscará o“

  ”Elemento por sua etiqueta, e o método anterior converterá o resultado em uma matriz.

• Depois disso, inicialize um “nulo" variedade. Além disso, aplique o “encontrar()”Método para iterar através da matriz retornou na etapa anterior.
• O "TextContent”Propriedade e a“corresponder()”O método corresponderá ao valor da sequência especificada com o texto contido no elemento acessado.
• Sobre a condição satisfeita, o “

  ”O elemento será anexado à matriz nula criada, conforme discutido antes.

Saída

A saída acima indica que o requisito desejado é atendido.

Conclusão

O combinado “QuerySelectorAll ()”Método e o“TextContent”A propriedade pode ser aplicada com o“inclui ()”Método ou“Variedade.de()" e "corresponder()”Métodos para encontrar elementos por conteúdo usando JavaScript. Este tutorial explicou como encontrar elementos por conteúdo usando JavaScript com a ajuda de diferentes exemplos.