1
Partie 2
Présentation du DOM HTML
DOM : Document Object Model
Le DOM est une représentation structurée du document sous forme « d’arbre » crée automatiquement par le navigateur. Chaque branche de cet arbre se termine par ce qu’on appelle un nœud qui va contenir des objets. On va finalement pouvoir utiliser ces objets, leurs propriétés et leurs méthodes en JavaScript.
Pour utiliser les propriétés et méthodes de l’interface Document, nous allons tout simplement utiliser la propriété document de Window.
A- Accéder aux éléments dans un document avec JavaScript et modifier leur contenu
Pour manipuler du contenu HTML déjà présent sur la page, nous allons cependant avant tout devoir accéder à ce contenu.
Nous allons voir différentes propriétés et méthodes nous permettant de faire cela
- Accéder à un élément à partir de son sélecteur CSS associé
- La méthode querySelector() retourne un objet Element représentant le premier élément dans le document correspondant au sélecteur (ou au groupe de sélecteurs) CSS passé en argument ou la valeur null si aucun élément correspondant n’est trouvé.
- La méthode querySelectorAll() renvoie un objet appartenant à l’interface NodeList. Les objets NodeList sont des collections (des listes) de nœuds.
- Accéder à un élément en fonction de la valeur de son attribut id
- La méthode getElementById() est un moyen simple d’accéder à un élément en particulier (si celui-ci possède un id) puisque les id sont uniques dans un document.
- Accéder à un élément en fonction de la valeur de son attribut class
- En utilisant la méthode getElementsByClassName() avec un objet Document, la recherche des éléments se fera dans tout le document.
- Accéder à un élément en fonction de son identité
- La méthode getElementsByTagName() permet de sélectionner des éléments en fonction de leur nom et renvoie un objet HTMLCollection qui consiste en une liste d’éléments correspondant au nom de balise passé en argument.
- Accéder à un élément en fonction de son attribut name
- Finalement, l’interface Document met également à notre disposition la méthode getElementsByName() qui renvoie un objet NodeList contenant la liste des éléments portant un attribut name avec la valeur spécifiée en argument sous forme d’objet.
- Accéder directement à des éléments particuliers avec les propriétés de Document
Finalement, l’interface Document fournit également des propriétés qui vont nous permettre d’accéder directement à certains éléments ou qui vont retourner des objets contenant des listes d’éléments.
Les propriétés qui vont le plus nous intéresser ici sont les suivantes :
- La propriété body qui retourne le nœud représentant l’élément body ;
- La propriété head qui retourne le nœud représentant l’élément head ;
- La propriété links qui retourne une liste de tous les éléments a ou area possédant un href avec une valeur ;
- La propriété title qui retourne le titre (le contenu de l’élément title) du document ou permet de le redéfinir ;
- La propriété url qui renvoie l’URL du document sous forme de chaine de caractères ;
- La propriété scripts qui retourne une liste de tous les éléments script du document ;
- La propriété cookie qui retourne la liste de tous les cookies associés au document sous forme de chaine de caractères ou qui permet de définir un nouveau cookie.
- Accéder au contenu des éléments et le modifier
Pour récupérer le contenu d’un élément ou le modifier, nous allons pouvoir utiliser l’une des propriétés suivantes :
- La propriété innerHTML de l’interface Element permet de récupérer ou de redéfinir la syntaxe HTML interne à un élément ;
- La propriété outerHTML de l’interface Element permet de récupérer ou de redéfinir l’ensemble de la syntaxe HTML interne d’un élément et de l’élément en soi ;
- La propriété textContent de l’interface Node représente le contenu textuel d’un nœud et de ses descendants. On utilisera cette propriété à partir d’un objet Element ;
- La propriété innerText de l’interface Node représente le contenu textuel visible sur le document final d’un nœud et de ses descendants. On utilisera cette propriété à partir d’un objet Element.