Det første er fuldstændig rigtigt ...
I f.eks. IE4+ DOM findes et objekt (som det ovenikøbet kan tillades at udelade !-), der hedder document.all og indbefatter _alle_ elementer i et dokument, man kan faktisk hente den som collection og bladre igennem, hvis man skulle have lyst (hvilket man næppe vil have !-)
-- men det giver nogle underligheder, som kan gøre det næsten umuligt at gennemskue fejl ...
Hvis man f.eks. har en form med nogle elementer:
<form name="form1">
<input name="input1">
<input id="input2" name="input2">
</form>
-- så kan man i alle tre modeller (men ikke i xhtml !-) få fat i de to inputs med:
document.forms["form1"].input1/2;
-- og den anden input med:
document.getElementById("input2");
-- mens kun IE tillader
document.getElementById("input1"); hvilket jo også dybest set er noget vrøvl, da der jo ikke er noget id ...
-- desuden tillader IE en kort-form:
input2 !-)
-- hvilket betyder, at man f.eks. kan sende elementet til en funktion sådan i IE:
lavNoget(input2);, hvor de to andre kræver en af de ovenstående metoder, altså f.eks. lavNoget(document.getElementById("input2"));
-- i de gamle Netscape (3-4) var der så også den mærkværdighed, at style-properties var properties direkte på elementet, hvor de nu er properties på style-propertyen:
NS4.x: document.getElementById("input2").fontSize = "small";
Nutidige browsere: document.getElementById("input2").style.fontSize = "medium";
-- men nu kommer der så en helt ny virkelighed, for under xhtml kan man ikke længere bruge de globale collections på document: forms, images, links m.v., hvorfor man skal vænne sig til at bruge de rene w3 DOM-metoder, som bl.a. også betyder, at man skal oprette og adressere elementer strengt DOM-agtigt, så innerHTML f.eks. er ubrugelig ...
-- som du måske kan få en fornemmelse af, er det i virkeligheden en meget større historie, som jeg heller ikke er i stand til at gennemgå fuldt ud ...
-- men for at få en ide om det, kan du jo prøve følgende HTML4-javascript i de browsere, du normalt kommer rundt i:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd"><html>
<head><title>Element-property-checker</title>
<style type="text/css">table{border-collapse:collapse;}td{padding-right:5px;border:0px;border-bottom:1px solid black;}</style>
</head>
<body>
<select name="test2">
<option value="xx">xx</option>
<option value="xxx">xxx</option>
</select>
<a STYLE="background:transparent;color:#246374;">tekst</a>
<img src="../billede.jpg" width="100" height="100" name="fisk" style="filter:alpha(opacity=60);-moz-opacity:0.6;" onMouseOver="startOpChange(this,100,1);" onMouseOut="startOpChange(this,60,1);">
<table>
<script type="text/javascript">
var n = new Array();
//document.write("<pre>");
z=document;
for(x in z) {
if(x != 'domConfig')
n[n.length] = x+"</td><td>"+z[x]+"</td></tr>";
}
n.sort();
for(i=0;n.length>i;i++){
document.writeln("<tr><td>document."+n[i]);
}
//document.write("</pre>");
alert(n.length);
</script></table></body></html>
Ny bruger
Nybegynder
Opret
Preview
