Este guia ilustrará como acessar e manipular a propriedade “textContent” do elemento HTML DOM em JavaScript.
Primeiro, dê uma olhada nos fundamentos da propriedade “textContent” do HTML DOM.
O que é a propriedade HTML DOM “textContent” em JavaScript?
O ' textoConteúdo ”É a propriedade integrada que define, recupera e modifica o texto de um elemento ou nó especificado, incluindo todos os seus descendentes. Os descendentes são elementos filhos como , , e muito mais que são usados para fins de formatação. Ao definir o texto usando a propriedade “textContent”, os descendentes do elemento alvo são completamente substituídos pelo novo texto.
Sintaxe (Definir conteúdo de texto)
A sintaxe básica para definir o texto de um elemento/nó usando o “ textoConteúdo ”propriedade está escrita abaixo:
elemento. textoConteúdo = texto | nó. textoConteúdo = texto
A sintaxe acima leva o desejado “ texto ”Como um valor que o usuário deseja definir para um elemento ou nó.
Sintaxe (obter conteúdo de texto)
A sintaxe generalizada para retornar o texto de um elemento ou nó por meio do “ textoConteúdo ”A propriedade é declarada aqui:
elemento. textoConteúdo | nó. textoConteúdoValor de retorno: O ' textoConteúdo ”propriedade retorna o“ texto ”de um elemento ou nó com espaçamento, mas sem suas tags HTML internas.
Agora use as sintaxes definidas acima de forma prática para acessar e manipular a propriedade “textContent”.
Como acessar e manipular a propriedade “textContent” do elemento HTML DOM em JavaScript?
Semelhante às propriedades “innerHTML” e “innerText”, o “ textoConteúdo ”A propriedade também permite aos usuários definir, acessar e modificar facilmente o texto do elemento desejado. Esta seção executa todas essas operações em um elemento usando os exemplos indicados abaixo.
Exemplo 1: Aplicando a propriedade “textContent” para acessar o texto do elemento/nó
Este exemplo aplica a propriedade “textContent” para retornar o texto de um determinado elemento ou nó incluindo todos os seus filhos.
Código HTML
< divisão eu ia = 'meuDiv' passar o mouse = 'getTexto()' estilo = 'borda: 3px preto sólido; largura: 400px; preenchimento: 5px 5px; margem: automático;' >< h1 > Primeiro título < / h1 >
< h2 > Segundo título < / h2 >
< h3 > Terceiro título < / h3 >
< h4 > Quarto título < / h4 >
< h5 > Quinto título < / h5 >
< h6 > Sexto Título < / h6 >
< / divisão >
Nas linhas de código HTML acima:
- O ' ”Tag com um id“myDiv”cria um elemento div que é estilizado com as seguintes propriedades: borda, largura, preenchimento (superior e inferior, esquerda e direita) e margem. Também anexa o “ passar o mouse ”evento que invoca o“ getText() ”Funciona quando o usuário passa o mouse sobre ele.
- Dentro do div, todas as tags de título especificadas (h1,h2,h3,h4,h5 e h6) inserem os elementos de título de acordo com seus níveis especificados.
Código JavaScript
< roteiro >
função getText ( ) {
era elem = documento. getElementById ( 'meuDiv' ) ;
alerta ( elemento. textoConteúdo ) ;
}
roteiro >No bloco de código JavaScript escrito acima:
- Defina uma função chamada “ getText() ”.
- Dentro desta função, a variável “elem” aplica o “ getElementById() ”Método para acessar o elemento div através de seu id.
- O ' alerta() ”O método cria uma caixa de alerta que usa o“ textoConteúdo ”Propriedade para retornar o texto do div pai junto com todos os seus dependentes.
Saída
A saída abaixo exibe uma caixa de alerta mostrando o conteúdo de texto do elemento div:
Exemplo 2: Aplicando a propriedade “textContent” para substituir um conteúdo de texto de elemento incluindo seus descendentes
Este exemplo mostra como a propriedade “textContent” substitui todos os filhos de um elemento enquanto modifica seu texto.
Código HTML
< Centro >
< identificação h1 = 'minha cabeça' ao clicar = 'modificarTexto()' >< b > Esse b > é < período > Cabeçalho < período > < eu > Elemento eu h1 >
Centro >Nas linhas de código indicadas acima:
- O ' ”adiciona um elemento de título de nível 1 com um“ ao clicar ”evento que invoca o“ modificarTexto() ”função quando o usuário clica nela.
- O elemento de título também contém o “ ',' ', e '
”marca como seus descendentes. A tag “ ” é usada para colocar em negrito a string incluída, a tag “” sem qualquer propriedade de estilo é utilizada para não aplicar nenhum estilo na string fornecida, e a tag “ ” é usada para exibir o string especificada como itálico.
Código JavaScript
< roteiro >
onde h1 = documento. getElementById ( 'minha cabeça' ) ;
console. registro ( h1 ) ;
função modificarTexto ( ) {
h1. textoConteúdo = 'Bem-vindo ao Linuxhint!' ;
console. registro ( h1 )
}
roteiro >No código JavaScript acima:
- A variável “h1” usa o “ document.getElementById() ”Método para acessar o elemento de título por meio de seu id atribuído.
- O ' console.log() ”O método exibe o elemento de título acessado no console antes de alterar seu conteúdo.
- A função chamada “ modificarTexto() ”usa o“ textoConteúdo ”Propriedade para modificar o texto do elemento de título obtido.
- O último método “console.log()” exibe novamente o valor “h1” após a modificação.
Saída
O console mostra claramente que todos os filhos do elemento de título fornecido foram substituídos pelo texto recém-especificado ao clicar nele:
Exemplo 3: Aplicando a propriedade “textContent” para modificar o texto do filho do elemento
Este exemplo usa a propriedade “textContent” para modificar o texto do filho do elemento específico.
Código HTML
< divisão eu ia = 'meuDiv' estilo = 'borda: 3px preto sólido; largura: 400px; preenchimento: 5px 5px; margem: automático;' >
< Centro >
< botão eu ia = 'btn' passar o mouse = 'alterarTexto()' > Botão antigo < / botão >
< / Centro >
< / divisão >Neste cenário:
- O elemento “div” possui um elemento “botão” que é criado com a ajuda do “
' marcação. - O elemento botão contém ainda um id atribuído e um “ passar o mouse ”evento que chama o“ alterarTexto() ”função quando o mouse passa sobre ele.
Código JavaScript
< roteiro >
era parentElement = documento. getElementById ( 'meuDiv' ) ;
var alvo = documento. getElementById ( 'btn' ) ;
foi encontre-me = parentElement. contém ( alvo ) ;
se ( parentElement. contém ( alvo ) == verdadeiro ) {
console. registro ( me encontre ) ;
função alterarTexto ( ) {
alvo. textoConteúdo = 'Novo botão' ;
}
} outro {
console. registro ( 'Não existe' )
}
roteiro >No trecho de código acima:
- A variável “parentElement” aplica o “ getElementById() ”Método para acessar o elemento div pai. A variável “target” também utiliza o método “getElementById()” para buscar o elemento do botão adicionado usando seu id.
- A variável “find_me” usa o “ contém() ”Método para verificar se o elemento do botão de destino é filho do div ou não. Este método retornará “ verdadeiro ” para “sim”, caso contrário “falso”.
- O ' se-outro ”A instrução define um bloco de código.
- Se o elemento de destino for filho do elemento pai, então o “ alterarTexto() ”A função mudará seu texto por meio do“ textoConteúdo ' propriedade. Caso contrário, o bloco de código “else” será executado para exibir a mensagem especificada usando o “ console.log() ”Método.
Saída
O console mostra um “ verdadeiro ”Valor booleano que verifica se o elemento do botão é filho do div fornecido e então seu texto muda ao passar o mouse sobre ele:
Diferença entre as propriedades textContent, innerText e innerHTML?
Geralmente, o “ textoConteúdo ',' Texto interno ', e ' HTML interno ”Propriedades lidam com o texto de um elemento ou nó na forma de configurá-lo e obtê-lo. No entanto, essas propriedades são diferentes umas das outras com base em alguns fatores. Esta seção destaca as principais diferenças entre todos eles:
Termos 'textConteúdo' 'texto interno' “HTML interno” Tipo de retorno Ele retorna o texto de um elemento incluindo todos os seus filhos (tags de formatação), texto oculto CSS e espaço. Não retorna as tags HTML de um elemento. Ele retorna o conteúdo de texto do elemento HTML de destino com todos os seus filhos (tags de formatação). Ele não retorna espaço, texto oculto CSS e tags HTML, exceto