Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Explorando Propriedades do DOM em JavaScript | Manipulação do DOM para Desenvolvimento Web Interativo
Domínio Avançado de JavaScript

bookExplorando Propriedades do DOM em JavaScript

O JavaScript oferece várias propriedades para acessar e manipular o conteúdo. Compreender essas propriedades permite atualizar dinamicamente o conteúdo das páginas web com base em interações do usuário ou outras condições.

InnerHTML

A propriedade innerHTML permite obter ou definir o conteúdo HTML de um elemento, incluindo tags e texto. É uma das propriedades mais utilizadas para atualizar dinamicamente o conteúdo da página.

index.html

index.html

index.js

index.js

copy

O innerHTML recupera todo o conteúdo, incluindo as tags HTML, e permite inserir ou atualizar conteúdo com tags HTML.

TextContent

A propriedade textContent obtém ou define o conteúdo de texto de um elemento, removendo quaisquer tags HTML. É ideal quando é necessário trabalhar apenas com texto simples sem considerar a estrutura HTML.

index.html

index.html

index.js

index.js

copy

O textContent recupera apenas o conteúdo de texto, ignorando as tags HTML, e define texto simples, escapando automaticamente quaisquer tags.

Valor

A propriedade value é utilizada com elementos de formulário como <input>, <textarea> e <select>, permitindo obter ou definir o valor inserido pelo usuário.

index.html

index.html

index.js

index.js

copy

O value recupera o valor atual dos elementos de formulário e define um novo valor para elementos input, textarea ou select.

Diferenças entre InnerHTML e TextContent

Exemplo prático: Atualização de um perfil de usuário

Imagine uma página de perfil de usuário onde os dados iniciais são exibidos e o usuário pode atualizar os detalhes do perfil usando um formulário. Quando o usuário envia o formulário, o conteúdo da página é atualizado dinamicamente.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Inicialmente, o perfil exibe um nome de usuário e uma biografia predefinidos, que podem ser modificados por meio de campos de entrada. Quando o botão "Salvar Alterações" é clicado, o JavaScript atualiza o perfil exibido: textContent atualiza o nome de usuário como texto simples, enquanto innerHTML atualiza a biografia permitindo formatação HTML básica, refletindo quaisquer edições feitas pelo usuário.

1. O que a propriedade innerHTML faz?

2. Quando utilizar textContent em vez de innerHTML?

3. Qual será a saída do código a seguir?

4. Qual propriedade é utilizada para obter ou definir o valor de um elemento <input>?

question mark

O que a propriedade innerHTML faz?

Select the correct answer

question mark

Quando utilizar textContent em vez de innerHTML?

Select the correct answer

question mark

Qual será a saída do código a seguir?

Select the correct answer

question mark

Qual propriedade é utilizada para obter ou definir o valor de um elemento <input>?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 2. Capítulo 6

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Awesome!

Completion rate improved to 2.22

bookExplorando Propriedades do DOM em JavaScript

Deslize para mostrar o menu

O JavaScript oferece várias propriedades para acessar e manipular o conteúdo. Compreender essas propriedades permite atualizar dinamicamente o conteúdo das páginas web com base em interações do usuário ou outras condições.

InnerHTML

A propriedade innerHTML permite obter ou definir o conteúdo HTML de um elemento, incluindo tags e texto. É uma das propriedades mais utilizadas para atualizar dinamicamente o conteúdo da página.

index.html

index.html

index.js

index.js

copy

O innerHTML recupera todo o conteúdo, incluindo as tags HTML, e permite inserir ou atualizar conteúdo com tags HTML.

TextContent

A propriedade textContent obtém ou define o conteúdo de texto de um elemento, removendo quaisquer tags HTML. É ideal quando é necessário trabalhar apenas com texto simples sem considerar a estrutura HTML.

index.html

index.html

index.js

index.js

copy

O textContent recupera apenas o conteúdo de texto, ignorando as tags HTML, e define texto simples, escapando automaticamente quaisquer tags.

Valor

A propriedade value é utilizada com elementos de formulário como <input>, <textarea> e <select>, permitindo obter ou definir o valor inserido pelo usuário.

index.html

index.html

index.js

index.js

copy

O value recupera o valor atual dos elementos de formulário e define um novo valor para elementos input, textarea ou select.

Diferenças entre InnerHTML e TextContent

Exemplo prático: Atualização de um perfil de usuário

Imagine uma página de perfil de usuário onde os dados iniciais são exibidos e o usuário pode atualizar os detalhes do perfil usando um formulário. Quando o usuário envia o formulário, o conteúdo da página é atualizado dinamicamente.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Inicialmente, o perfil exibe um nome de usuário e uma biografia predefinidos, que podem ser modificados por meio de campos de entrada. Quando o botão "Salvar Alterações" é clicado, o JavaScript atualiza o perfil exibido: textContent atualiza o nome de usuário como texto simples, enquanto innerHTML atualiza a biografia permitindo formatação HTML básica, refletindo quaisquer edições feitas pelo usuário.

1. O que a propriedade innerHTML faz?

2. Quando utilizar textContent em vez de innerHTML?

3. Qual será a saída do código a seguir?

4. Qual propriedade é utilizada para obter ou definir o valor de um elemento <input>?

question mark

O que a propriedade innerHTML faz?

Select the correct answer

question mark

Quando utilizar textContent em vez de innerHTML?

Select the correct answer

question mark

Qual será a saída do código a seguir?

Select the correct answer

question mark

Qual propriedade é utilizada para obter ou definir o valor de um elemento <input>?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 2. Capítulo 6
some-alt