www.lipfert-malik.de>webdesign>tutorial>JavaScript für alle Browser> getElementById <> Impressum

„getElementById” für alle Browser
Kristof Lipfert
Dipl.-Des.(FH)

Web-Design Beispiel zu den Tutorien JavaScript für alle Browser und CSS für alle Browser, getElementById

Mit einem neuen getElementById für die Browser Internet Explorer 4 und Netscape 4 kann für viele Zwecke eine einheitliche Syntax bei JavaScript, zugleich auch bei HTML und CSS, für alle üblichen Browser ab Version 4 eingesetzt werden. Weitere Browserweichen werden oft überflüssig.

Valides HTML + CSS

Dabei werden nach dem Aufbau der Seite für Netscape 4 gemäß der internen Struktur die "Layer" abgefragt. Bei validem HTML ohne Verwendung des Layer-Tags handelt es sich um per CSS positionierte Divs, die per JavaScript angesprochen werden können. Die vorliegenden Scripte erfassen alle Ebenen der Verschachtelung, und weitere Funktionen etwa zum Erfassen von Links sind verfügbar.

Code getElementById per Scan

Während für den Internet Explorer die per document.all verfügbaren Objekte direkt angesprochen werden können muss für Netscape 4 das Objekt durch die Layerebenen immer wieder erneut gesucht werden, getElementById per Scan, oder es wird einmalig eine Liste aller Layer mit Zuweisung der Funktion an das Array erstellt, getElementById per Array.

1 2 3 4 5 6 7 8 9 10 11 12 13 14
/*  Kristof Lipfert Duesseldorf (c) 2001, 2002      */
/*  getElementById fuer NC 4 und IE 4               */

if(!document.getElementById){
 function getElementById(id_var, d, dl){
   if(!d)d=document;dl=d.layers;
   db=document.all?d.all[id_var]:d[id_var];
    if(dl&&!db)for(var i=0;i<dl.length;i++)
      db=getElementById(id_var, dl[i].document);
   if(!db.style)db.style=db;return db;
}
document.getElementById=window.getElementById;
}

Um später getElementById bei einheitlicher Syntax verwenden zu können und Eigenschaften dynamisch zu verändern reicht aber die Adressierung der Elemente selbst noch nicht aus, so müssen die jeweils benötigten Objekte erzeugt werden, wie beispielsweise style.

Code getElementById per Array

Über die neu geschaffene Funktion getElementById wird das automatisch erstellte Array aller vorhandenen Layer angesprochen. Auf Eigenschaften wie visibility kann direkt in einheitlicher Syntax von allen Browsern zugegriffen werden.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
/*  Kristof Lipfert Duesseldorf (c) 2001, 2002      */
/*  getElementById fuer NC 4 und IE 4               */
 
if(!document.getElementById){
 
  function getElementById(id_var){
    if(document.all)return document.all[id_var];
    else if(document.ids)return getLayerById[id_var];}
 
  document.getElementById=window.getElementById;
 
  if(document.ids){
    var getLayerById=[];
    function doLayerArray(){ 
        with([window.document]){
        while(length){with(shift()){
         for(i=0;i<layers.length;i++){
           getLayerById[layers[i].id]=
              layers[i].style=layers[i];
           unshift(layers[i].document);
        }}}}}doLayerArray();
   }}

Die Einbindung des Scripts kann am Ende des HTML nach dem body oder per onload erfolgen. Für Netscape 4 wäre eine Einbindung auch über eine JSSS Datei und eine Funktion window.onload= vorstellbar.

20 21 22
                ...
        }}}}} window.onload=function(){doLayerArray();}
   }}

Natürlich kann der Aufruf doLayerArray() auch in die neue Funktion getElementById direkt eingebunden werden. In den meisten Fällen steht die Layerstruktur zwar fest und ein einmaliger Aufruf ist performanter, dafür kann diese Methode -wie auch die erste Methode per Scan- aber komfortabler sein.

7 8 9
                ...
        else if(document.ids){ doLayerArray();
               return getLayerById[id_var]; } }

Beim folgenden Script x4-getelementbyid.js wird die Existenz des benötigten Eintrags im Layer-Array abgefragt und das Array nur bei Bedarf und i.d.R. nur einmalig erstellt:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
/*  Kristof Lipfert Duesseldorf (c) 2001, 2002      */
/*  getElementById fuer NC 4 und IE 4               */
 
if(!document.getElementById){function
getElementById(id_var){ if(document.all)return
document.all[id_var];else if(document.ids){
if(!getLayerById[id_var])doLayerArray();
return getLayerById[id_var];}}}
document.getElementById=window.getElementById;
if(document.ids){var getLayerById=[]; function
doLayerArray(){ with([window.document]){while(length)
{with(shift()){for(i=0;i<layers.length;i++){
getLayerById[layers[i].id]=layers[i].style=layers[i];
unshift(layers[i].document);
}}}}}}}

Das Script kann im Head eingebunden werden und stellt getElementById für die Browser Internet Explorer und Netscape Version 4 zur Verfügung.

1 2 3
  
<script type="text/javascript" src="x4-getelementbyid.js"></script>

Syntax Vergleich

Die klassische Netscape 4 und Internet Explorer 4 Syntax im Vergleich zeigt besonders die umständliche Adressierung für Netscape 4 nach dem Layer Modell bei verschachtelten Divs, die zudem bei geringen Änderungen im HTML-Code anzupassen ist:

1 2 3 4 5 6 7 8 9 10 11 12
if ( document.layers )
 
 document.layers[1].document.layers[2].document.layers[3].
    document.layers[1].document.layers["d2301v"].visibility="show");
 
else if( document.all && !document.getElementById )
 
      document.all.d2301v.style.visibility="visible";
 
else if(document.getElementById)
 
      document.getElementById("d2301v").style.visibility="visible";

Die Anweisungen per getElementById lassen sich jetzt, nachdem das neu entwickelte Script eine entsprechende Funktion bereitstellt und automatisch die Layer erfasst, auch für Netscape und IE 4 verwenden.

Bei Netscape 4 ist übrigens die eigene Syntax bei visibility lediglich bei Abfragen des Zustandes nötig, z.B. if(this.visibility)="hide";, denn setzen läßt sich die visibility durchaus als "hidden" oder "visible" oder wie hier im Beispiel auch "inherit", das allerdings von Opera 4 und 5 nicht unterstützt wird.

1 2 3

 document.getElementById("d2301v").style.visibility="inherit";

Test der einheitlichen Syntax

<div>
<div> d0v </div>      
<div> d1v </div>      
<div> d2v
    <div> d20v </div>
    <div> d21v </div>
    <div> d22v </div>
    <div> d23v
          <div> d230v </div>
          <div > d231v
              <div id=d2301v> d2301v </div>
              <div> d2302v </div>
      <div> d2303v </div>
   </div>
  </div>
</div>
</div> Verstecken Zeigen

Für Netscape 4 werden Divs oder andere Elemente durch eine Styleangabe position: absolute, meist wie im hier gezeigten Beispiel reicht sogar position: relative, ansprechbar:

1 2 3

 div {position:relative;}

Neben der einheitlichen und einfacheren Syntax ergeben sich bei Netscape 4 auch Vorteile durch die Unabhängigkeit von Layerreihenfolgen, welche sich schon durch eine Änderung des z-index bei sonst gleichem HTML Code verändern können.

Folgen des getElementById bei IE4 und NC4

Falls wie beim externen Script und Einbindung im Head die Methode getElementById vor anderen Scripten bereitgestellt wird sind natürlich übliche JavaScript Abfragen wie if(document.getElementById) auch betroffen. Moderne Browser müssen also ggf. anders unterschieden werden anhand ihrer JavaScript Fähigkeiten.

Je nach Einsatz sind die Formate von Aus- und Eingaben anzugleichen, oder die Funktion getElementById muss ergänzt werden, etwa um innerHTML anzuwenden.

Autor, Entwicklung

© Dipl.-Des.FH Kristof Lipfert Webdesign GbR Düsseldorf 09/2001 Redesign 2004