Les bases du javascript - La manipulation du DOM - Javascript

Le document

Salut, je suis impatient d'en apprendre plus en javascript

Salut Arthur, aujourd'hui on va manipuler le DOM, tu sais ce que c'est?

Aucune idée, la seule chose que j'imagine c'est une forme sphérique au dessus de notre page...

Ah non pas du tout. C'est un acronyme pour Document Object Model. En fait c'est la représentation sous forme d'objet d'un document XML. Et comme le Html est un dérivé du xml, on peut aussi avoir son DOM. Nous avons déjà vu ensemble les objets anonymes, le DOM va être représenté de la même façon, c'est un objet principal qui s'appelle le document, et qui contient d'autres objets. Et cet objet document a pas mal de méthodes, c'est un peu comme des fonctions, mais qu'on ne peut appeler qu'avec cet objet.

Euh, je ne vois pas trop ce que tu veux dire par là...

Tu te souviens du console.log, que l'on a pas mal utilisé?

Oui parfaitement

Et bien console est un objet, et log une méthode de l'objet console. On ne pourrais pas appeler log tout seul, il faut nécessairement faire "console.log". Pour le document c'est pareil, on va avoir des méthodes que l'on appellera par l'objet document.

Récupérer un élément par son id

Par exemple la méthode que l'on utilise très souvent est le getElementById, qui va essayer de trouver un élément dans le document dont l'id est celui précisé dans la fonction. Par exemple :



On pourra ensuite facilement manipuler cet élément pour modifier le DOM et donc la page web !

Récupérer des éléments par leur classe

On peut aussi récupérer des éléments par d'autres attributs, par exemple leur classe, avec getElementsByClassName



Tu as fait une faute de frappe non? Tu as mis un "s" à getElementsByClassName

Et bien non, en html un id est unique, ont ne peut normalement donc avoir qu'un seul élément avec un id précis dans une page web, alors qu'une même classe peut être utilisée plusieurs fois dans une même page. On aura donc avec getElementById un seul élément retourné, alors que getElementsByClassName retournera un tableau d'éléments. Il faudra y faire attention car on ne pourra pas les manipuler de la même façon.

Il existe aussi d'autres sélecteurs, je ne vais pas faire le tour, si tu as compris le principe, ce n'est pas difficile de les trouver et les utiliser, le concept reste toujours le même.

QuerySelector

Par contre il existe un autre moyen pour récupérer des éléments dans le DOM, ce sont les querySelector. Ce sont deux méthodes qui font essayer de trouver un élément grâce à un sélecteur css, par exemple pour récupérer un élément par son id :



Mais ça peut être pratique pour des selecteurs plus complexe que l'on ne pourrait pas utiliser avec les getElementBy, comme par exemple pour des sélecteur enfant :



Ok ça a l'air super pratique ! Et tu m'as parlé de deux méthode

Effectivement, le querySelector ne récupère qu'un seul élément, le premier trouvé qui correspond au selecteur css. Il y a aussi le querySelectorAll, qui va retourner tous les éléments qui correspondent au selecteur css, par exemple :



C'est génial !

Modification du DOM

setAttribute

En effet, on a vu comment récupérer un élément du DOM, on va maintenant voir comment le modifier. Pour commencer les attributs, on peut les modifier ou en ajouter avec à la méthode setAttribute, par exemple pour ajouter une classe à un élément :



Ok, mais pour modifier le contenu on fait comment?

innerHTML

Il y a deux façon, que l'on va utiliser selon les cas, la première c'est si on veux mettre du texte à l'intérieur d'une balise, on va utiliser innerHTML, c'est la propriété d'un élément du DOM qui représente le contenu de cet élément.

createElement

La deuxième, est quand on souhaite ajouter une ou plusieurs balises html à l'intérieur d'une balise existante, dans ce cas on évite le innerHTML et on passe plutôt par le document.createElement, pour créer un nouvel élément HTML.

On pourra lui ajouter une classe avec un set attribute, lui ajouter un contenu textuel avec inerHTML et il faudra utiliser la méthode appendChild pour ajouter ce nouvel élément dans un élément existant dans le DOM.



Ok, donc innerHTML pour du text, createElement et appendChild pour une nouvelle balise; C'est noté !

Navigation dans le DOM

Il existe aussi quelques méthode pour naviguer dans le DOM, c'est à dire, à partir d'un élément, réussir à récupérer un élément enfant, ou parent, ou voisin.

Je ne vois pas du tout ce que tu veux dire par élément enfant, parent ou voisin...

Et bien par exemple :

• list est un élément enfant de content


• content est l'élément parent de list


• list-1, list-2 et list-3 sont des éléments voisins

Ahhhh j'ai compris !

Il y a donc des méthodes pour naviguer dans ces éléments, par exemple :



J'ai pas trop compris la dernière ligne, mais tous le reste oui ! C'est pratique

La dernière ligne, c'est simplement pour te montrer que l'on peut chainer la navigation, en fait document.getElementById retourne un objet javascript de type HTMLElement, et toutes ces fonctions aussi !

Ok je retiens ça, je pense que j'ai tout compris !

Très bien, on pourra passer à la suite, avec un des concepts les plus importants du javascript, les événements ! On se revoit demain Arthur !

Oui à demain ! J'ai terminé cette partie