Her konsentrerer vi oss om innholdet i body-elementet.
Vi skriver et program som vandrer gjennom alle barna til
body (.childNodes) og erstatter elementene vi finner med list-elementer.
Så gjør vi det samme for hvert av barna, osv. Vi lager lister i listene for å
representere den trestrukturen vi finner i dokumentet. Når vi klikker
på ett av disse list-elementene reetableres den HTML-strukturen de representerer, inklusive barna.
Prøv å klikke på knappen under, og klikk deretter på noen av list-elementene som
dukker opp:
JavaScript- koden som gjør jobber er slik:
_treelist.js
/* walk a page and toggle listview*/
// copy of original elements
var eltList;
// will use body as root
var bdyElt;
// are we in listmode already ?
var listMode=false;
// take it from here
function showStructure(){
if(listMode)
return;
var struct=document.createElement("ul");
eltList=[];
var bdyElt=document.getElementsByTagName("body")[0];
struct.appendChild(walkElement(bdyElt));
var topList=bdyElt.childNodes;
for(var ix=topList.length-1;ix >=0;ix--)
bdyElt.removeChild(topList[ix]);
bdyElt.appendChild(struct);
listMode=true;
}
// handle an element and initiate handling of children
function walkElement(elt){
var liElt=document.createElement("li");
liElt.setAttribute( "style","padding-left:4px");
// index to original copy, own attribute
liElt.setAttribute("data-lnk-ix",eltList.length);
liElt.addEventListener('click',restore,false);
eltList.push(elt.cloneNode(true));
liElt.appendChild(document.createTextNode(elt.nodeName.toLowerCase()));
var children=elt.childNodes;
var uElt=document.createElement("ul");
uElt.setAttribute( "style","padding-left:6px");
for(var ix=0; ix < children.length; ix++){
var c=children[ix];
if(c.nodeType==1)
uElt.appendChild(walkElement(c));
}
if(uElt.childNodes.length >0)
liElt.appendChild(uElt);
return liElt;
}
// restore original for an element (and its children)
function restore(e){
e.stopPropagation();
var eltOld=e.target;
var ix=parseInt(e.target.getAttribute("data-lnk-ix"));
var eltNew=eltList[ix];
if(eltNew)
if(eltNew.nodeName.toLowerCase()=="body")
// clean up everything with a reload
location.reload();
else
eltOld.parentNode.replaceChild(eltNew,eltOld);
}
