Comment utiliser le panneau DOM pour modifier la structure HTML en mappant des éléments en mode En direct ou des sélecteurs appliqués au Designer CSS avec leur balisage HTML.

Le panneau DOM présente une arborescence HTML interactive des contenus statiques et dynamiques. Cette vue permet de mettre visuellement en correspondance les éléments en mode En direct avec leurs balises HTML et les sélecteurs appliqués dans CSS Designer. Via le panneau DOM, vous pouvez également apporter des modifications à la structure HTML, dont l’effet est immédiatement visible en mode En direct.

Pour ouvrir le panneau DOM, sélectionnez Fenêtre > DOM. Vous pouvez également utiliser les raccourcis clavier Ctrl + / (Windows) ou Cmd + / (Mac) pour ouvrir le panneau DOM.

Lorsque vous faites glisser des éléments pour les insérer directement en mode En direct, l’icône </> apparaît avant que vous ne déposiez l’élément. Vous pouvez cliquer sur cette icône pour ouvrir le panneau DOM et insérer l’élément à l’endroit approprié dans la structure du document. Pour plus d’informations, consultez la section Insertion d’éléments directement en mode En direct.

En mode Code ou Création, le panneau DOM affiche uniquement les éléments statiques ; en mode En direct, il affiche aussi bien les éléments statiques que dynamiques.

Dans les documents à grille fluide, le panneau DOM permet de visualiser la structure du DOM HTML, mais pas de modifier la structure HTML.

Remarque :

Dans le panneau DOM, vous pouvez modifier uniquement le contenu statique. Les éléments dynamiques ou en lecture seule sont signalés en gris foncé.

Panneau DOM
Panneau DOM

Vous pouvez déplacer le panneau DOM pour le positionner où vous le souhaitez dans l’interface utilisateur. Vous pouvez également l’ancrer le long d’autres panneaux.

Utilisation du panneau DOM

  1. Ouvrez le document de votre choix, puis sélectionnez Fenêtre > DOM pour afficher le panneau DOM.

  2. Passez en mode En direct et cliquez sur l’élément que vous souhaitez inspecter ou modifier.

    • Le balisage HTML de l’élément sélectionné apparaît en évidence dans le panneau DOM. 
    • Le sélecteur appliqué apparaît en évidence dans CSS Designer.
    • Le code correspondant apparaît en évidence en mode Code.
    • La balise correspondante apparaît en évidence (en bleu) dans le sélecteur de balises.

    Vous avez également la possibilité de sélectionner un élément HTML dans le panneau DOM. Lorsque vous cliquez sur un élément dans le panneau DOM :

    • Le mode En direct défile jusqu’à l’élément correspondant.
    • Si le mode Code est ouvert, celui-ci défile jusqu’au code correspondant à l’élément.
    • CSS Designer (volet Sélecteurs) défile jusqu’au sélecteur correspondant le plus proche (comme si vous cliquiez sur l’élément en mode En direct).
    • La balise apparaît en évidence dans le sélecteur de balises.

    Cette synchronisation entre les différentes vues et CSS Designer permet de visualiser immédiatement le balisage HTML et le style associés à l’élément sélectionné. 

  3. Poursuivez la modification de l’élément comme vous le souhaitez (édition HTML ou CSS). Pour plus d’informations sur l’utilisation du panneau DOM et la manière dont il permet de modifier les balises HTML, consultez la page Modification de la structure HTML à l’aide du panneau DOM. Pour plus d'informations sur CSS Designer, voir Mise en forme des pages avec CSS Designer.

Modification de la structure HTML à l’aide du panneau DOM

L’élément actuellement sélectionné sur la page est mis en évidence dans le panneau DOM. Vous pouvez accéder à n’importe quel nœud ou élément avec les touches fléchées.

  • Pour sélectionner un élément ou un nœud, cliquez dessus. Pour développer ou réduire un élément ou un nœud, cliquez sur la balise HTML ou double-cliquez sur le sélecteur à droite de la balise.
  • Pour dupliquer un élément ou un nœud, cliquez dessus avec le bouton droit, puis cliquez sur Dupliquer. Lorsque vous dupliquez un élément associé à un ID, cet ID est incrémenté pour le nouvel élément (dupliqué).
  • Pour copier un élément ou un nœud, cliquez dessus avec le bouton droit, puis cliquez sur Copier. Si vous avez copié un élément avec enfants, les éléments enfant sont également copiés.
  • Pour coller un élément ou un nœud, cliquez sur l’élément ou le nœud au-dessous duquel imbriquer les éléments copiés. Cliquez ensuite avec le bouton droit sur l’élément ou le nœud et sélectionnez Coller. 
  • Pour coller un élément copié en tant qu’enfant d’un élément ou nœud spécifique, cliquez avec le bouton droit sur cet élément ou nœud (parent) et sélectionnez Coller en tant qu’enfant.
  • Pour déplacer ou réorganiser des éléments, faites-les glisser vers l’emplacement souhaité dans le panneau DOM.

Une ligne verte indique où l’élément déplacé sera positionné. Si vous déplacez l’élément au-dessus de l’élément mis en évidence en gris (élément de référence), l’élément déplacé est défini en tant que premier enfant de l’élément de référence.

  • Pour supprimer un élément ou un nœud, cliquez dessus avec le bouton droit et sélectionnez Supprimer.

Vous pouvez annuler (Ctrl/Cmd + Z) ou rétablir (Ctrl/Cmd + Y) les opérations effectuées dans le panneau DOM.

Raccourcis clavier :

  • Dupliquer - Ctrl + D (Windows) / Cmd + D (Mac)
  • Supprimer - Suppr ou Retour arrière
  • Copier - Ctrl + C (Windows) / Cmd + C (Mac)
  • Coller - Ctrl + V (Windows) / Cmd + V (Mac)
  • Annuler - Ctrl + Z (Windows) / Cmd + Z (Mac)
  • Rétablir - Ctrl + Y (Windows) / Cmd + Y (Mac)

Pour effectuer des opérations de modification mentionnées ci-dessus pour plusieurs éléments, sélectionnez les plusieurs éléments dans le panneau DOM :

  • Cliquez en maintenant la touche Maj enfoncée sur les éléments requis pour une sélection contiguë
  • Cliquez en maintenant la touche Ctrl enfoncée sur les éléments requis pour une sélection non contiguë

Remarque :

En règle générale, lorsqu’une page est modifiée, le bouton Actualiser dans la barre d’outils du document se transforme en bouton Arrêter, indiquant que la page se recharge. Une fois la page rechargée, le bouton Actualiser s’affiche à nouveau pour indiquer que la page est complètement chargée.

Options d’édition dans le panneau DOM
Options d’édition dans le panneau DOM

Important : si votre page contient du code JavaScript, le menu contextuel du panneau DOM s’affiche pendant quelques instants, puis devient indisponible. Pour utiliser le menu contextuel, masquez la vue En direct (Options de l’affichage en direct > Masquer l’affichage en direct), puis désactivez JavaScript (Options de l’affichage en direct > Désactiver JavaScript).

Modification de balises, de classes et d’ID dans le panneau DOM 

Vous pouvez modifier des balises, des classes et des ID en double-cliquant dessus dans le panneau DOM. Vous pouvez également ajouter des classes ou des ID supplémentaires en les séparant par un espace. Pour les balises qui ne sont pas associées à une classe ou un ID, vous pouvez saisir le nom de la classe ou de l’ID après avoir double-cliqué sur la balise.

Les conseils de code s’affichent lorsque vous commencez à saisir la balise, la classe ou l’ID. Pour limiter les conseils aux classes, commencez à taper par un point. Pour afficher uniquement les ID dans les conseils, commencez à taper par un signe dièse (#).

Modification de classes
Modification de classes

Insertion d’éléments dans le panneau DOM

Vous pouvez désormais insérer de nouveaux éléments dans votre page web à l’aide du panneau DOM de l’une des manières suivantes :

  • Appuyez sur la barre d’espace ou cliquez sur l’icône d’insertion à côté de l’élément requis dans le panneau DOM. Dans la fenêtre contextuelle qui s’affiche, cliquez sur l’une des options. Pour envelopper plusieurs éléments dans une balise, sélectionnez les éléments requis, puis sélectionnez Envelopper avec balise dans les options d’insertion.
Une balise div d’espace réservé est insérée et affichée en mode modification. Vous pouvez saisir le nom de la balise requise au lieu de la balise div.
Options d’insertion dans le panneau DOM
Options d’insertion dans le panneau DOM

  • Cliquez sur l’élément requis dans le panneau Insertion et faites-le glisser dans le panneau DOM. Les guides en direct s’affichent afin d’indiquer où l’élément sera inséré. Déposez l’élément à l’emplacement souhaité.

Lorsque vous insérez des balises à partir du panneau DOM, le texte par défaut (espace réservé) et les attributs requis pour ces balises sont également insérés :

  • Lorsque vous insérez l’une des balises suivantes et validez les modifications, le texte par défaut est inséré en mode Code, En direct et Création :
    div, header, nav, aside, article, section, footer, h1-h6 et hgroup
  • Lorsque vous insérez une balise table et validez les modifications, un tableau 3x3 est inséré.
  • Lorsque vous insérez une balise embed ou img et validez les modifications, la boîte de dialogue Sélectionner un fichier apparaît et vous invite à sélectionner le fichier approprié.
  • Lorsque vous insérez une balise meta et validez les modifications, le code suivant est ajouté en mode Code : <meta name="" content="">
  • Lorsque vous insérez une balise figure et validez les modifications, une balise figure avec figcaption (légende) imbriquée est insérée.
  • Lorsque vous insérez une balise ul ou ol et validez les modifications, une balise ol/ul avec balise li imbriquée est insérée.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne