Recórrer el DOM. Formulari Google Account

De wikijoan
Salta a la navegació Salta a la cerca

Introducció

Referències

Desenvolupament

1. Formulari per crear un compte de gmail

1. El següent enllaç és el formulari per crear un compte de gmail a Google.

Copia el codi font. Localitza l'etiqueta <form> i </form> i determina quants formularis hi ha. Inspecciona el codi font i localitza les diferents parts del formulari. Tabula correctament tot el formulari (és una mica lio, però és aclaridor, hi ha moltes etiquetes). Enmig de totes aquestes etiquetes trobarem els INPUT que ens interessen.

2. Mitjançant la col·lecció forms, troba tots els elements del formulari (és a dir, els INPUT). Fixa't que el botó de submit no forma part del formulari. Llista tots els elements del formulari, i les propietats importants.

3. Cerca tots els fills del formulari. Amb childNodes veuràs que només penja un fill del formulari. És correcte aquest resultat, no? (mira el formulari correctament tabulat)

4. Si volem recórrer tots els nodes que pengen del formulari, hem d'endinsar-nos en tot l'arbre del formulari, de manera recursiva. Per fer-ho, podem utilitzar el codi que hem trobat a:

function walkTheDOM(node, func) {
    func(node);
    node = node.firstChild;
    while (node) {
        walkTheDOM(node, func);
        node = node.nextSibling;
    }
}

// Example usage: Process all Text nodes on the page
walkTheDOM(document.body, function (node) {
    if (node.nodeType === 3) { // Is it a Text node?
        var text = node.data.trim();
        if (text.length > 0) { // Does it have non white-space text content?
            // process text
        }
    }
});

Cerca tots els nodes que pengen del formulari.

5. Un cop els tens tots, ara pots filtrar només els que ens interessen: els INPUT.

solució

<script>
forms = document.getElementsByTagName("form");
console.log("Número de formularis: " + forms.length);

console.log("Número d'elements del formulari:" + forms[0].elements.length);

for (i=0;i<forms[0].elements.length;i++)           
{
	console.log(forms[0].elements[i].name);
	console.log(forms[0].elements[i].tagName);
	console.log(forms[0].elements[i].type);
	console.log(forms[0].elements[i].value);
	console.log("");
}

console.log("==================================");

var google_form = document.getElementsByTagName("form");
console.log("Número de formularis: " + google_form.length);
//només té un fill
console.log("Número de fills: " + google_form[0].childNodes.length);
//si vull trobar els inpunts, hauré de baixar recursivament per tota l'estructura del formulari.

console.log("==================================");

//https://www.javascriptcookbook.com/article/traversing-dom-subtrees-with-a-recursive-walk-the-dom-function/
function walkTheDOM(node, func) {
    func(node);
    node = node.firstChild;
    while (node) {
        walkTheDOM(node, func);
        node = node.nextSibling;
    }
}


walkTheDOM(google_form[0], function (node) {
    console.log(node.nodeName)
});

console.log("==================================");

walkTheDOM(google_form[0], function (node) {
    if (node.nodeName === "INPUT") {
    	console.log(node.nodeName + " - " + node.nodeName + " - " + node.name + " - " + node.id)
    }
});


</script>

2. Llistar imatges d'una web

Basant-nos en l'anterior codi, podem recórrer tots els elements del DOM en una pàgina web. Per exemple, un llistat de totes les imatges. Per exemple, propva-ho amb algun diari digital com ara:

  • naciodigital.cat

o d'altres. Es tracta de llistar la url de totes les imatges. Més endavant, aprendràs a posar tota aquesta informació en una base de dades, per exemple.

solució:

<script>

//https://www.javascriptcookbook.com/article/traversing-dom-subtrees-with-a-recursive-walk-the-dom-function/
function walkTheDOM(node, func) {
    func(node);
    node = node.firstChild;
    while (node) {
        walkTheDOM(node, func);
        node = node.nextSibling;
    }
}


walkTheDOM(document.body, function (node) {
    if (node.nodeName === "IMG") {
    	console.log(node.src)
    }
});

</script>

Entrega

Entrega al Classroom


creat per Joan Quintana Compte, Novembre 2020