Pages

TD arbre

Cours parcours du DOM

🚀Cours


👿Test

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 
  
    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.


Bilan


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.style.color="red"; // ou node.classList.add("find");
         return true;
       }
        return false;
    }
}

find(document.body, "second");

🆘idée !