PC & Mobile

Comment dominer le DOM avec Javascript – Minutes Lambda de Matt – Moyenne

Comment dominer le DOM avec Javascript - Minutes Lambda de Matt - Moyenne


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 dans peu de temps.

Cet article couvrira:

  1. Qu'est-ce que le DOM?
  2. Pourquoi 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 que notre professeur prend 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 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, lorsque 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 d’adapter des expériences utilisateur uniques 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 utiliser le DOM.

Premiers pas 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 aura du 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.getElementByTageName ('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 ('nom du cours');
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 semblables à des objets que nous pouvons manipuler.
Cependant, leurs méthodes peuvent être limitantes et utiliser Array.from () pour convertir ces collections en tableaux est donc 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 nos objectifs:

1.) document.querySelector ('tagname' || '#idName' || '.className');
querySelector () nous permet de cibler n'importe quelle valeur que nous lui transmettons. Si plusieurs éléments portent 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 nœuds. 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 en utilisant la méthode Array.from ().
document.querySelectorAll ('section p'); -> Renvoie toutes les balises p dans les balises de section
document.querySelectorAll ('. text-content'); -> Renvoie tous les éléments avec la classe .text-content.

Beaucoup à digérer là-bas, mais sachez que tout cela est conçu 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. Lorsque cela se produit, pensez à déployer un pour chaque() méthode, afin d’appliquer des modifications à CHAQUE élément de cette liste.

Aussi, quand on invoque querySelectors ou getElementBys assurez-vous de les attribuer à un const ou laisser. Cela nous permettra de réutiliser nos cibles dans notre code.

Exemple: const en-tête = document.querySelector ('en-tête');

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 un .style méthode ou créer une classe dans notre CSS et l’affecter 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 souhaitée. Cependant, lorsque ceux-ci sont appliqués à nos objets, ils sont appliqués en tant que styles en ligne.

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, 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 ces types 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: Ecrire des CSS.

Tout d’abord, 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 vieux chapeau pour nous, maintenant pour les nouvelles choses.

Notre code JS:

Ciblons nos p balises et faire disparaître notre texte!

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

Dès que nous chargeons notre page, chacun de nos p les tags vont disparaître! 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 pour chaque() est mis en œuvre ici? Parce que 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. le pour chaque() La méthode offre un moyen facile d’y parvenir, mais nous pouvons également faire de même avec un classique. pour la boucle.

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

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 pouvoir ajuster leur contenu textuel en mettant en œuvre .textContent.

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

En utilisant textContent nous réaffectons notre .titre principal texte pour lire notre nouvellement attribué Minutes Lambda de Matt. 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 () créer un élément.

Étape 2: Lieu 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 () Faisons-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 au sein de notre contenu principal. Dans ce cas, nous souhaitons l’ajouter à la fin de notre contenu afin que nous utilisions le appendChild () méthode 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 Gazouillement ou ici sur ma page de publication.

Comme toujours, codage heureux!

Show More

SupportIvy

SupportIvy.com : Un lieu pour partager le savoir et mieux comprendre le monde. Meilleure plate-forme de support gratuit pour vous, Documentation &Tutoriels par les experts.

Related Articles

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Close
Close