Propriétés Du DOM

JavaScript fournit plusieurs propriétés pour accéder et manipuler le contenu. Comprendre ces propriétés vous permet de mettre à jour dynamiquement le contenu des pages web en fonction des interactions utilisateur ou d'autres conditions.

InnerHTML

La propriété innerHTML vous permet d'obtenir ou de définir le contenu HTML d'un élément, y compris les balises et le texte. C'est l'une des propriétés les plus couramment utilisées pour mettre à jour dynamiquement le contenu des pages.

index.html

index.js

Le innerHTML récupère tout le contenu, y compris les balises HTML, et permet d'insérer ou de mettre à jour le contenu avec des balises HTML.

TextContent

La propriété textContent obtient ou définit le contenu texte d'un élément, en supprimant toutes les balises HTML. C'est idéal lorsque vous avez besoin de travailler avec du texte brut sans tenir compte de la structure HTML.

index.html

index.js

Le textContent récupère uniquement le contenu textuel, en ignorant les balises HTML, et définit du texte brut, échappant automatiquement à toute balise.

Valeur

La propriété value est utilisée avec des éléments de formulaire comme <input>, <textarea>, et <select>, vous permettant d'obtenir ou de définir la valeur entrée par l'utilisateur.

index.html

index.js

La propriété value récupère la valeur actuelle des éléments de formulaire et définit une nouvelle valeur pour les éléments input, textarea ou select.

Différences entre InnerHTML et TextContent

Exemple Pratique : Mise à jour d'un Profil Utilisateur

Imaginez une page de profil utilisateur où les données initiales sont affichées, et l'utilisateur peut mettre à jour les détails de son profil à l'aide d'un formulaire. Lorsque l'utilisateur soumet le formulaire, le contenu de la page se met à jour dynamiquement.

index.html

index.css

index.js

Initialement, le profil affiche un nom d'utilisateur et une bio prédéfinis, qui peuvent être modifiés via des champs de saisie. Lorsque le bouton "Enregistrer les modifications" est cliqué, JavaScript met à jour le profil affiché : textContent met à jour le nom d'utilisateur en texte brut, tandis que innerHTML met à jour la bio pour permettre une mise en forme HTML basique, reflétant toutes les modifications effectuées par l'utilisateur.

1. Que fait la propriété `innerHTML` ?

2. Quand utiliseriez-vous `textContent` au lieu de `innerHTML` ?

3. Quelle sera la sortie du code suivant ?

4. Quelle propriété est utilisée pour obtenir ou définir la valeur d'un élément `<input>` ?

Que fait la propriété innerHTML ?

Select the correct answer

Elle récupère uniquement le contenu textuel d'un élément.

Elle obtient ou définit le contenu HTML d'un élément, y compris les balises et le texte.

Elle récupère la valeur d'un champ de saisie.

Elle ne récupère que les nœuds enfants d'un élément.

Quand utiliseriez-vous textContent au lieu de innerHTML ?

Select the correct answer

Lorsque vous devez définir ou récupérer du contenu en tant que texte brut, sans balises HTML.

Lorsque vous souhaitez ajouter plusieurs éléments enfants.

Lorsque vous devez définir du HTML avec des balises.

Lorsque vous travaillez avec des éléments de saisie.

Quelle sera la sortie du code suivant ?

Select the correct answer

Hello, <strong>World!</strong>

Hello, World!

<strong>World!</strong>

World!

Quelle propriété est utilisée pour obtenir ou définir la valeur d'un élément <input> ?

Select the correct answer

textContent

innerHTML

value

placeholder

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 6

Demandez à l'IA

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Awesome!

Completion rate improved to 2.22

Propriétés Du DOM

Glissez pour afficher le menu

InnerHTML

index.html

index.js

Le innerHTML récupère tout le contenu, y compris les balises HTML, et permet d'insérer ou de mettre à jour le contenu avec des balises HTML.

TextContent

index.html

index.js

Le textContent récupère uniquement le contenu textuel, en ignorant les balises HTML, et définit du texte brut, échappant automatiquement à toute balise.

Valeur

La propriété value est utilisée avec des éléments de formulaire comme <input>, <textarea>, et <select>, vous permettant d'obtenir ou de définir la valeur entrée par l'utilisateur.

index.html

index.js

La propriété value récupère la valeur actuelle des éléments de formulaire et définit une nouvelle valeur pour les éléments input, textarea ou select.

Différences entre InnerHTML et TextContent

Exemple Pratique : Mise à jour d'un Profil Utilisateur

index.html

index.css

index.js

1. Que fait la propriété `innerHTML` ?

2. Quand utiliseriez-vous `textContent` au lieu de `innerHTML` ?

3. Quelle sera la sortie du code suivant ?

4. Quelle propriété est utilisée pour obtenir ou définir la valeur d'un élément `<input>` ?

Que fait la propriété innerHTML ?

Select the correct answer

Elle récupère uniquement le contenu textuel d'un élément.

Elle obtient ou définit le contenu HTML d'un élément, y compris les balises et le texte.

Elle récupère la valeur d'un champ de saisie.

Elle ne récupère que les nœuds enfants d'un élément.

Quand utiliseriez-vous textContent au lieu de innerHTML ?

Select the correct answer

Lorsque vous devez définir ou récupérer du contenu en tant que texte brut, sans balises HTML.

Lorsque vous souhaitez ajouter plusieurs éléments enfants.

Lorsque vous devez définir du HTML avec des balises.

Lorsque vous travaillez avec des éléments de saisie.

Quelle sera la sortie du code suivant ?

Select the correct answer

Hello, <strong>World!</strong>

Hello, World!

<strong>World!</strong>

World!

Quelle propriété est utilisée pour obtenir ou définir la valeur d'un élément <input> ?

Select the correct answer

textContent

innerHTML

value

placeholder

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 6

Propriétés Du DOM

InnerHTML

TextContent

Valeur

Différences entre InnerHTML et TextContent

Exemple Pratique : Mise à jour d'un Profil Utilisateur

1. Que fait la propriété innerHTML ?

2. Quand utiliseriez-vous textContent au lieu de innerHTML ?

3. Quelle sera la sortie du code suivant ?

4. Quelle propriété est utilisée pour obtenir ou définir la valeur d'un élément <input> ?

Awesome!

Propriétés Du DOM

InnerHTML

TextContent

Valeur

Différences entre InnerHTML et TextContent

Exemple Pratique : Mise à jour d'un Profil Utilisateur

1. Que fait la propriété innerHTML ?

2. Quand utiliseriez-vous textContent au lieu de innerHTML ?

3. Quelle sera la sortie du code suivant ?

4. Quelle propriété est utilisée pour obtenir ou définir la valeur d'un élément <input> ?

1. Que fait la propriété `innerHTML` ?

2. Quand utiliseriez-vous `textContent` au lieu de `innerHTML` ?

4. Quelle propriété est utilisée pour obtenir ou définir la valeur d'un élément `<input>` ?

1. Que fait la propriété `innerHTML` ?

2. Quand utiliseriez-vous `textContent` au lieu de `innerHTML` ?

4. Quelle propriété est utilisée pour obtenir ou définir la valeur d'un élément `<input>` ?