JavaScript getElementsByClassName

S

Seth93

Well-known member
ID: 322821
L
24 November 2008
1.400
82
Hallo,

ich möchte durch getElementsByClassName ein Element mit 2 Klassen bekommen.
Ist das möglich?

Also z.B.:
HTML: 
<li class="bla blu"></li>

So geht es nicht:
Code: 
document.getElementsByClassName("bla blu")


Lg
 
Schon mal über jQuery nachgedacht?
PHP: 
$(".bla.blu")
Soll aber laut Manual auch nur die native getElementsByClassName()-Funktion aufrufen. Vielleicht verwendest du nur einen Browser, der es nicht kann?
 
Darklord schrieb:
Laut Doku geht das.
getElementsByClassName
Zum Vergrößern anklicken....

theHacker schrieb:
Schon mal über jQuery nachgedacht?
PHP: 
$(".bla.blu")
Soll aber laut Manual auch nur die native getElementsByClassName()-Funktion aufrufen. Vielleicht verwendest du nur einen Browser, der es nicht kann?
Zum Vergrößern anklicken....

Glaub jQuery lohnt sich nicht wirklich da einzusetzen.
Ich verwende Mozilla Firefox 3.6.
Ich probier nochmal rum, eventuell ist mir da ein Fehler passiert.

Lg
 
getElementsByClassName ist nicht in jedem Browser vorhanden, von daher rate ich stark ab diese Funktion zu nutzen, sie ist glaube ich erst im neuen HTML5-Standard definiert.

Solltest du diese Funktionalität Cross-Browser benötigen greife zu einem JavaScript-Framework wie Jquery und Co, nutze die Sizzle-Selektorengine oder suche nach einer Implementierung dieser Funktion auf Basis von Funktionen, die überall zur Verfügung stehen.
 
Wenn er nur diese Funktion benötigt halte ich die Verwendung eines Frameworks etwas zu hoch gegriffen. Da würde ich es vorziehen diese Funktion aus dem Framework auszubaun oder eine vorhandene benutzen (Suchmaschine), da gibt es genug.
 
Vielen Dank für die Hinweise, hab das jetzt über getElementById gelöst.
Habe jetzt noch ein Problem was innerHTML betrifft und zwar kann der IE das nicht auf Tabellen-Elemente anwenden.

Habe folgendes probiert:
HTML: 
<tr><td><div id="bla"></div></td></tr>

Funktioniert es so?
Beim Test ging es noch nicht, villeicht weil der IE weitere Fehlermeldungen ausgibt.

LG
 
Klar, warum sollte es auch nicht funktionieren. Das <div> kannst du eigentlich weglassen, wenn du es bisher nur für die ID benutzt hast.

Code: 
<tr><td id="bla"></td></tr>
 
also ich erinnere mich an einen Fall, wo ich im IE den Inhalt von Tabellen nicht modifizieren konnte. Es ging nur wenn die Tablerows in einem Tbody steckten.

Genauen Sachverhalt weiß ich aber nicht mehr :angel:
 
hi
ich gebe mal ein Anreiz
Wer Seth93 als erstes eine Lösung zeigt, die dann auch später funktioniert in den Explorer, bekommt von mir 100 Mill. Lose.
 
ice-breaker schrieb:
also ich erinnere mich an einen Fall, wo ich im IE den Inhalt von Tabellen nicht modifizieren konnte. Es ging nur wenn die Tablerows in einem Tbody steckten.

Genauen Sachverhalt weiß ich aber nicht mehr :angel:
Zum Vergrößern anklicken....

An sowas kann ich mich auch wage erinnern, ich habe jedoch keinen weg gefunden außer die komplette Tabelle neu zu generieren und auszutauschen.

*edit*
https://support.microsoft.com/kb/239832
 
danke für den Link, ich glaube genau das war das ;)
table.innerHTML funktionierte nur, wenn ich tbody nutzte und dann eben nur für alle Daten innerhalb des tbody.
 
DaxDony schrieb:
Klar, warum sollte es auch nicht funktionieren. Das <div> kannst du eigentlich weglassen, wenn du es bisher nur für die ID benutzt hast.

Code: 
<tr><td id="bla"></td></tr>
Zum Vergrößern anklicken....
Ne, innerHTML kann man nicht auf Tabellen anwenden, laut SelfHTML, deshalb frag ich ja hier ^^


ice-breaker schrieb:
danke für den Link, ich glaube genau das war das ;)
table.innerHTML funktionierte nur, wenn ich tbody nutzte und dann eben nur für alle Daten innerhalb des tbody.
Zum Vergrößern anklicken....
Was ist mit meinem Ansatz ein Div-Element in die Tds einzubauen?
Geht das trotzdem im IE nicht?

Wie sähe das denn mit tbody aus?
Wenn ich mir Tabellen im Firebug angucke, dann sehen Tabellen so aus:

Code: 
<table>
  <tbody>
    <tr></tr>
  </tbody>
</table>

Habe bisher noch nie tbody benutzt.
Ist es möglich mehrere tbody-Tags in einer Tabelle zu verwenden?

Oder hat jQuery dafür eine Lösung? Denn dann würde ich eventuell doch jQuery nutzen.

Lg
 
Akania schrieb:
hi
ich gebe mal ein Anreiz
Wer Seth93 als erstes eine Lösung zeigt, die dann auch später funktioniert in den Explorer, bekommt von mir 100 Mill. Lose.
Zum Vergrößern anklicken....

Vermutlich ohne Verwendung von JQuery:mrgreen:

Seth93 schrieb:
Oder hat jQuery dafür eine Lösung? Denn dann würde ich eventuell doch jQuery nutzen.
Zum Vergrößern anklicken....

Also der IE 8 schluckt mit JQuery sowohl Manipulationen innerhalb <table> <tr> sowie <td>

Demo für alle 3 Beispiele:
Code: 
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<table id="t1">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
<script>$("#t1").html('<tr><td>3</td><td>4</td></tr>');</script>

<table>
<tr id="tr1">
<td id="td1">a1</td>
<td id="td2">b2</td>
</tr>
</table>
<script>$("#tr1").html('<td id="td3">a3</td><td id="td4">b4</td>');</script>

<table>
<tr>
<td id="td5">a5</td>
<td id="td6">b6</td>
</tr>
</table>
<script>$("#td6").html('<strong>b7</strong>');</script>
</body>
</html>
JQuery Auszug:
Code: 
html: function( value ) {
        if ( value === undefined ) {
            return this[0] && this[0].nodeType === 1 ?
                this[0].innerHTML.replace(rinlinejQuery, "") :
                null;

        // See if we can take a shortcut and just use innerHTML
        } else if ( typeof value === "string" && !rnocache.test( value ) &&
            (jQuery.support.leadingWhitespace || !rleadingWhitespace.test( value )) &&
            !wrapMap[ (rtagName.exec( value ) || ["", ""])[1].toLowerCase() ] ) {

            value = value.replace(rxhtmlTag, "<$1></$2>");

            try {
                for ( var i = 0, l = this.length; i < l; i++ ) {
                    // Remove element nodes and prevent memory leaks
                    if ( this[i].nodeType === 1 ) {
                        jQuery.cleanData( this[i].getElementsByTagName("*") );
                        this[i].innerHTML = value;
                    }
                }

            // If using innerHTML throws an exception, use the fallback method
            } catch(e) {
                this.empty().append( value );
            }

        } else if ( jQuery.isFunction( value ) ) {
            this.each(function(i){
                var self = jQuery( this );

                self.html( value.call(this, i, self.html()) );
            });

        } else {
            this.empty().append( value );
        }

        return this;
    },
 
Seth93 schrieb:
Ne, innerHTML kann man nicht auf Tabellen anwenden
Zum Vergrößern anklicken....
Auf Tabellen nicht, auf Tabellen-Zellen aber doch. Der verlinkte Microsoft-Artikel sagt doch auch nichts anderes. Die Tabelle selbst möge man doch brav als Baum anlegen (mit appendChild und Co), den Inhalt einer Zelle darf man aber doch mit innerHTML ändern...

PHP: 
<table>
  <tr>
    <td id="blubb">
      <a href="#" onclick="document.all.blubb.innerHTML='geht doch'">und nun?</a>
    </td>
  </tr>
</table>
 
Zuletzt bearbeitet:
marac schrieb:
Auf Tabellen nicht, auf Tabellen-Zellen aber doch. Der verlinkte Microsoft-Artikel sagt doch auch nichts anderes. Die Tabelle selbst möge man doch brav als Baum anlegen (mit appendChild und Co), den Inhalt einer Zelle darf man aber doch mit innerHTML ändern...

PHP: 
<table>
  <tr>
    <td id="blubb">
      <a href="#" onclick="document.all.blubb.innerHTML='geht doch'">und nun?</a>
    </td>
  </tr>
</table>
Zum Vergrößern anklicken....

Also bei mir klappt es im IE 7 nicht, bei dir?

Jedenfalls hab ich das jetzt mit jQuery gelöst.
Ging schneller als gedacht und jQuery macht auch Spaß.

Danke für eure Hilfe.

LG
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben