Pages

Cours DOM : parcours

 Parcours du DOM

Ecrire une fonction de parcours du DOM : printDomEle


🎁
HTML

<body>
article{article $}>section{section $}*2>p{para $}*3(puis Tab)
</body>


JS
fonctions utiles :   console.group(); console.groupEnd();
on utilise children pour avoir les enfants d'un noeud.
on utilise for of pour réaliser une boucle

La fonction est lancée sur le body avec printDomEle(document.body);
const printDOMTree = (node, prefix = '', isLast = true) => {
  const connector = isLast ? '└── ' : '├── ';
  console.log(prefix + connector + node.nodeName);

  const children = Array.from(node.children);
  const newPrefix = prefix + (isLast ? ' ' : '│ ');

  children.forEach((child, index) => {
    const isLastChild = index === children.length - 1;
    printDOMTree(child, newPrefix, isLastChild);
  });
};

// Lancer depuis <body> pour un résultat propre
printDOMTree(document.body);

// Lancer depuis <html> pour un résultat propre
printDOMTree(document.documentElement);