Nous allons étudier différents codes utilisant un parcours récursif.
L'idée 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.
Nous allons nous inspirer de la structure du code récursif pour parcourir le
DOM
printDOM = (node, prefix) => {
//action : affichage
for(let nd of node.children) {
printDOM ( nd, prefix + '-' );
}
}
printDOM(document," ");
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 ;
Analyse :
que vaut document.body.innerHTML.indexOf("second")
testez alors
if (document.body.innerHTML.indexOf("second") > -1) {
document.body.style.color="red";}
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
Pourquoi ce code ne marche pas dans jsbin !
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 !
