document.getElementsByName

[blumentopf]

Ich benutze document.getElementsByName um mehrere Objekte, die alle den gleichen Namen haben,  auf einmal anzusprechen. Leider "muss stets mit Array-Syntax auf die Elemente zugegriffen werden". Deshalb schreibe ich in meiner function den Befehl 14 mal mit unterschiedlichen Zahlen in der eckigen Klammer. Das kommt mir etwas umständlich vor, zumal ich vielleicht auch mal einen Namen ansprechen möchte, der 4 mal vergeben ist und einmal einen der 14 mal vergeben ist. Gibt es eine Möglichkeit, den Befehl auf alle vorhandenen Elemente mit dem angegebenen Namen zu beziehen?
Besten Dank und Grüße

function hide(el) {
document.getElementsByName(el) [0].style.display = "none";
document.getElementsByName(el) [1].style.display = "none";
document.getElementsByName(el) [2].style.display = "none";
document.getElementsByName(el) [3].style.display = "none";
document.getElementsByName(el) [4].style.display = "none";
document.getElementsByName(el) [5].style.display = "none";
document.getElementsByName(el) [6].style.display = "none";
document.getElementsByName(el) [7].style.display = "none";
document.getElementsByName(el) [8].style.display = "none";
document.getElementsByName(el) [9].style.display = "none";
document.getElementsByName(el) [10].style.display = "none";
document.getElementsByName(el) [11].style.display = "none";
document.getElementsByName(el) [12].style.display = "none";
document.getElementsByName(el) [13].style.display = "none";
}

[ChrisB]

Hi,

Gibt es eine Möglichkeit, den Befehl auf alle vorhandenen Elemente mit dem angegebenen Namen zu beziehen?

Direkt nicht (ohne irgendwelche Frameworks zu benutzen) - aber es gibt Schleifen, und die bieten sich immer an, wenn man die gleiche Sache mehrfach mit unterschiedlichen Objekten machen will.

MfG ChrisB

[blumentopf]

Vielen Dank für die Tipps!
Könnte die Funktion dann in etwa so heißen?

function hide(el) {
for (var array = 0; array <= 13; array++)
document.getElementsByName(el) ['array'].style.display = "none";
}

Viele Grüße und dankeschön..

[ChrisB]

Hi,

Könnte die Funktion dann in etwa so heißen?

Heißen kann sie wie sie will :-)

function hide(el) {
for (var array = 0; array <= 13; array++)
document.getElementsByName(el) ['array'].style.display = "none";
}

Den Bezeichner der Laufvariable in den eckigen Klammern in Anführungszeichen zu setzen, ist falsch - damit würdest du nur das Textliteral 'array' an der Stelle stehen haben, und das lässt sich nicht (sinnvoll) in eine Zahl umwandeln.

array ist als Bezeichner auch unglücklich. Da JavaScript case senstive ist, was Bezeichner angeht, kollidiert das zwar nicht mit dem Schlüsselwort Array - aber es ist trotzdem leicht zu verwechseln, und wird der Aufgabe der Variablen, Schleifen-Zähler zu sein, auch nicht besonders gut gerecht.

Den Wert 13 willst du da auch nicht fest drinstehen haben, sondern dich dynamisch auf die Anzahl der Elemente beziehen; wie Der Martin schon schrieb, über die length-Eigenschaft.

Und zu guter letzt, sollte man Funktionen, die irgendetwas im DOM „suchen“ müssen, nicht bei jedem Durchlauf erneut aufrufen, sondern ein mal vorher, so dass die Funktion letztendlich in etwa so aussehen könnte:

function hideElementsByName(elementName) {  
  var elements = document.getElementsByName(elementName);  
  var numElements = elements.length;  
  for(var index = 0; index < numElements; index++) {  
    elements[index].style.display = "none";  
  }  
}

MfG ChrisB

[blumentopf]

Hallo ChrisB,
vielen Dank für die Mühe!
Das mit den Anführungszeichen hatte ich übersehen, jetzt läuft es zunächst mal prinzipiell.
Mit der Variablen numElements zählt 'er' über die length-Eigenschaft die vorkommenden Elemente selbst? Das ist ja praktisch. Ich hatte nach Martins Hinweis schon einmal nach length gesucht, aber nicht ganz kapiert was man damit macht.
Damit hat das durchdeklinieren ein Ende..
Schönen Abend noch!

[Der Martin]

Hallo,

Leider "muss stets mit Array-Syntax auf die Elemente zugegriffen werden".

das ist nicht "leider" so, sondern das ist eine sehr praktische Sache, die wesentliche Vereinfachungen möglich macht.

Deshalb schreibe ich in meiner function den Befehl 14 mal mit unterschiedlichen Zahlen in der eckigen Klammer. Das kommt mir etwas umständlich vor

Mir auch. Du möchtest dich vielleicht mit Schleifen befassen, hier idealerweise mit der for-Schleife, und mit der length-Eigenschaft von Arrays.

Ciao,
 Martin

[Gunnar Bittersmann]

@@blumentopf:

nuqneH

Ich benutze document.getElementsByName um mehrere Objekte, die alle den gleichen Namen haben,  auf einmal anzusprechen. Leider "muss stets mit Array-Syntax auf die Elemente zugegriffen werden".

Nö, muss nicht. Sollte man nicht.

Wie man mit Array und Schleife umgeht, wurde dir ja schon gesagt; nicht aber, wie man das ohne macht:

Du gibst, wenn all diese Elemente mit @name="foo" ausgeblendet werden sollen, per JavaScript einem gemeinsamen Vorfahrenelement von diesen (das kann ein Element mit @id="bar" sein oder auch body) eine Klasse "compact":
  document.getElementById("bar").className = "compact";
bzw.
  document.body.className = "compact";

Die Regel zum Ausblenden steht im Stylesheet:
  .compact [name="foo"] { display: none }

Wenn du wieder einblenden willst, nimmst du die Klasse "compact" wieder weg:
  document.getElementById("bar").className = null;
bzw.
  document.body.className = null;

(Wenn das Element noch andere Klassenzugehörigkeiten hätte, wäre das Wegnehmen etwas komplizierter.)

Wenn das Ganze auch in Uralt-Browsern funktionieren soll, die den Attributselektor noch nicht kennen, gibst du allen Elementen mit @name="foo" zusätzlich noch @class="baz" und verwendest den Klassenselektor:
  .compact .baz { display: none }

Derartiges Aus- und Einblenden sollte im Browser schneller sein, denn es müssen nicht erst alle betreffendenden Elemente per getElementsByName() aus dem DOM rausgesucht werden.

Außerdem ist es sowieso kein guter Stil, Stile per JavaScript zu manipulieren. Was, wenn später mal nicht versteckt, sondern auf andere Art dargestellt werden soll? Eine kleine Änderung im Stylesheet (ja im Stylesheet, wo man Darstellungsangaben macht!):
  .compact [name="foo"] { opacity: 0.3 }

Das JavaScript ändert sich nicht. (Die Programmlogik bleibt ja auch dieselbe.)

Qapla'

[hotti]

hi,

Das JavaScript ändert sich nicht. (Die Programmlogik bleibt ja auch dieselbe.)

Gunnar, das ist genial.

Danke und viele Grüße,
Horst Haselhuhn

[Gunnar Bittersmann]

@@hotti:

nuqneH

Gunnar, das ist genial.

Ich weiß. ;-)

Ich dachte aber, du liest hier schon so lange mit, dass du das auch bereits wusstest.

Qapla'

[blumentopf]

Hallo Gunnar,

(Wenn das Element noch andere Klassenzugehörigkeiten hätte, wäre das Wegnehmen etwas komplizierter.)

Könnte man beim Ausblenden nicht einfach die bisherige Klassenzugehörigkeit ersetzen, um sie dann beim Einblenden wieder einzuführen?

document.getElementById("bar").className = urspruenglicheKlasse;

Solange ein Objekt ausgeblendet ist, benötigt es doch keine Style-Eigenschaften, denke ich.

Grüße und besten Dank

[Matti Maekitalo]

Tach auch.

Könnte man beim Ausblenden nicht einfach die bisherige Klassenzugehörigkeit ersetzen, um sie dann beim Einblenden wieder einzuführen?

document.getElementById("bar").className = urspruenglicheKlasse;

Solange ein Objekt ausgeblendet ist, benötigt es doch keine Style-Eigenschaften, denke ich.

Ein geneigter Programmierer könnte auf die Idee kommen, die styles auch für andere Dinge zu nutzen, z.B. um damit Elemente zu identifizieren.

Weiterhin könnte ein Druck-Stylesheet vorhandensein, wo das momentan ausgeblendete Element doch ausgedruckt werden soll (inkl. der Styles der Originalklasse).

Kurz: wenn du nichts machst, womit du "in der Zwischenzeit" die Originalklasse brauchst, kannst du das machen. Allgemein kann ich deine Frage nur mit "Nein" beantworten.

Bis die Tage,
Matti

[Gunnar Bittersmann]

@@blumentopf:

nuqneH

Könnte man beim Ausblenden nicht einfach die bisherige Klassenzugehörigkeit ersetzen, um sie dann beim Einblenden wieder einzuführen?

document.getElementById("bar").className = urspruenglicheKlasse;

Dann müsste man sich die vorrige Klassenzugehörigkeit(en) merken (in einer Eigenschaft des Objekts):

var bar = document.getElementById("bar");  
bar.initialClassName = bar.className;  
bar.className += " compact";

Wegnehmen der Klasse:

bar.className = bar.initialClassName;

Was aber, wenn noch andere Klassen dynamisch hinzugefügt werden?

Besser wäre eine Lösung, die wirklich die betreffende Klasse "compact" wegnimmt:

var oldClasses = bar.className.split(" "), newClass;  
for (var i = 0; i < oldClasses.length; i++) newClass += (oldClasses[i] != "compact" ? " " + oldClasses[i] : "");  
bar.className = newClass;

Frameworks wie jQuery bieten für sowas Methoden: addClass(), removeClass().

Qapla'