JavaScript - Document Object
Bonjour, futurs programmeurs ! Aujourd'hui, nous allons plonger dans le monde fascinant de l'Objet Document de JavaScript. Ne vous inquiétez pas si vous êtes nouveaux en programmation - je vais vous guider à travers ce voyage pas à pas, comme j'ai fait pour des centaines d'étudiants au fil des ans. Commençons cette aventure ensemble !
Window Document Object
Lorsque vous travaillez avec JavaScript dans un navigateur web, l'une des choses les plus importantes avec lesquelles vous interagirez est l'Objet Document. Mais avant d'y parvenir, comprenons son parent : l'objet Window.
Imaginez votre navigateur web comme une maison. L'objet Window représente l'ensemble de la maison, tandis que l'objet Document est comme le salon principal où se déroule la plupart des actions. Tout ce que vous voyez dans votre fenêtre de navigateur fait partie de l'objet Window, et le contenu de la page web fait spécifiquement partie de l'objet Document.
Voici un exemple simple pour illustrer cela :
console.log(window.document === document); // Output : trueCela montre que document est en réalité une propriété de l'objet window, mais nous pouvons y accéder directement comme document pour commodité.
Propriétés de l'Objet Document JavaScript
Maintenant que nous comprenons où l'objet Document s'insère, explorons certaines de ses propriétés. Ces propriétés nous permettent d'accéder et de manipuler différentes parties de notre page web.
1. document.title
Cette propriété vous permet d'obtenir ou de définir le titre de votre page web - vous savez, le texte qui apparaît dans l'onglet du navigateur.
console.log(document.title); // Affiche le titre actuel de la page
document.title = "Ma Page Incroyable"; // Change le titre de la page2. document.body
Cette propriété vous donne accès à l'élément <body> de votre document HTML.
document.body.style.backgroundColor = "lightblue";Cette ligne changerait la couleur de fond de votre page entière en bleu clair. Pas mal, n'est-ce pas ?
3. document.URL
Cette propriété en lecture seule vous donne l'URL complète de la page actuelle.
console.log(document.URL); // Affiche quelque chose comme "https://www.example.com/page.html"Méthodes de l'Objet Document JavaScript
Les méthodes sont comme les superpuissances de notre objet Document. Elles nous permettent de faire toutes sortes de choses intéressantes avec notre page web.
1. document.getElementById()
C'est probablement la méthode que vous utiliserez le plus souvent. Elle vous permet de saisir un élément de votre HTML en utilisant son ID.
let myElement = document.getElementById("mySpecialDiv");
myElement.innerHTML = "Bonjour, j'ai été changé par JavaScript !";Dans cet exemple, nous trouvons un élément avec l'ID "mySpecialDiv" et changeons son contenu.
2. document.createElement()
Cette méthode vous permet de créer de nouveaux éléments HTML depuis zéro !
let newParagraph = document.createElement("p");
newParagraph.textContent = "Je suis un nouveau paragraphe, ravi de vous rencontrer !";
document.body.appendChild(newParagraph);Ici, nous créons un nouvel élément paragraphe, définissons son texte et l'ajoutons à la fin du corps de notre document.
3. document.querySelector()
Cette méthode puissante vous permet de sélectionner des éléments en utilisant des sélecteurs CSS.
let firstButton = document.querySelector("button");
firstButton.style.color = "red";Cela trouverait le premier bouton de votre page et rendrait son texte rouge.
Liste des Propriétés de l'Objet Document
Résumons certaines des propriétés clés de l'objet Document dans un tableau pratique :
| Propriété | Description |
|---|---|
| document.title | Le titre du document actuel |
| document.body | L'élément <body>
|
| document.head | L'élément <head>
|
| document.URL | L'URL complète du document |
| document.domain | Le nom de domaine du serveur du document |
| document.lastModified | La date à laquelle le document a été modifié pour la dernière fois |
Liste des Méthodes de l'Objet Document
Et voici un tableau de certaines méthodes importantes de l'objet Document :
| Méthode | Description |
|---|---|
| document.getElementById() | Retourne l'élément avec l'ID spécifié |
| document.getElementsByClassName() | Retourne une collection d'éléments avec le nom de classe spécifié |
| document.getElementsByTagName() | Retourne une collection d'éléments avec le nom de balise spécifié |
| document.querySelector() | Retourne le premier élément qui correspond à un sélecteur CSS |
| document.querySelectorAll() | Retourne tous les éléments qui correspondent à un sélecteur CSS |
| document.createElement() | Crée un nouvel élément HTML |
| document.write() | Écrit des expressions HTML ou du code JavaScript dans un document |
Souvenez-vous, apprendre à manipuler l'Objet Document, c'est comme apprendre à être un magicien dans le monde du développement web. Avec ces outils, vous pouvez faire vivre vos pages web et les faire réagir aux actions des utilisateurs de manière incroyable.
En conclusion de cette leçon, je me souviens d'une étudiante que j'avais qui était initialement effrayée par toutes ces propriétés et méthodes. Mais avec de la pratique, elle est devenue si compétente qu'elle pouvait manipuler des pages web dans son sommeil ! (Presque.) La clé, c'est d'expérimenter et de s'amuser avec.
Alors, mes chers étudiants, n'ayez pas peur de jouer avec ces concepts. Essayez de changer le titre de cette page, ou de créer un nouvel élément et de l'ajouter au corps. Plus vous pratiquez, plus cela deviendra naturel. Avant de vous en rendre compte, vous serez en train de créer des expériences web interactives comme un pro !
Bonne programmation, et souvenez-vous - dans le monde de la programmation, la curiosité est votre plus grand atout. Continuez à explorer, continuez à vous poser des questions, et surtout, continuez à coder !
Credits: Image by storyset