JavaScript : utiliser le Document Object Model (DOM)

Name: JavaScript : utiliser le Document Object Model (DOM)
Author: Joseph Barrett

Comment utiliser le modèle Document Object Model.

Preview the first lesson free — get full access to all 6 lessons.

Cours : à la demande

Dans cette leçon, nous allons examiner la création et l'insertion nouveaux éléments dans le modèle d'objet de document. Voyons donc ce que nous avons jusqu'à présent. Vous avez votre boîte de sélection de variété de jardin ici, et j'ai une taille de cinq spécifiée pour qu'il apparaisse comme une zone de liste, et nous avons quelques éléments d'options existants. Disons, par exemple, qu'il s'agit peut-être d'un site de voyage. Les gens veulent choisir une ville à visiter. Nous leur donnons quelques choix par défaut. Nous voulons également leur permettre d'ajouter une nouvelle ville à la liste et ils vont pouvoir le faire en tapant le nom de la ville ici. Maintenant, cela ne fonctionne pas encore. Nous allons ajouter le code pour y parvenir. Donc, j'ai un gestionnaire d'événements ici pour le bouton d'envoi et j'ai sélectionné qui représente cette boîte que nous avons déjà ici. Je vais donc passer par deux étapes ici. La première chose est que je vais créer mon nouvel élément et la seconde est que je vais l'insérer dans l'élément existant à un endroit particulier. C'est juste une petite méthode d'aide que j'ai créée qui me permet de prendre une ville avec des espaces dans le nom et transformez cela en une valeur spécifique là-bas. Mais le nœud de ceci est remarquez que je fais document.createElement et je crée un élément d'option. Lorsque vous souhaitez spécifier des attributs pour cet élément, vous pouvez simplement les marquer avec leurs valeurs. Donc, la valeur sera cette chaîne en minuscules que je crée ici et le texte sera la valeur réelle de la zone de ville que nous avons fait là-bas. Nous avons donc créé cela. Maintenant, comment pouvons-nous l'amener là où nous voulons qu'il soit? Et nous avons deux façons différentes que nous pouvons aller ici. Le premier est préfixé. Alors je prends cet élément de sélection et cela l'insère juste avant le premier élément enfant. Donc, si nous revenons ici et jetons un coup d'œil, il y a votre collection d'éléments enfants pour la zone de liste de sélection. Alors je vais prendre ça. Je vais ajouter cela au début. Alors tapons à Tokyo et j'appuie sur mon bouton d'envoi, et là ça en fait le premier là-bas. Maintenant, nous pourrions aussi le faire d'une manière légèrement différente. Nous avons également insertBefore. InsertBefore prend l'élément que nous allons insérer, l'élément que nous allons insérer, comme premier paramètre et indique où nous voulons qu'il aille. Donc dans ce cas, les nœuds enfants de zéro, et sauvegardons cela et refaisons la page à nouveau. Et cela devrait y arriver au début. Nous ne sommes certainement pas limités au tout premier élément. Je pourrais dire de faire ça et nous finissons par dire que c'est ici. Maintenant remarquez que ce n'est pas le quatrième ni même le cinquième élément, mais ce que vous devez comprendre sur ces éléments est que les options ne sont pas les seuls nœuds là-dedans. L'espace blanc, par exemple, se présente comme un nœud de texte. Il faut donc regarder très attentivement lorsque vous explorez les éléments de cette collection. Maintenant, si vous voulez l'insérer à la fin, nous pouvons le faire aussi. Essayons cela comme une autre façon de le faire. On y va. Append le met juste à la toute dernière. Donc, si nous essayons encore une fois, on y va, c'est le dernier. Donc, dans cette leçon, nous avons appris de différentes manières pour vous assurer que notre nouvel élément apparaît à un endroit particulier de l'élément existant dans le DOM. Merci d'avoir regardé. Dans notre prochaine leçon, nous parlerons plus en détail naviguer dans la hiérarchie du modèle objet de document.

Intermédiaire Fournisseur : Joseph Barrett 6 leçons · 29m en Arabe, Allemand, Anglais, Espagnol, Français, Portugais, Chinese

Description du cours

Le modèle objet de document « Document Object Model » (DOM) est une fonction de base de JavaScript. Dans ce cours, vous apprendrez à créer et à insérer des éléments dans le DOM, à naviguer dans le DOM et à déplacer des éléments sur la page Web. Vous ferez un exercice sur la façon de modifier l'apparence de votre page et apprendrez à modifier les attributs HTML. Enfin, vous acquerrez des conseils pour modifier les feuilles de style en cascade (CSS), qui décrivent comment votre page apparaît visuellement sur votre écran.

Ce que vous allez apprendre

Créer et insérer de nouveaux éléments dans le Document Object Model (DOM) en utilisant JavaScript
Naviguer dans le DOM pour localiser et travailler avec des éléments de page
Déplacer des éléments sur une page web
Modifier l'apparence de votre page et manipuler les attributs HTML
Appliquer des trucs et astuces pour travailler avec des feuilles de style en cascade (CSS) en JavaScript

Points clés à retenir

Le modèle d'objet de document (DOM) est une fonction de base de JavaScript.
JavaScript peut être utilisé pour créer et insérer des éléments dans le DOM ainsi que pour y naviguer.
Les éléments peuvent être déplacés sur la page web et leurs attributs HTML peuvent être modifiés à l'aide de JavaScript.
Les feuilles de style en cascade (CSS) décrivent la façon dont une page apparaît visuellement à l'écran, et le cours donne des conseils pour les modifier.

Foire aux questions

Que couvre ce cours ?

Il couvre la création et l'insertion d'éléments dans le DOM, la navigation dans le DOM, le déplacement d'éléments sur la page web, la modification de l'apparence de la page, la modification des attributs HTML et des astuces pour modifier les feuilles de style en cascade (CSS).

Quelles compétences vais-je acquérir grâce à ce cours ?

Vous acquerrez des compétences dans le modèle d'objet de document (DOM), le script DOM, les modèles d'objets de documents HTML, le script HTML, le JavaScript (langage de programmation), et le JavaScript orienté objet.

Le cours comprend-il de la pratique sur des cas réels ?

Oui, vous ferez un exercice sur la façon de modifier l'apparence de votre page.

Quelles leçons sont incluses ?

Les leçons sont : Création et insertion de nouveaux éléments, Navigation dans le DOM, Déplacement d'éléments sur la page, Modification de l'apparence de la page, Manipulation d'attributs et Astuces CSS en JavaScript.