Thomas Meinike: DOM - document.getElementsByName()

Beitrag lesen

Hallo,

Die Anzahl der Zellen habe ich mit

zellen = document.getElementsByName('zelle') ermittelt.

Naja, die Anzahl wuerde mit zellen.length erhalten, zellen ist ein Objektarray. Hier liegt auch das Problem: getElementsByName() kann/sollte nur funktionieren, wenn ein Element auch ein name-Attribut besitzt (z. B. input) -- je nach Browser wird das unterschiedlich gehandhabt und somit ist das nicht besonders portabel.

Einfacher Test:
<body onload="alert(document.getElementsByName('zelle').length)">

im IE6: 0, Mozilla und Firefox: 3, Opera 7.x: 0

Probiere es alternativ so: Verwende IDs, die aber eindeutig sein muessen, z. B. zelle1, zelle2, zelle3 usw.

Zum Ansprechen aller IDs, die mit "zelle" beginnen, kaeme eine Funktion getElementsByIdFragment() in Betracht (in Analogie zu getElementsByClassName(), siehe http://www.styleassistant.de/tips/tip100.htm).

Dein Beispiel koennte dann so laufen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test by TM 04/04</title>
<style type="text/css">
<!--

.zelle1
{
  color: #FF0;
  background-color: #00C;
}

.zelle2
{
  color: #FFF;
  background-color: #090;
}

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

function farbe(nummer)
{
  zellen = getElementsByIdFragment('zelle');
  for (i = 0; i < zellen.length; i++)
  {
    zellen[i].className = "zelle1";
    if (nummer == i)zellen[i].className = "zelle2";
  }
}

function getElementsByIdFragment(idfr)
{
  var all_obj,ret_obj=new Array(),j=0;
  if(document.all)all_obj=document.all;
  else if(document.getElementsByTagName && !document.all)all_obj=document.getElementsByTagName("*");
  for(i=0;i<all_obj.length;i++)
  {
    if(all_obj[i].id.substr(0,idfr.length)==idfr)
    {
      ret_obj[j]=all_obj[i];
      j++;
    }
  }
  return ret_obj;
}
//-->
</script>
</head>
<body>
<table>
<tr>
<td id="zelle1" class="zelle1" onclick="farbe(0)">...</td>
<td id="zelle2" class="zelle1" onclick="farbe(1)">...</td>
<td id="zelle3" class="zelle1" onclick="farbe(2)">...</td>
</tr>
</table>
</body>
</html>

MfG, Thomas

--
SVG - Learning By Coding
http://svglbc.datenverdrahten.de/