En action 👉 code à injecteur dans la console.
parcours en profondeur
Nous allons étudier différents codes pour parcourir le DOM !
Je vous rappelle que la structure du DOM est un arbre : voir exemple
printDOM = (node, prefix) => {
//action : affichage
for(let nd of node.children) {
printDOM ( nd, prefix + '-' );
}
}
printDOM(document," ");
code récursif
printDOM = (node, prefix) => {
//action : affichage
for(let nd of node.children) {
printDOM ( nd, prefix + '-' );
}
}
printDOM(document," ");
Explication
Application
💥L'idée maintenant est de parcourir le DOM à la recherche d'un item contenant un texte.
Si le nœud contient ce string on met le nœud en rouge. Voici une solution sans parcours : code
Remplaçons simplement action par :
if (node.innerHTML.indexOf(string) > -1) {
node.style.color="red";
}
ce code met en rouge le noeud node contenant le mot string.
function find(node, string) {
if (node.innerHTML.indexOf(string) > -1) {
node.style.color="red";
}
for (n of node.children) {
find(n, string);
}
}
console.log(find(document.body, "para"));
Testez le code ;
Passons à un code offrant une plus grande granularité sur les nœuds
Etudier le code suivant
function find(node, string) {
if (node.nodeType == document.ELEMENT_NODE) {
for (var i = 0; i < node.childNodes.length; i++) {
if (find(node.childNodes[i], string))
return true;
}
return false;
} else if (node.nodeType == document.TEXT_NODE) {
if (node.nodeValue.indexOf(string) > -1) {
alert("le HTLM contient le nom cherché");
return true;
}
return false;
}
}
coller le code suivant dans la console.
function find(node, string) {
if (node.nodeType == document.ELEMENT_NODE) {
for (var i = 0; i < node.childNodes.length; i++) {
if (find(node.childNodes[i], string))
return true;
}
return false;
} else if (node.nodeType == document.TEXT_NODE) {
if (node.nodeValue.indexOf(string) > -1) {
alert("le HTLM contient le nom cherché");
return true;
}
return false;
}
}
puis tapez
console.log(find(document.body, "evry"));
puis
console.log(find(document.body, "second"));
En action
code
Trouver enfin un dernier bug !
Pourquoi ce code ne met pas en rouge l'item trouvé ?function find(node, string) {
if (node.nodeType == document.ELEMENT_NODE && node.nodeName !=
"SCRIPT") {
for (var i = 0; i < node.childNodes.length; i++) {
if (find(node.childNodes[i], string))
return true;
}
return false;
} else if (node.nodeType == document.TEXT_NODE) {
if (node.nodeValue.indexOf(string) > -1) {
//node.classList.add("find");
node.style.color="red";
return true;
}
return false;
}
}
find(document.body, "second");
idée !