Parcours du DOM
🎁
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);
<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);