Dennis: getElementsByName

Warum geht das nur in Netscape?

<HTML>
<HEAD>
<script type="text/javascript" language="JavaScript">
<!--

function highlight(high) {
    zellen = document.getElementsByName("menuzelle");
    for (a=0; a<zellen.length; a++) {
        document.getElementsByName("menuzelle")[a].style.backgroundColor="#000000";
        document.getElementsByName("menuzelle")[high].style.backgroundColor="#FF0000";
    }
}

//-->
</script>
</HEAD>
<BODY>

<table>
  <tr>
    <td name="menuzelle" onClick="highlight(0)">Klick!</td>
    <td name="menuzelle" onClick="highlight(1)">Klick!</td>
    <td name="menuzelle" onClick="highlight(2)">Klick!</td>
    <td name="menuzelle" onClick="highlight(3)">Klick!</td>
    <td name="menuzelle" onClick="highlight(4)">Klick!</td>
  </tr>
</table>
</BODY>
</HTML>

  1. Hallo.

    Warum geht das nur in Netscape?

    Weil name kein Universalattribut ist und somit nichts in <td>s zu suchen hat. Das ist wahrscheinlich das einzige Mal, dass sich der IE an die Standards hält.

    Gruß
    Norbert

  2. Hallo,

    Warum geht das nur in Netscape?

    Das geht in allen Browsern, welche die Methode document.getElementsByName() kennen (NN6.x, NN7.0, Opera6.x). NN4.x macht's garantiert auch nicht. Der MSIE5.x kennt die Methode nicht. Für den musst Du noch mit document.all arbeiten.

    Allerdings ist name kein Attribut, welches in einer td erlaubt ist. Du kannst den Menüzellen einheitliche Klassen geben. Das hätte dann auch den Vorteil, dass sie per CSS einheitlich formatiert werden können.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN"
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <HTML>
    <HEAD>
    <script type="text/javascript" language="JavaScript">
    <!--
    function highlight(high) {
      if (document.getElementsByTagName) {
        var allezellen = document.getElementsByTagName("td");
        var zellen = new Array();
        var i=0;
        for (a=0; a<allezellen.length; a++) {
          if (allezellen[a].className="menuzelle") {
            zellen[i]=allezellen[a];
            i++;
          }
        }
        for (a=0; a<zellen.length; a++) {
            zellen[a].style.backgroundColor="#000000";
            zellen[high].style.backgroundColor="#FF0000";
        }
      }
      if (document.all) {
        var allezellen = document.all.tags("td");
        var zellen = new Array();
        var i=0;
        for (a=0; a<allezellen.length; a++) {
          if (allezellen[a].className="menuzelle") {
            zellen[i]=allezellen[a];
            i++;
          }
        }
        for (a=0; a<zellen.length; a++) {
            zellen[a].style.backgroundColor="#000000";
            zellen[high].style.backgroundColor="#FF0000";
        }
      }
    }
    //-->
    </script>
    </HEAD>
    <BODY>
    <table>
      <tr>
        <td class="menuzelle" onClick="highlight(0)">Klick!</td>
        <td class="menuzelle" onClick="highlight(1)">Klick!</td>
        <td class="menuzelle" onClick="highlight(2)">Klick!</td>
        <td class="menuzelle" onClick="highlight(3)">Klick!</td>
        <td class="menuzelle" onClick="highlight(4)">Klick!</td>
      </tr>
    </table>
    </BODY>
    </HTML>

    Das funktioniert mit MSIE5.5, NN7.0 und Opera6.05.

    Für NN4.x müsstest Du noch zusätzlich mit dem Layer-Objekt arbeiten. Ob man das allerdings noch in der selben Datei schafft?

    Gruß

    Axel

    1. Hallo,

      Das geht in allen Browsern, welche die Methode document.getElementsByName() kennen (NN6.x, NN7.0, Opera6.x). NN4.x macht's garantiert auch nicht. Der MSIE5.x kennt die Methode nicht. Für den musst Du noch mit document.all arbeiten.

      Der IE kennt diese Methode seit Version 5.0 sehr wohl (siehe http://www.styleassistant.de/tips/tip45.htm, aber name-Attribute werden nur bei Elementen interpretiert, die diese lt. DTD auch haben duerfen, was IMHO durchaus korrektes Verhalten darstellt.

      MfG, Thomas

      1. Hallo,

        Der IE kennt diese Methode seit Version 5.0 sehr wohl (siehe http://www.styleassistant.de/tips/tip45.htm, aber name-Attribute werden nur bei Elementen interpretiert, die diese lt. DTD auch haben duerfen, was IMHO durchaus korrektes Verhalten darstellt.

        Tatsächlich! Habs grade probiert. Damit kann dann natürlich der gesamte if(document.all)-Block entfallen.

        Da macht also der NN7 (Mozilla auch?) mal einen DOM-Strict-Interpretationsfehler und MSIE verhält sich strict regelkonform? *Schadenfreude*

        Gruß

        Axel

        1. Hallo,

          Tatsächlich! Habs grade probiert. Damit kann dann natürlich der gesamte if(document.all)-Block entfallen.

          Ja, der ist seit 3 Jahren ueberfluessig.

          Da macht also der NN7 (Mozilla auch?) mal einen DOM-Strict-Interpretationsfehler und MSIE verhält sich strict regelkonform? *Schadenfreude*

          Naja, ich sehe das weniger aus diesem Blickwinkel, aber Tatsache ist, dass der IE seit Version 5 im DOM-Bereich etliche Methoden kennt, die andere Hersteller erst 2-3 Jahre spaeter implementiert haben, siehe z. B.:
          http://www.styleassistant.de/tips/w3cdom.htm.

          Das mag man als weniger wichtig einstufen. Ich kann fuer meinen Teil durchaus behaupten, dass ich die meisten Kenntnisse auf diesem Gebiet mit und durch den IE erworben habe. (Wo ging das sonst im Jahre 1999?)

          Und heute funktionieren diese Dinge ganz natuerlich in Mozilla, Opera(7) oder bei SVG-Anwendungen ... ;-)

          MfG, Thomas

    2. n'Abend.

      Wo wir gerade bei riesigen Problemlösungen sind, folgende (leichte) Abänderung des Originals würde es auch tun:

      <HTML>
      <HEAD>
      <script type="text/javascript" language="JavaScript">
      <!--

      function highlight(high) {
          zellen = document.getElementById("menu").getElementsByTagName("td");
          for (a=0; a<zellen.length; a++) {
              zellen[a].style.backgroundColor="#000000";
              zellen[high].style.backgroundColor="#FF0000";
          }
      }

      //-->
      </script>
      </HEAD>
      <BODY>

      <table>
        <tr id="menu">
          <td onClick="highlight(0)">Klick!</td>
          <td onClick="highlight(1)">Klick!</td>
          <td onClick="highlight(2)">Klick!</td>
          <td onClick="highlight(3)">Klick!</td>
          <td onClick="highlight(4)">Klick!</td>
        </tr>
      </table>
      </BODY>
      </HTML>

      Gruß
      Norbert