Misschien wat offtopic maar wil toch ff laten zien dat het werken met een HTML DOM waar geen id's in voorkomen toch wel handig is..
Dit is bijvoorbeeld een stuk code die uit een XML structuur een UL/LI structuur in de HTML pagina aanmaakt, die meteen kunnen inklappen uitklappen etc. Matig complex dus, maar géén gebruik van id's.
oNodes is een node collection van een xml document dat geopend is.
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
| function walkXMLTreeStructured(oNodes, oParentContainer, bRootLevel, dataPath)
{
var j;
for (j=0;j<oNodes.length;j++)
{
//Maak een LI aan voor iedere entry
var oLI = document.createElement("LI");
oParentContainer.appendChild(oLI);
//Heeft de entry children, voorzie de LI van de juiste grafische presentatie
//Hou hierbij rekening met het feit dat de eerste rij entries nooit onzichtbaar mag zijn
if (bRootLevel)
{
oLI.parentElement.style.display = "";
}
else
{
oLI.parentElement.style.display = "none";
}
if ((oNodes.item(j).childNodes.length>0 || oNodes.item(j).getAttribute("path") != null))
{
oLI.style.listStyleImage = "url(" + sScriptPath + "xmltree_plus.bmp)";
}
else
{
oLI.style.listStyleImage = "url(" + sScriptPath + "xmltree_item.bmp)";
}
// Set alle LI properties en methods.
oLI.innerText = oNodes.item(j).getAttribute("description");
oLI.onclick = element_li_onclick;
oLI.onmouseover = element_li_onmouseover;
oLI.onmouseout = element_li_onmouseout;
oLI.linkSource = oNodes.item(j).getAttribute("href");
oLI.opened = false;
oLI.nodeId = oNodes.item(j).getAttribute("id");
with (oLI.style)
{
marginTop = "0px";
marginBottom = "0px";
cursor = "hand";
}
// Wanneer een entry een nieuw datapad heeft (De lokatie van de XML file) geef deze dan
// door aan de LI, deze is nl. nodig voor het opbouwen van de HREF's. Heeft de entry
// geen nieuwe datapath, hanteer dan de laatstbekende datapath.
if (oNodes.item(j).getAttribute("path") != null)
{
oLI.dataPath = oNodes.item(j).getAttribute("path");
oLI.hasIndex = true;
}
else
{
oLI.dataPath = dataPath;
oLI.hasIndex = false;
}
//Als een entry children heeft, maak dan een UL aan en roep walkXMLTree
//opnieuw aan om de children uit te lezen om de UL met LI's te vullen.
if (oNodes.item(j).childNodes.length>0)
{
var oUL = document.createElement("UL");
oParentContainer.appendChild(oUL);
with (oUL.style)
{
marginBottom = "0px";
marginTop = "0px";
lineHeight = "14px";
marginLeft = "16px";
}
walkXMLTreeStructured(oNodes.item(j).childNodes, oUL, false, dataPath);
}
}
} |
Zoals je kunt zien is de functie recursief.
En hier ff de onclick handler van een LI, zoals je ziet ook weer géén gebruik van id's. Op deze manier maakt het dus niet uit hoe groot de structuur is.
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
| function element_li_onclick()
{
window.event.cancelBubble = true;
oLI = this;
oUL = this.nextSibling;
// De UL's die aangemaakt worden zijn geen children van een LI maar een child van de parent UL, daarom
// gebruiken we nextsibling om de kijken of de volgende node een child UL is die we zichtbaar of onzichtbaar
// moeten maken.
if (oUL)
{
if (oUL.tagName == "UL")
{
if (oUL.style.display == "none")
{
oUL.style.display = "";
oLI.style.listStyleImage = "url(" + sScriptPath + "xmltree_minus.bmp)";
}
else
{
oUL.style.display = "none";
oLI.style.listStyleImage = "url(" + sScriptPath + "xmltree_plus.bmp)";
}
}
}
// Als de node een HREF bevat, open deze dan in de toegewezen frame.
if (oLI.linkSource != null)
{
parent.frames[oHTCElement.targetFrame].location.href = buildPath(oLI.linkSource, oLI.dataPath);
}
if (oHTCElement.actionType == "picklist")
{
var oTextBox = oHTCElement.childNodes(0)
buildTextboxValue(oTextBox, oLI, '', oLI.nodeId)
}
// Als de node nog een substructuur bevat die ingeladen moet worden, laad deze dan in.
// Een node kan dus zowel een path als een href bevatten.
if (oLI.hasIndex)
{
if (oLI.opened == false)
{
oLI.opened = true;
oLI.style.listStyleImage = "url(" + sScriptPath + "xmltree_minus.bmp)";
newIndex(oLI.dataPath, this);
}
}
} |
Je ziet, enorm flexibel.. Het heeft dus echt wel z'n voordelen.
/u/8680/crop67b363025f8f9_cropped.png?f=community)
:strip_exif()/u/3333/pumpkin_avatar.gif?f=community){kind=avatar}
Maar ik werk zelf helemaal niet meer met element namen (id), werk altijd vanuit de HTML DOM om de code flexibel te houden. Ik benader dus nooooit een object via de ID, vandaar dat dat wat weggezakt was..
:strip_exif()/u/27216/bosmonster_dropdown.gif?f=community)
JE had hem helemaal door.. De code is en blijft prima. Dat zijn manier om het form te benaderen niet al te flexibel is doet niks af aan de syntax correctheid van de code..
Was meer om hem te laten begrijpen hoe de zooi in elkaar zat..
:strip_exif()/u/22479/169-back.gif?f=community)
:strip_exif()/u/12408/dm_u_judi.gif?f=community)