Doc_McSky: mit getElementByID nur ein Element?

Hallo Leute,

meine Frage:
Spricht der Aufruf von z.B.:

  
document.getElemntByID('abort').className = 'abort_yes';  

NUR EIN 'abort' Element an und zwar das erste?
Ich dachte es würden alle ID's mit dem Namen 'abort' entsprechend bearbeitet...?

Ich habe eine Tabelle, da werden einige Zeilen ggf. ausgeblendet, da diese nur unter bestimten Umständen benötigt werden.
Jetzt steht im Quelltext dann z.B.:

  
<table ...>  
<tr>  
<td>bla</td>  
</tr>  
<tr class="abort_no" id="abort">  
<td>blabla</td>  
</tr>  
<tr class="abort_no" id="abort">  
<td>blabla</td>  
</tr>  
<tr class="abort_no" id="abort">  
<td>blabla</td>  
</tr>  
<tr>  
<td>bla</td>  
</tr>  
</table>  

und im CSS:

  
.abort_no {display: none;}  
.abort_yes {display: block;}  

Wenn nun obiger JS Befehl ausgeführt wird und eigentlich alle <TR> mit der ID 'abort' die Class wechseln sollten, tut dies nur eine, nämlich der erste Eintrag, wo es die ID 'abort' gibt.
Wie mache ich es richtig?

Gruß
Doc

  1. Hi,

    document.getElemntByID('abort').className = 'abort_yes';

      
    Du meinst vermutlich document.getElementById(), mit "e" und kleinem "d".  
      
    
    > Ich dachte es würden alle ID's mit dem Namen 'abort' entsprechend bearbeitet...?  
      
    Da IDs dokumentweit eindeutig sein müssen und es somit nur maximal ein Element mit der entsprechenden ID geben kann: Mit der Methode erreichst Du alle Elemente mit der ID, also eines oder keines. Es ist übrigens nicht zufällig gewählt, dass in der Methode "Element" im Singular steht.  
      
    
    > Ich habe eine Tabelle, da werden einige Zeilen ggf. ausgeblendet, da diese nur unter bestimten Umständen benötigt werden.  
      
    Möchtest Du diese eventuell klassifizieren?  
      
    
    > Wie mache ich es richtig?  
      
    Du setzt die benötigte Information einmalig an zentraler Stelle und regelst den Rest über CSS-Selektoren.  
      
    Cheatah  
    
    -- 
    X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|  
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html  
    X-Will-Answer-Email: No  
    X-Please-Search-Archive-First: Absolutely Yes
    
    1. Hi,

      Da IDs dokumentweit eindeutig sein müssen und es somit nur maximal ein Element mit der entsprechenden ID geben kann: Mit der Methode [getElementById] erreichst Du alle Elemente mit der ID, also eines oder keines.

      Ausser, du setzt die identisch benannte Parodie auf diese DOM-Methode ein, die MicroSoft im IE <= 7 implementiert hat :-)

      MfG ChrisB

      --
      “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
    2. Du meinst vermutlich document.getElementById(), mit "e" und kleinem "d".

      Ja, reiner Schreibfehler... *schäm...

      Da IDs dokumentweit eindeutig sein müssen und es somit nur maximal ein Element mit der entsprechenden ID geben kann: Mit der Methode erreichst Du alle Elemente mit der ID, also eines oder keines. Es ist übrigens nicht zufällig gewählt, dass in der Methode "Element" im Singular steht.

      Sollte ich es dann mit getElementsByName() versuchen, da ists im Plural, erreiche ich dann alle Elemente gleichzeitig?

      Du setzt die benötigte Information einmalig an zentraler Stelle und regelst den Rest über CSS-Selektoren.

      Naja, eigentlich dachte ich, das ich bereits CSS benutze, oder wie jetzt??? Was für Selektoren?
      Ich wollte doch nur erreichen, das eben alle CSS Klassen 'abort_no' jetzt zu 'abort_yes' werden...

      Gruß
      Doc

      1. Hi,

        Sollte ich es dann mit getElementsByName() versuchen, da ists im Plural, erreiche ich dann alle Elemente gleichzeitig?

        Ja. Aber natürlich nur die, die auch ein name-Attribut haben dürfen.

        Du setzt die benötigte Information einmalig an zentraler Stelle und regelst den Rest über CSS-Selektoren.

        Naja, eigentlich dachte ich, das ich bereits CSS benutze, oder wie jetzt???

        CSS kann man in verschiedenem Umfang nutzen. Die meisten Anfänger beschränken sich auf absolute Basics, ohne sich die Mühe zu machen, Zusammenhänge und Möglichkeiten genauer zu erkunden - und kratzen damit nur an der Oberfläche des Potentials, das CSS bietet.

        Was für Selektoren?

        Sagt dir das Stichwort nichts? Dann informieren!

        Ich wollte doch nur erreichen, das eben alle CSS Klassen 'abort_no' jetzt zu 'abort_yes' werden...

        Es gibt keine „CSS-Klassen“.

        Es gibt Elemente im HTML, die über eine gemeinsame Klasse klassifiziert werden, weil sie eben entsprechende Bedingungen erfüllen.

        Und wenn du CSS in Kombination mit JavaScript hier sinnvoll einsetzt - dann musst du die Klasse dieser Elemente gar nicht ändern - sondern kannst bspw. über den Nachfahren-Selektor dafür sorgen, dass sich die *Formatierung*, der diese Elemente unterliegen, dynamisch ändert.

        MfG ChrisB

        --
        “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
  2. Lieber Doc_McSky,

    <table ...>

    ...
    <tr class="abort_no" id="abort">
    ...
    <tr class="abort_no" id="abort">
    ...
    <tr class="abort_no" id="abort">

      
    davon, dass eine ID nur einmal im Dokument vorkommen darf, hast Du ja mittlerweile erfahren.  
      
    Was spricht eigentlich dagegen, der Tabelle selbst mittels JavaScript eine Klasse zu geben (oder wegzunehmen)?  
      
    Du änderst die Klasse "abort\_no" in "abortable" um. Damit hast Du Elemente, die sich mit "abortable" so verhalten, als stünde da das ehemalige "abort\_no".  
      
    So, und nun kann man mit JavaScript die Tabelle wahlweise auf `<table class="abort">`{:.language-html} oder auf `<table class="">`{:.language-html} setzen. Dazu kannst Du der Tabelle eine ID verpassen, um sie mittels `getElementById()`{:.language-javascript} zu adressieren. Den Rest regelt Dein CSS mit einem passenden <http://de.selfhtml.org/css/formate/zentrale.htm#verschachtelte_elemente@title=Nachfahrenselektor>.  
      
    Liebe Grüße,  
      
    Felix Riesterer.
    
    -- 
    ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
    
    1. Hallo Felix,

      vielen Dank für deine weiterreichenden Infos. Ja, sicher ist mir das mit der Eindeutigkeit durchaus bewusst, aber ich dachte halt das auch mehrere gleiche ID's eben gleichzeitig alle zu ändernden Eigenschaften ausführen, das geht eben nicht, ok, abgehakt.

      Jetzt sagtest du die ganze Tabelle zu klassifizieren, ok, die Idee hatte ich auch, aber damit erreiche ich ja nicht mein Ziel, denke ich zumindest.
      Wenn ich da eine Klasse 'abort_no' erfinde und dieser u.a. sage display:none; dann kann ich die ganze Tabelle verschwinden lassen, kein Prob, aber ich will ja nur EINZELNE Zeilen verschwinden lassen, also z.B. Zeile 2,4,7 und 9, alle anderen sollen stehenbleiben, daher hatte ich die Klassenangabe ja in den jeweiligen TR's stehen, nicht in dem Tabellenkopf.

      Wie soll das dein CSS Vorschlag umsetzen?

      Gruß
      Martin (Doc_McSky)

      1. @@Doc_McSky:

        nuqneH

        Ja, sicher ist mir das mit der Eindeutigkeit durchaus bewusst, aber ich dachte halt das auch mehrere gleiche ID's […]

        Ähm, sieht nicht so aus, dass dir das mit der Eindeutigkeit von IDs bewusst wäre. Also nochmal: IDs müssen eindeutig sein.

        Du bist Gemüsehändler?

        Jetzt sagtest du die ganze Tabelle zu klassifizieren, ok, die Idee hatte ich auch, aber damit erreiche ich ja nicht mein Ziel, denke ich zumindest.

        Schon wieder denkst du falsch.

        Wie soll das dein CSS Vorschlag umsetzen?

        Wie Felix sagte: mit Nachfahrenselektor.

        Erst lesen, dann denken, dann nachfragen.

        Qapla'

        --
        Volumen einer Pizza mit Radius z und Dicke a: pi z z a