JS - Recursive vol. 2

Poznajemy kolejny wzorzec rekurencyjny – warunek bazowy i return. Do dzieła.

Oto nasz mocno zagnieżdżony element:

<ul id="myUl"><li><a href="">Text123</a></li></ul>

Chcemy się tam dobrać do jego textNode. Zobaczmy w uproszczeniu, jak by to wyglądało:

window.addEventListener('DOMContentLoaded', function(){

    let ul = document.getElementById("myUl");

    console.log(ul);
    //ul
    console.log(ul.nodeType === Node.TEXT_NODE);
    //flase

    ul = ul.childNodes[0];

    console.log(ul);
    //li
    console.log(ul.nodeType === Node.TEXT_NODE);
    //false

    ul = ul.childNodes[0];

    console.log(ul);
    //a
    console.log(ul.nodeType === Node.TEXT_NODE);
    //flase

    ul = ul.childNodes[0];

    console.log(ul);
    //text
    console.log(ul.nodeType === Node.TEXT_NODE);
    //true
   
 });

Ok, piszemy funkcję:

function getTextNode(el){
    
    if(el.nodeType === Node.TEXT_NODE)
        return el;

    return getTextNode(el.childNodes[0]);
}

window.addEventListener('DOMContentLoaded', function(){

    let ul = document.getElementById("myUl");

    let txtNode = getTextNode(ul);

    console.log("text", txtNode);
    //#text "Text123"
    
});

Jest warunek bazowy, warunek zwrotu wartości oraz rekurencyjne wywołanie funkcji (koniecznie z return) na następnym elemencie.

Warunków bazowych może być więcej i mogą one obsługiwać różne błędy, ale musi być ten jeden, który obsługuje zwrot ostatniego elementu:

function getTextNode(el){

    if(el === null)
        return null;
    
    if(el.nodeType === Node.TEXT_NODE)
        return el;

    return getTextNode(el.childNodes[0]);
}

window.addEventListener('DOMContentLoaded', function(){

    let ul = document.getElementById("myUlNonExisting");

    let txtNode = getTextNode(ul);

    console.log("text", txtNode);
    //text null
    
});

Więcej wzorów rekurencyjnych w następnych lekcjach.

JS – Recursive vol. 2