Si vous voulez être développeur Web, vous devez savoir ce qu’est le DOM. Vous devez savoir comment sélectionner différents éléments DOM afin de pouvoir lire leur contenu ou les modifier. La traversée du DOM vous indique comment parcourir le DOM à l’aide de JavaScript créé par les documents HTML. Voici un guide complet sur la façon d’utiliser JavaScript pour se déplacer dans le DOM.
Le Document Object Model, ou DOM, est une manière arborescente de montrer à quoi ressemble un document HTML. Il vous donne une API qui vous permet, en tant que développeur Web, d’utiliser JavaScript pour interagir avec un site Web. Chaque partie du DOM est appelée un”nœud”. Le DOM est le seul moyen de modifier la structure, le contenu et le style d’un document HTML.
La traversée du DOM, également appelée marche ou navigation dans le DOM, est le processus de sélection de nœuds dans l’arborescence DOM à partir d’autres nœuds. Vous savez probablement déjà comment utiliser l’identifiant, la classe ou le nom de balise d’un élément pour y accéder dans l’arborescence DOM.
Comment parcourir le DOM en utilisant JavaScript
Comprendre l’arbre DOM
Le DOM est configuré comme un arbre, chaque branche étant un nœud. Même si de nombreux nœuds représentent des éléments HTML, ils représentent également les attributs et le texte qui accompagnent les éléments. Dans les sections qui suivent, vous en apprendrez plus sur la façon dont l’arborescence DOM est assemblée. Vous découvrirez également les parties utilisées pour identifier les nœuds et les groupes de nœuds, ce qui est la clé pour accéder aux nœuds de manière utile.
L’objet document est la base de tous les nœuds du DOM. Les nœuds sont organisés en arbre, avec des nœuds imbriqués sous d’autres nœuds. Ci-dessous, un exemple de la représentation DOM d’une page Web simple : Connaître l’arrangement de l’arborescence DOM et de ses feuilles vous aide à comprendre comment accéder à des nœuds spécifiques lorsque vous travaillez avec JavaScript. Cela est particulièrement vrai lorsque vous travaillez avec des pages Web plus complexes. La section Navigation dans l’arborescence DOM de ce guide comprend une discussion plus approfondie sur le déplacement dans les nœuds de l’arborescence DOM.
Naviguer dans l’arborescence DOM
Utiliser les méthodes standard sur les objets DOM. Celles-ci existent depuis plus longtemps et fournissent certaines des méthodes de sélection les plus simples. Utilisation des sélecteurs de requête. Ce sont des fonctionnalités relativement nouvelles en JavaScript standard et fournissent des méthodes de sélection avancées. Ils sont idéaux lorsque vous souhaitez effectuer des requêtes compliquées en quelques commandes.
FAQ
Pouvez-vous accéder au DOM en utilisant JavaScript ?
JavaScript peut utiliser l’attribut className d’un élément HTML pour le trouver et renvoyer un tableau de nœuds correspondants. getElementByClassName est la fonction intégrée pour cette opération ().
Comment gérer DOM en JavaScript ?
JavaScript peut modifier tous les éléments HTML de la page. JavaScript peut modifier tous les attributs HTML de la page. JavaScript peut modifier tous les styles CSS de la page. JavaScript peut supprimer des éléments et des attributs HTML existants. JavaScript peut ajouter de nouveaux éléments et attributs HTML.
Comment accéder au DOM d’un site Web ?
Concentrez votre curseur sur le panneau Éléments. Appuyez sur Ctrl + F ou Commande + F (Mac). La barre de recherche s’ouvre en bas de l’arborescence DOM. Tapez La Lune est une Maîtresse Harsh. La dernière phrase est mise en surbrillance dans l’arborescence DOM.