Éditeur Studio Ordre du DOM : Travailler avec l'ordre du DOM | Centre d'Assistance

Éditeur Studio Ordre du DOM : Travailler avec l'ordre du DOM

Temps de lecture : 6 min

Le modèle d'objet de document ((Document Object Model - DOM) fait référence à la façon dont les pages du site sont structurées et détermine l'ordre de navigation et de chargement des éléments. L'organisation de l'ordre du DOM d'un site peut améliorer son accessibilité et ses performances, et offrir une meilleure expérience aux visiteurs.

Dans cet article, découvrez :

Bon à savoir :

L'organisation des éléments par ordre du DOM est particulièrement importante lorsque vous utilisez des outils de mise en page complexes sur un site, tels que les piles et les flexboxes.

L'importance de l'ordre du DOM

L'ordre du DOM détermine l'ordre de chargement, de lecture et de onglet des éléments sur une page. Cela signifie qu'il peut avoir un impact sur :

Accessibilité : Certains visiteurs du site peuvent utiliser des technologies d'assistance pour naviguer sur les sites, telles que les lecteurs d'écran et/ou la touche Tab. Le DOM d'un site détermine l'ordre dans lequel il est lu par les lecteurs d'écran, ainsi que l'ordre des onglets. En savoir plus sur le DOM et l'accessibilité

Performances : Le DOM détermine la séquence dans laquelle les éléments se chargent sur un site. Faire correspondre l'ordre du DOM à l'ordre visuel des éléments crée donc une expérience de chargement logique. En savoir plus sur le DOM et les performances

Classement pour le SEO : Comme une structure alignée et logique peut améliorer l’accessibilité et le chargement du site, elle peut également augmenter les classements pour le référencement du site.

Un ordre du DOM logique est donc important, car il garantit la meilleure expérience pour les visiteurs du site. Par exemple, le menu du site doit apparaître en premier, suivi du reste des éléments de l'en-tête, puis du titre de la page, puis du contenu de la page, etc.

Ordre du DOM automatique

Le DOM automatique est basé sur l'ordre visuel des éléments sur une page - de gauche à droite et de haut en bas. L'ordre du DOM se réorganise automatiquement lorsque vous ajoutez, alignez et redimensionnez des éléments, il doit donc rester optimisé pendant que vous le faites.

Désactiver le DOM automatique

Si vous remarquez un problème avec l'ordre du DOM d'un site sur lequel vous travaillez, vous pouvez le désactiver sur l'ensemble du site. S'il y a un problème avec des éléments spécifiques, vous pouvez le désactiver sur des sections et des conteneurs individuels, ainsi que sur les cellules de la grille à l'intérieur d'une section.

Sélectionnez une option pour savoir comment désactiver le DOM automatique :

L'ensemble du site

Sections et conteneurs

Cellules d'une grille dans une section

Modifier manuellement l'ordre du DOM des éléments

Après avoir désactivé l'ordre automatique du DOM, vous pouvez le modifier manuellement pour qu'il corresponde à l'ordre visuel des éléments (de gauche à droite, de haut en bas).

Pour modifier l'ordre du DOM manuellement :

Cliquez sur Calques à gauche de l'éditeur.
Choisissez ce que vous souhaitez organiser :
- Éléments à l'intérieur d'une section :
  1. Sélectionnez une section pour l'ouvrir.
  2. Faites glisser et déposez les éléments dans la position correcte.
- Sections :
  1. Survolez la section supérieure et cliquez sur l'icône Plus d'actions .
  2. Cliquez sur Organiser.
  3. Cliquez sur Mettre au premier plan.
  4. Répétez les étapes i à iii avec toutes les autres sections, en allant de haut en bas dans le panneau.

Le panneau Calques d'un site. Le curseur a cliqué sur l'onglet Organiser d'une section, affichant les options.

Réorganiser l’ordre du DOM

Vous pouvez réorganiser l'ordre du DOM des éléments dans une section, une flexbox ou une pile, ou sur une page entière en un seul clic. L'ordre est optimisé pour correspondre à l'ordre visuel des éléments (de gauche à droite et de haut en bas).