getElementsByName und XHTML-Valide
Dieter
- javascript
Hallo,
ich hab ein Problem:
Und zwar muss ich ein XHTML valides Dokument erstellen, dafür habe ich folgende DTD verwendet:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Jetzt habe ich aber ein Problem mit dem Zusammenspiel mit JS:
Und zwar habe ich auf einer Seite mehrere Elemente (div) die eine bestimmte JS Funktion manipulieren soll.
Bisher habe ich es so gemacht, dass dieser Elemente alle den gleichen 'name' hatten, also <div class="element" name="element">Text</div>.
Dann habe ich mit document.getElementsByName('element') alle diese div-Container ausgelesen und entsprechend manipuliert.
Das Problem ist aber, dass der W3C Validator meldet, dass es kein name Element mehr gibt.
Gibts irgendwie eine Lösung für mein Problem?
Das Problem bei IDs ist ja, dass diese Eindeutig sein müssen.
Noch eine andere Frage:
Dieser div-Container hat eine class, und der JS Script ändert eigentlich nur etwas am Style (CSS).
Kann ich per JS irgendwie sagen, dass die Class 'element' geändert werden soll?
MFG
Moin
Das Problem ist aber, dass der W3C Validator meldet, dass es kein name Element mehr gibt.
klar gibts das noch - aber nicht für div
Gibts irgendwie eine Lösung für mein Problem?
alle divs durchgehen (getElementsBytagName), fragen ob ID gewisssen Kriterien folgt (gleicher Anfang oder Ende), dann ändern.
Kann ich per JS irgendwie sagen, dass die Class 'element' geändert werden soll?
nein!
Gruß
rfb
Hello out there!
Das Problem ist aber, dass der W3C Validator meldet, dass es kein name Element mehr gibt.
klar gibts das noch - aber nicht für div
Ein 'name'-Element hat es nie gegeben; aber für bestimmente Elementtypen das 'name'-Attribut.
Gibts irgendwie eine Lösung für mein Problem?
Welches Problem? Wozu willst du ein 'name'-Attribut benötigen, wenn es doch das 'class'-Attribut gibt? Welches als Wert auch mehrere durch Leerzeichen getrennte Klassen enthalten kann: <div class="foo bar">
alle divs durchgehen
Nicht wirklich performant. Wirklich nicht.
Kann ich per JS irgendwie sagen, dass die Class 'element' geändert werden soll?
nein!
?? Wie bitte? Warum sollte das mit der Eigenschaft 'className' nicht gehen?
See ya up the road,
Gunnar
Tach auch.
Kann ich per JS irgendwie sagen, dass die Class 'element' geändert werden soll?
nein!
?? Wie bitte? Warum sollte das mit der Eigenschaft 'className' nicht gehen?
Es war glaube ich nicht gemeint, die Klassenzuordnungen (wenn ich das mal so umschreiben darf) zu ändern, sondern die CSS-Klasse selber (was den Unterschied hat, daß man nicht bei allen Klassenzuordnungen den Klassennamen ändern bräuchte).
Bis die Tage,
Matti
Hello out there!
Es war glaube ich nicht gemeint, die Klassenzuordnungen (wenn ich das mal so umschreiben darf) zu ändern, sondern die CSS-Klasse selber
?? Mit „CSS-Klasse“ meinst du die CSS-Regel für einen Klassenselektor?
Auch das ist mit JavaScript möglich (CSSRules), wenn auch etwas schwieriger.
See ya up the road,
Gunnar
Hellihello
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jsundclassname</title>
<style type="text/css">
body {color:yellow;font-weight:bold}
div.klasse1 {background-color:green}
div.klasse2 {background-color:blue}
div.klasse3 {background-color:red}
</style>
<script>
meineFunktion = function () {
div_testId = document.getElementById("testId");
alert("Klasse bisher: "+ div_testId.className + "--- wird sich gleich ändern");
div_testId.className="klasse3";
}
</script>
</head>
<body>
<div class="klasse1" id="testId">
Inhalt1
</div>
<div class="klasse1">
Inhalt2
</div>
<div class="klasse2">
Inhalt3
</div>
<button onclick="meineFunktion()">meineFunktion()</button>
</body>
</html>
???
Gruß,
frankx
Tauch auch.
Dieser div-Container hat eine class, und der JS Script ändert eigentlich nur etwas am Style (CSS).
Kann ich per JS irgendwie sagen, dass die Class 'element' geändert werden soll?
Wollte gerade schreiben, du solltest die Funktion document.getElementByClassName() verwenden, aber die gibts ja offiziell gar nicht. Allerdings ist diese nicht so schwer nachzubauen (DOM-Tree durchhangeln usw), allerdings bei großen Seiten nicht mehr unbedingt performant.
Eine einfache Möglichkeit (außer der document.getElementsByTagName()) wäre es (wenn die DIV's auf der Seite örtlich beisammen liegen):
die drei DIV in ein Überdiv packen, dem eine ID geben und dessen Childs durchlaufen (document.getElementById("uberdiv").childNodes()[] ).
Bis die Tage,
Matti
Hallo,
Wollte gerade schreiben, du solltest die Funktion document.getElementByClassName() verwenden, aber die gibts ja offiziell gar nicht.
Jain. Diese Methode ist offizieller Bestandteil der Entwicklungsversion von HTML 5 (früher Web Applications 1.0), und ist bereits in der aktuellen Entwicklerversion des Firefox enthalten, wird also auch in der kommenden 3.0 enthalten sein.
Eine einfache Möglichkeit (außer der document.getElementsByTagName()) wäre es (wenn die DIV's auf der Seite örtlich beisammen liegen):
die drei DIV in ein Überdiv packen, dem eine ID geben und dessen Childs durchlaufen (document.getElementById("uberdiv").childNodes()[] ).
Man sollte wohl noch darauf aufmerksam machen, dass man in XHTML mit getElementsByTagNameNS() bzw. getElementByIdNS() arbeiten muss.
Gruß;
Moin
Man sollte wohl noch darauf aufmerksam machen, dass man in XHTML mit getElementsByTagNameNS() bzw. getElementByIdNS() arbeiten muss.
warum?
Gruß
rfb
Hallo,
Man sollte wohl noch darauf aufmerksam machen, dass man in XHTML mit getElementsByTagNameNS() bzw. getElementByIdNS() arbeiten muss.
warum?
Weil getElementsByTagName() nur die Tags erkennt, die sich im Null-Namespace befinden. XHTML-Tags befinden sich aber im XHTML-NS, logischerweise.
Gruß;
Moin
Weil getElementsByTagName() nur die Tags erkennt, die sich im Null-Namespace befinden. XHTML-Tags befinden sich aber im XHTML-NS, logischerweise.
hast du mal einen Link zu einer verständlichen Erklärung dieser mir bislang vollkommen unbekannten (auch in der Praxis noch nie vorgekommenen) Problematik?
Gruß
rfb
Hallo,
hast du mal einen Link zu einer verständlichen Erklärung dieser mir bislang vollkommen unbekannten (auch in der Praxis noch nie vorgekommenen) Problematik?
Diese Tatsache ist tatsächlich unbekannt, und fällt in der Praxis nie auf, weil die Browser (und zwar alle!) einerseits fehlerhaft arbeiten, bzw. XHTML-Dokumente meist nicht als echtes XHTML verarbeitet werden.
In diesem Fall merkt man den Unterschied nichtmal, weil laut Spezifikation tatsächlich beide Methoden funktionieren.
Es ist aber sehr interessant! Hm, nur wie weit soll ich ausholen?
Damit ein Browser verschiedene XML-Sprachen auseinanderhalten kann, gehört zu einer XML-Sprache ein Namensraum. Für XHTML ist das "http://www.w3.org/1999/xhtml".
HTML ist eine SGML-Anwendung und hat daher keinen Namensraum (wobei man vom Null-Namensraum spricht).
Die Problematik lässt sich anhand einer anderen Methode besser erklären:
Verwendet man in HTML die createElement()-Methode, so erzeugt man ein HTML-Element mit dem Angegebenen Wert. Verwendet man die selbe Methode in einem echten XHTML-Dokument, so erzeugt man mit der Methode zwar ein Element, dieses wird jedoch nicht als XHTML-Element erkannt.
Das bedeutet für XHTML:
createElement('p') erzeugt ein p-Element, dieses verhält sich jedoch wie ein unbekanntes Element (es würde wohl wie ein span-Element angezeigt werden).
createElementNS('http://www.w3.org/1999/xhtml','p') dagegen würde tatsächlich ein XHTML-p-Absatzelement erzeugen.
Das Problem dabei ist, Firefox und Opera haben die -NS-methode falsch implementiert, so dass sie offensichtlich richtig funktioniert (d.h., wie man es erwarten würde).
DOM-2-Core §1.1.8 ist wohl interessant.
Gruß;