Dags för lite fulkodning på morgonkvisten. Det övergripande målet verkar vara att gå igenom elementen dels inifrån och ut, och dels baklänges. Visserligen var väl inte det första förslaget tänkt att tas ordagrant, men jag gjorde det på kul ändå.
Koden jag kom fram till ser ut som följer, och gör precis det du ber om (Förutom att din kod innehåller en p mer än ordningen du först räknade ut samt att skriptet jag skrev även tycker att script-taggen ingår i uppräkningen)
<style>
*{
border: 1px solid black;
margin: 5px;
}
/* Colour the elements hierarchically for clarity */
*{ background: #fff;}
*>*{ background: #ddd;}
*>*>*{ background: #bbb;}
*>*>*>*{ background: #999;}
*>*>*>*>*{ background: #777;}
</style>
<body>
Cheat sheet: h2 > div > p > a > li > li > li > ul > span > span > p > h1 > div > h3 > div > body
<div>
<h1></h1>
<p>
<span></span>
<span></span>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<a href=""></a>
</p>
<p></p>
<div>
<h2></h2>
</div>
</div>
<div>
<h3></h3>
</div>
</body>
<script type="text/javascript">
function applyStyle(el){
// Log the order of execution in an array
taglog.push(el.tagName);
// Print the element's tagName and where it is in the order to the element
el.appendChild(document.createTextNode(el.tagName + "---" + order++));
}
// Walk backwards
function walk_b(el){
var i = el.childNodes.length;
// Walk recursively
while(i--)
if (el.childNodes[i].nodeType == 1) // Element node?
walk_b(el.childNodes[i]);
// Apply style
applyStyle(el);
}
// Walk forward
function walk_f(el){
var i = 0;
// Walk recursively
while(++i < el.childNodes.length)
if (el.childNodes[i].nodeType == 1) // Element node?
walk_b(el.childNodes[i]);
// Apply style
applyStyle(el);
}
window.onload=function(){
// window. -> Declare in global scope
window.order = 0;
window.taglog=[];
// walk...
walk_f(document.body);
// Display the log
alert(taglog.join(" > "));
}
// </script>
Stilmallen överst färgar elementen som så att inre element blir mörkare och yttre ljusare. (Rent kosmetiskt för att lättare ¨ålla reda på dem)
I JS-koden går walk-funktionerna igenom varje element och först går igenom elementets barn och sedan applicerar applyStyle på sig självt, för att skapa ordningen inifrån och ut.
applyStyle kan uppenbarligen gör vad man vill, men i detta fall håller den koll på vad som görs med vilka element. (För debuggning)
Notera att walk_f kallar på walk_b medan walk_b kallar på sig självt. Att walk_f alls existerar beror på att du ville att diven med h3 i sig skulle hanteras sist. Är ordningen (Fram/baklänges) inte viktig kan du nöja dig med antingen walk_f eller walk_b. Men om du väljer walk_f se till att ändra anropet i funktionen till att kalla på sig själv.
Sedan får du gärna tala om vad du faktiskt vill uppnå... Kanske finns det ett enklare sätt.