Javascript e DOM: estrarre elementi da una pagina html agosto 4, 2008
Inviato da davide in : Programmazione , trackback
(1 votes, average: 4 out of 5) 
Loading ...
Se vi capita spesso di dover estrarre da pagine web lunghe liste di elementi (dello stesso tipo), misti però a contenuti che non ci interessano, non è pensabile poter selezionare uno a uno gli elementi e farne il copia e incolla, o tantomeno copiare il contenuto di tutta la pagina e poi “spulciare” per rimuovere tutto il testo che non ci serve. Una soluzione molto comoda che ho sperimentato da poco sta nell’usare un piccolo script Javascript per estrarre il contenuto in automatico dalla pagina.
Mi spiego meglio con un esempio: supponiamo di voler estrarre in automatico tutti i titoli dei post presenti nella home di questo blog. La cosa è poco utile in questo caso, per 9-10 elementi si fa prima a mano… ma pensate a pagine con migliaia di elementi, ad esempio inseriti in tabelle da cui vogliamo estrarre, per ogni riga, un solo campo! Ci sarebbe davvero da impazzire!
Da ora proseguo con l’esempio appena citato…chiaramente, per ogni caso reale, lo script va adattato alla struttura della pagina. Si danno quindi per scontate conoscenze basilari di Javascript e HTML.
Diamo quindi un’occhiata alla struttura html della pagina: notiamo che ogni titolo è all’interno del tag div “content” e presenta questa struttura, che si ripete per ogni post:
<h2>
<a href="http://www.newdigest.com/life/bologna/ryanair-una-nuova-base-lowcost-a-bologna/"
title="Permalink per : Ryanair: una nuova base lowcost a Bologna">
Ryanair: una nuova base lowcost a Bologna
</a>
<em>Luglio 31, 2008</em>
</h2>
Un consiglio grande come una casa: se avete Firefox, usate il DOM inspector, è un tool davvero formidabile! Se poi volete ancora di più, provate l’estensione Firebug, che ho già discusso QUI.
OK, allora dobbiamo prendere il testo contenuto nei tag <a> di tutti gli elementi <h2> presenti del div con id=”content”.
Facciamo allora un paio di funzioni javascript:
function getSubElementsWithTag(parent_id,tag){
var root = document.getElementById(parent_id);
var elem = root.getElementsByTagName(tag);
return elem;
}
function getTitles(){
//prende i figli di content con tag h2
var figli=getSubElementsWithTag("content","h2");
var b=[];
var cont=0;
for (i=0; i<figli.length; i++){
//per ogni elemento h2, prendo il testo del primo child element (<a>)
txt=figli[i].firstChild.text;
b[cont++]=txt;
}
return b;
}
Una volta ottenuto l’array con il testo che ci serve, possiamo ad esempio stamparne il contenuto in una finestra popup:
function writeToWindow(elementi){
var testo="";
for (i=0; i<elementi.length; i++){
testo=testo + elementi[i]+ "<br/>";
}
winRef = window.open( null , "Dati estratti" );
winRef.document.writeln(testo);
}
Spero sia tutto chiaro: se vi servono maggiori info sulle funzioni DOM, andate qui:
http://developer.mozilla.org/en/docs/Category:Gecko_DOM_Reference
Per fare funzionare il tutto, scriviamo un’ultima funzione per prendere i dati e aprire la finestra e salviamo il file con queste 4 funzioni:
function estraiElementi(){
elems=getTitles();
writeToWindow(elems);
}
Infine, salviamo in locale la pagina web da cui vogliamo estrarre i dati, ed editiamola inserendo nell’head:
<script type="text/javascript" src="file_con_funzioni.js"></script>
e aggiungiamo al body l’attributo onload, per far sì che al caricamento della pagina venga eseguita la funzione estraiElementi():
<body onload="estraiElementi();" >
Con questo è tutto… un’altra funzione utile, che possiamo usare se gli elementi hanno tutti lo stesso attributo class, la trovate qui:
Commenti»
ciao,
cercando un po’ ho trovato alcuni parser XML generici che vanno bene senz’altro anche per normali pagine html. Qui ci sono i link, dagli esempi che ci sono mi sembrano anche semplici da usare:
http://www.roseindia.net/xml/dom/accessing-xml-file-java.shtml
http://www.javastaff.com/article.php?story=20041228121709281
buon lavoro
Ciao, gran bell’articolo, ma se volessi qualcosa di simile in java e non javascript??? mi saresti di grande aiuto