Comment dominer le DOM avec Javascript

Les DOM peuvent parfois être assez intimidants. Je veux dire avec un acronyme comme celui-ci, cela ressemble plus à un DJ de la maison qu’à une interface que nous pouvons manipuler!

Mais ne vous inquiétez pas mes amis, je suis ici pour vous dire que nous pouvons le faire! C’est juste une question de contextualisation et d’exécution. Une fois que nous aurons tout décomposé, nous dominerons en un rien de temps.

Cet article couvrira:

  1. Qu'est-ce que le DOM?
  2. En quoi est-ce important?
  3. Comment l'attaquer en utilisant JavaScript!

Laissez-vous plonger et commencer à conquérir!

Document Object Model - Le DOM

Qu'est-ce que le DOM?

Comme indiqué ci-dessus, DOM est l'acronyme du modèle d'objet document. L'idée d'un modèle d'objet document provient de la fonction principale du DOM: créer une représentation visuelle de notre code HTML. Ce qui signifie que ce que nous voyons projeté sur nos pages Web n’est pas notre code HTML codé en dur, mais une représentation de celui-ci.

La représentation est composée d'un document et des objets qui l'habitent. Les objets sont des éléments HTML qui ont été convertis en objets nœud. Ce sont ces nœuds que nous allons ultérieurement cibler et manipuler pour créer des actions dynamiques. Encore une fois, le DOM convertit cela en une représentation de sorte qu'aucun de nos codes HTML codés en dur ne soit affecté.

Le moyen le plus simple de penser au DOM est qu’il faut que notre HTML le convertisse en représentation visuelle, pour nos pages Web, et pour changer cela, nous devons utiliser une syntaxe spécifique du DOM.

J'aime aussi conceptualiser la relation HTML / DOM en l'imaginant comme l'un de ces vieux projecteurs que nous avions à l'école:

Est-ce que quelqu'un s'en souvient?

La métaphore fonctionne comme ceci:

  1. Le morceau de papier translucide placé sur le projecteur est notre code HTML.
  2. Le projecteur est notre navigateur, travaillant pour transformer notre code HTML en une représentation DOM.
  3. La projection au tableau est la représentation DOM de notre code HTML sur un navigateur (notre page Web).
  4. Toutes les notes de notre professeur sur la feuille translucide nous tentent de manipuler notre DOM.

Essentiellement, quel que soit le nombre de notes que nous prenons sur notre papier, notre texte initial ne sera jamais complètement modifié: il conserve toujours la structure et le format initiaux. Sauf si nous remplaçons à nouveau le stylo de Mme O’Malley par un marqueur permanent!

Toutes les blagues à part, j'espère que cela aide à conceptualiser le DOM.

Réviser:

  1. Nous écrivons notre HTML
  2. Il est ensuite interprété et représenté sur une page Web via notre navigateur, cette représentation est le DOM.
  3. Nous allons plus tard manipuler la représentation DOM mais cela n’endommagera pas notre code HTML dur.

Assez simple quand on décompose tout, n'est-ce pas? Cependant, nous devons clarifier un peu plus certaines nuances de la représentation du DOM.

Comme je l'ai mentionné précédemment lorsque les projets DOM de notre HTML, chaque élément est représenté par des nœuds. Le mot nœud peut sembler intimidant, mais ce ne sont que nos éléments qui sont représentés! Plus tard, lorsque nous chercherons à manipuler nos nœuds, ceux-ci deviendront les cibles que nous visons.

Enfin, je tiens à souligner que le DOM est en réalité une API. Il n'est pas spécifiquement conçu pour JavaScript mais pour plusieurs langages de codage. Gardez cela à l'esprit lorsque nous commençons à mettre en œuvre car, si nous ciblons, retournons et manipulons les objets que nous recevons du DOM, ils peuvent être différents de ceux auxquels nous sommes habitués.

Le savoir nous aidera à nous préparer à recevoir des objets uniques, à les convertir et à les manipuler correctement.

Pourquoi c'est important?

Le DOM est important car il nous fournit l’infrastructure nécessaire pour manipuler nos pages Web. Cela nous permet de personnaliser les expériences des utilisateurs ou de mettre à jour dynamiquement notre contenu Web!

Si nous voulons que notre site Web soit reconnu comme pages Web de qualité, nous aurons besoin de cette fonctionnalité. Comprendre comment fonctionne le DOM et comment nous le traversons contribuera grandement à rendre nos sites Web intéressants.

Cela dit, nous devons nous doter des outils nécessaires pour accéder et manipuler le DOM! Continuez et trouvez tout ce dont vous aurez besoin pour fonctionner avec le DOM.

Mise en route avec le DOM - Ciblage et manipulation.

Lorsque nous abordons une situation dans laquelle nous souhaitons manipuler un objet sur notre page Web, nous devons immédiatement penser à deux choses:

  1. Comment cibler cet objet?
  2. Comment puis-je atteindre l'état souhaité que je veux?

Si nous nous posons ces questions, le DOM devient incroyablement gérable. Apprendre d’abord à cibler les éléments, puis à appliquer les modifications, nous donne les outils de base pour commencer à faire bouger le DOM.

Comment cibler

Pour pouvoir manipuler quoi que ce soit, nous devons y avoir accès. En Javascript, nous avons quelques méthodes à notre disposition qui feront exactement cela.

Ces méthodes vont rechercher une valeur dans notre DOM puis renvoyer l'objet associé. Ces valeurs peuvent être des balises, des classes, des identifiants, des parentElements ou des frères et soeurs. Tout dépend de la situation qui nous est présentée.

Une fois que nous avons ciblé un objet, il est préférable de le stocker dans une variable. De cette façon, si nous devons cibler à nouveau cet élément, nous le préparerons!

Cela fera sens une fois que nous le verrons en action, mais tant que nous comprenons que nous ciblons un objet et que nous le stockons, nous sommes en train de manipuler le DOM.

Pour commencer à cibler, nous devons apprendre quelques méthodes. Voici une liste des meilleures méthodes de ciblage d’objets et de leur implémentation.

Méthodes GetElementBy

Ces méthodes nous permettent de cibler un composant spécifique de notre page et de nous le renvoyer. Ce sont des moyens spécifiques de cibler un contenu spécifique.

1.) document.getElementByTagName ('tagname');
Cela nous permet de cibler les éléments de notre document par leurs noms de balises. Par exemple, nous pouvons cibler une balise p, h1 ou section de notre choix. Nous pouvons même cibler les balises imbriquées en utilisant notre syntaxe CSS: document.getElementByTagName ('section p');
2.) document.getElementById ('idname');
Semblable à notre exemple ci-dessus, sauf qu'il renvoie l'objet spécifique que nous mettons en évidence avec un ID.
document.getElementById ('# heroHeader');
3.) document.getElementByClassName ('className');
Enfin, cette méthode accepte un nom de classe et renvoie l'objet spécifique ou une collection HTML. Si la classe a plusieurs objets nommés de cette manière, nous recevrons la collection HTML. Les collections HTML sont des objets de type tableau que nous pouvons manipuler.
Cependant, leurs méthodes peuvent être limitantes, donc utiliser Array.from () pour convertir ces collections en tableaux est un bon moyen de lutter contre ce problème.
document.getElementById ('. main-content');

Méthodes de sélecteur de requête

Les sélecteurs de requêtes sont excellents car, contrairement aux sélecteurs d'éléments, nous pouvons être flexibles dans ce que nous ciblons:

1.) document.querySelector ('tagname' || '#idName' || '.className');
querySelector () nous permet de cibler n'importe quelle valeur que nous lui transmettons. Si plusieurs éléments ont la même désignation, le premier objet trouvé sera renvoyé.
document.querySelector ('p');
document.querySelector ('# heroHeader');
document.querySelector ('. main-content');
2.) document.querySelectorAll ('tagname' || '#idName' || '.className');
querySelectorAll () comme querySelector () nous permet de cibler le contenu de la même manière. Cependant, au lieu de renvoyer un objet, il renverra tous les objets correspondant à la variable ou au nom de la classe. Une fois retourné, il se présentera sous la forme d'une liste de noeuds. Comme nos HTMLCollections, les listes de noeuds sont des objets semblables à des tableaux que nous pouvons manipuler. Encore une fois, si nous avons besoin d'accéder à plus de méthodes, nous pouvons convertir à l'aide de la méthode Array.from ().
document.querySelectorAll ('section p'); -> Retourne tous les tags p dans les tags de section
document.querySelectorAll ('. text-content'); -> Renvoie tous les éléments de la classe .text-content.

Beaucoup à digérer là-bas, mais sachez que tous ces éléments sont conçus pour cibler un élément de notre DOM et nous le renvoyer. Et parfois, nous recevons une collection de nœuds ou une collection HTML, sous la forme d’un tableau ressemblant à une structure. Dans ce cas, pensez à déployer une méthode forEach (), afin d'appliquer les modifications à CHAQUE élément de cette liste.

De même, lorsque nous appelons querySelectors ou getElementBys, assurez-vous de les affecter à un const ou à un let. Cela nous permettra de réutiliser nos cibles dans notre code.

Exemple: const header = document.querySelector ('header');

Des choses simples, mais importantes à connaître!

Comment manipuler le style et le contenu:

Maintenant que nous savons comment cibler notre contenu, commençons par le manipuler. Les trois choses les plus importantes que nous souhaitons faire sont d’ajuster le style d’un objet, de modifier le contenu du texte ou d’ajouter un nouvel élément à notre structure.

Pour ce faire, nous devrons nous plonger dans plus de méthodes et un peu de CSS!

Coiffant

Pour styliser des objets, nous pouvons faire deux choses. Nous pouvons utiliser une méthode .style ou créer une classe dans notre CSS et l’assigner ou la basculer via notre JavaScript.

.style:

En utilisant .style, nous pouvons cibler les styles CSS d’un objet et lui appliquer la propriété CSS désirée. Cependant, lorsque ceux-ci sont appliqués à nos objets, ils sont appliqués en tant que styles intégrés.

Nous implémentons cela dans notre code en l'attribuant à l'un de nos objets ciblés. Disons que nous avons stocké notre balise d’entête dans un const et que nous voulons ajuster l’arrière-plan lorsqu’une fonction est exécutée. Voici comment nous codons:

const en-tête = document.querySelector ('en-tête'); // 1
const backgroundChange = function () {// 2
  header.style.background = "pink"; // 3
}
backgroundChange (); // 4

Le bloc de code décomposé ressemble à ceci:

  1. Nous assignons notre en-tête à une variable.
  2. Nous créons ensuite la fonction background Change.
  3. Nous stockons les réglages de l’en-tête de notre en-tête dans la fonction.
  4. Nous appelons la fonction au bas de la page.

Si nous voulions que notre arrière-plan soit tout le temps rose, et pas seulement lorsqu'il est appelé par une fonction, nous pouvons simplement supprimer la syntaxe de la fonction et définir run:

const header = document.querySelector ('header');
header.style.background = "pink";

Cependant, stocker ce type de styles dans une fonction n’est pas une mauvaise idée, car cela «protège» l’action et peut être implémenté lorsque nous choisissons de l’appeler.

Approche de classe

Une autre façon d'appliquer des styles consiste à créer une classe CSS, puis à l'ajouter à l'élément souhaité via JavaScript. Cela peut paraître ridicule, car nous pouvons simplement l’affecter à l’aide de CSS, mais le fait de pouvoir effectuer une mise à jour dynamique avec JS nous sera très utile lorsque nous commencerons à construire des composants!

Étape 1: écrivez du code CSS.

Premièrement, nous devrons créer une classe CSS que nous appliquerons plus tard à notre cible. Dans cet exemple, faisons disparaître quelque chose! Pour ce faire, nous allons basculer l’affichage de bloc à aucun.

Notre code CSS:

.vanish {
   affichage: aucun;
}

L'écriture de CSS est un vieil chapeau pour nous, maintenant pour les nouvelles choses.

Notre code JS:

Nous allons cibler nos balises p et faire disparaître notre texte!

const pTags = document.querySelectorAll ('p');
pTags.forEach (fonction (p) {
  p.classList.add ('disparaître')
})

Dès que nous chargerons notre page, chacune de nos balises p disparaîtra! Comme auparavant, nous pouvons stocker ce code dans une fonction pour l'empêcher de s'exécuter lors du chargement de la page.

Aussi, voyez comment le forEach () est implémenté ici? Comme nous avons utilisé querySelectorAll (), nous avons reçu une liste de noeuds. Afin d’attribuer la classe appropriée à chaque élément de notre liste, nous devions parcourir notre liste et les affecter individuellement. La méthode forEach () fournit un moyen simple d'y parvenir, mais nous pouvons également faire de même avec une boucle for classique.

Enfin, nous avons utilisé les méthodes .classList et .add. .add est unique à la méthode .classList car elle indique à notre cible d'ajouter cette classe. Nous pouvons également utiliser des attributs tels que .remove () ou .toggle () pour supprimer ou basculer un nom de classe donné!

Avec .style () et .classList dans notre arsenal, nous devrions être en mesure de résoudre tous les problèmes de style dans JS!

Ajuster le contenu

Les deux tactiques dont nous allons parler ici consistent à ajuster le contenu de notre texte et à injecter de nouveaux éléments dans nos DOM.

Contenu du texte

Le réglage de notre contenu textuel suit une structure similaire à celle de .style (). Nous devons d’abord cibler notre contenu pour ensuite ajuster leur contenu textuel en implémentant .textContent.

const headerTitle = document.querySelector ('. main-title');
headerTitle.textContent = "Minutes Lambda de Matt."

En utilisant textContent, nous réaffectons notre texte .main-title pour lire les minutes Lambda de Matt nouvellement attribuées. Assez facile et génial non?

Ajouter notre contenu

Afin d'ajouter des éléments à notre DOM, nous devons créer quelque chose, cibler un emplacement pour le mettre, ajouter du contenu, puis le placer à cet endroit. Pour démontrer, créons un nouveau paragraphe à placer dans notre contenu principal.

Étape 1: Créer un paragraphe:

const newParagraph = document.createElement ("p");

Nous utilisons le .createElement () pour créer un élément.

Étape 2: Emplacement cible:

const location = document.querySelector ('. main-content');

Nous le savons par le haut, c'est facile maintenant!

Étape 3: Ajouter du contenu à notre nouvel élément.

Maintenant que nous savons comment ajouter .textContent (), ajoutons-le à notre nouveau p:

newParagraph.textContent = "Nous venons d'apprendre à faire ceci: WOOHOO!"

Étape 4: Ajouter à notre emplacement:

Nous pouvons utiliser quelques méthodes pour y parvenir, mais cela dépend de l’endroit où nous voulons que notre nouveau p apparaisse dans notre contenu principal. Dans ce cas, nous voulons l’ajouter à la fin de notre contenu afin d’utiliser la méthode appendChild () pour le faire.

location.appendChild (newParagraph);

Alto! Nous avons ajouté notre nouveau p à notre contenu principal! Si vous souhaitez en savoir plus sur la manière de placer des éléments créés dans le DOM, découvrez quelques-unes des nouvelles méthodes ici et ici! Inutile de les mémoriser, mais cela vous aidera à découvrir de nouvelles façons de manipuler le DOM.

Emballer

Voilà, les gars, une introduction à la manipulation du DOM! J'espère que vous allez commencer à tester ces nouvelles méthodes et à voir les choses amusantes que vous pouvez réaliser en jouant avec le DOM!

Si vous avez des questions ou des commentaires, n'hésitez pas à me contacter sur Twitter ou ici sur ma page de publication.

Comme toujours, codage heureux!