DOM nextNode

[Peter]

Hi,

im folgenden Menü möchte ich das div subsubmenu ansprechen können
um es durch JS/CSS zu verändern.
Was ich bräuchte wäre sowas wie nextNode aber das gibt es ja leider nicht.
Selfhtml war hierbei nicht gerade leicht verständlich für mich.

Ich kann parentNode rausfinden also muss es doch auch irgendwie gehen den
nächsten div container ausfindig zu machen und zu bestimmen?

Noch einfacher wäre es wenn ich eine Styleanweisung per JS geben könnte,
aber eben als selektor-anweisung, aber ich denke so eine Möglichkeit gibts eh nicht.

  
<div class="menu_1">  
<a href="./">link</a>  
<a href="./">link</a>  
    <div class="submenu_1">  
    <a href="./">link</a>  
            <div class="subsubmenu_1">  
            <a href="./">link</a>  
            <a href="./">link</a>  
            <a href="./">link</a>  
            <a href="./">link</a>  
            </div>  
    <a href="./">link</a>  
<!-- bei Klick auf diesem Link würde ich gerne im folgenden Div eine styleänderung ausführen -->  
    <a href="#" onclick="alert(this.parentNode.firstChild.tagName);">link</a>  
            <div class="subsubmenu_1">  
            <a href="./">link</a>  
            <a href="./">link</a>  
            <a href="./">link</a>  
            <a href="./">link</a>  
            </div>  
    <a href="./">link</a>  
    </div>  
<a href="./">link</a>  
<a href="./">link</a>  
<a href="./">link</a>  
</div>  

Gruss
Peter

[Cheatah]

Hi,

Was ich bräuchte wäre sowas wie nextNode aber das gibt es ja leider nicht.

doch, unter dem Namen nextSibling. Beachte, dass der IE hier häufig Nodes auslässt.

Cheatah

[Peter]

Hi Cheatah,

doch, unter dem Namen nextSibling. Beachte, dass der IE hier häufig Nodes auslässt.

ja da habe ich auch versucht aber dann gibt der mir die <a> tags. Und wenn ich den letzten a tag innerhalb eines div nehme kommt auch nichts.

gruss
Peter

[Cheatah]

Hi,

ja da habe ich auch versucht aber dann gibt der mir die <a> tags.

dann hast Du etwas falsch gemacht. Was das ist, kann Dir natürlich keiner sagen, weil Du uns nicht über das informierst, was Du getan hast.

Cheatah

[Peter]

dann hast Du etwas falsch gemacht. Was das ist, kann Dir natürlich keiner sagen, weil Du uns nicht über das informierst, was Du getan hast.

Quelltext, ausrechende Begründung und ich informiere nicht richtig?

Manchmal schon sehr seltsam hier.

ob ich das so:
<a href="#" onclick="alert(this.parentNode.firstChild.tagName);">link</a>

oder so:
<a href="#" onclick="alert(this.nextSibling.tagName);">link</a>
oder wie auch immer....
Es geht nicht.

Peter

[Gunnar Bittersmann]

@@Peter:

Quelltext, ausrechende Begründung und ich informiere nicht richtig?

Wo bitte war denn in deinem ursprünglich gepostetem Quelltext "nextSibling" zu lesen?

Manchmal schon sehr seltsam hier.

In der Tat.

<a href="#" onclick="alert(this.nextSibling.tagName);">link</a>

"Beachten Sie" bei http://de.selfhtml.org/javascript/objekte/node.htm#child_nodes@title=childNodes dürfte für dich interessant sein.

Solange die Geschwisterknoten durchgehen, bis du auf den nächsten Elementknoten triffst (http://de.selfhtml.org/javascript/objekte/node.htm#node_type@title=nodeType). Ein Framework wie jQuery könnte das vereinfachen.

Live long and prosper,
Gunnar

[molily]

Hallo,

Solange die Geschwisterknoten durchgehen, bis du auf den nächsten Elementknoten triffst (http://de.selfhtml.org/javascript/objekte/node.htm#node_type@title=nodeType). Ein Framework wie jQuery könnte das vereinfachen.

*gg* Oder einfach http://icant.co.uk/sandbox/domhelp/ / http://icant.co.uk/sandbox/domhelp/DOMhelp.js. Dazu braucht man wahrlich kein unbezwingbares Monster aus dem Käfig lassen.

http://www.w3.org/TR/ElementTraversal/ sollte man auch auf dem Schirm haben.

Mathias

[JürgenB]

Hallo Peter,

zum Verständnis: In einigen Browsern sind die Zeilenumbrüche zwischen den "echten" Knoten auch Knoten. Wenn du mit nextSibling oder childNodes etc. arbeitest, erhältst du daher nicht nur die gewünschten Elemente, sondern auch die dazwischen liegenden Textknoten. Ich würde daher entweder mit IDs oder mit getElementsByTagName arbeiten.

Gruß, Jürgen

[Cheatah]

Hi,

zum Verständnis: In einigen Browsern sind die Zeilenumbrüche zwischen den "echten" Knoten auch Knoten.

die Formulierung ist extrem unglücklich. Text-Knoten *sind* "echte" Knoten, egal woraus der Text jetzt besteht. Die "einigen Browser" sind zudem *alle* Browser bis auf bekannte Ausnahmen, von denen des weiteren bekannt ist, dass sie sehr, sehr oft entgegen aller Spezifikationen (und oft genug auch jeden gesunden Menschenverstand) arbeiten.

Wenn du mit nextSibling oder childNodes etc. arbeitest, erhältst du daher nicht nur die gewünschten Elemente,

... sondern das, was der Namen ausdrückt. Nirgendwo ist dort von "Elements" die Rede, sondern von "Nodes".

Ich würde daher entweder mit IDs oder mit getElementsByTagName arbeiten.

Komisch, ich würde genau das nicht machen, sondern mir eine Funktion schreiben, die das gewünschte liefert.

Cheatah

[JürgenB]

Hallo Cheatah,

mit meiner "unglücklichen Formulierung" wollte ich Peter nur darauf hinweisen, dass es im DOM mehr Knoten gibt, als die, die man im HTML "bewusst" gesetzt hat. Für einen Profi ist es natürlich klar, dass ein Umbruch zwischen z.B. </div> und <div> auch ein Knoten ist. Ein Anfänger tut sich da schon schwerer mit, vor allen bei Knoten an Stellen, wo im HTML eigentlich keiner sein darf, z.B. zwischen </li> und <li>. Das

<ul><li></li><li></li></ul>

im DOM anders dargestellt wird als

<ul>  
 <li></li>  
 <li></li>  
</ul>

ist schon nicht mehr so direkt zu verstehen.

Zur Frage nextSibling/childNodes oder getElementsByTagName:

Natürlich kann ich mir alle Knoten ansehen und bei jedem prüfen, ob es der ist, den ich gerade benötige. Das ist wahrscheinlich die beste Lösung für Peter. Wenn ich mich aber z.B. nur für Links oder Listenelemente interessiere, ist meiner Meinung nach getElementsByTagName das bessere Werkzeug.

Gruß, Jürgen

[Cheatah]

Hi,

mit meiner "unglücklichen Formulierung" wollte ich Peter nur darauf hinweisen, dass es im DOM mehr Knoten gibt, als die, die man im HTML "bewusst" gesetzt hat.

jupp. Die Formulierung klang mehr danach, als würden vereinzelte Browser über das hinaus, was es geben sollte, noch Knoten "erfinden" - deswegen "unglücklich".

Ein Anfänger tut sich da schon schwerer mit, vor allen bei Knoten an Stellen, wo im HTML eigentlich keiner sein darf, z.B. zwischen </li> und <li>.

Vermisch bitte nicht wieder Knoten mit Elementen. Dass der Anfänger diesen Unterschied nicht erkennt ist verständlich; aber das ist nur ein Grund mehr, extrem strikt zu trennen. Selbstverständlich darf zwischen </li> und <li> ein Knoten sein, nur halt kein Element.

Zur Frage nextSibling/childNodes oder getElementsByTagName:
Natürlich kann ich mir alle Knoten ansehen und bei jedem prüfen, ob es der ist, den ich gerade benötige. Das ist wahrscheinlich die beste Lösung für Peter. Wenn ich mich aber z.B. nur für Links oder Listenelemente interessiere, ist meiner Meinung nach getElementsByTagName das bessere Werkzeug.

Ja, nur hat das weder mit dem ursprünglichen Problem noch mit dem daraus entstandenen Diskurs etwas zu tun.

Cheatah

[MudGuard]

Hi,

vor allen bei Knoten an Stellen, wo im HTML eigentlich keiner sein darf, z.B. zwischen </li> und <li>.

Da dürfen sogar beliebig viele dazwischen sein, z.B. <ul><li></li> <!-- bla --> <!-- bla --> <!-- bla --> <li></li></ul>
(hier sind's schon sieben ...)

cu,
Andreas

[Gunnar Bittersmann]

@@Peter:

<div class="menu_1">
<a href="./">link</a>
<a href="./">link</a>

Frei nach wahsaga: "Ich möchte furchtbar gern eine Liste sein, bitte bitte lass mich doch ...!!!1"

<ol class="menu_1">  
    <li><a href="./">link</a></li>  
    <li><a href="./">link</a>  
    <li>  
        <ol class="submenu_1">  
            <li><a href="./">link</a>  
                <ol class="submenu_1">  
                    <li><a href="./">link</a></li>  
                    <li><a href="./">link</a></li>  
                    <li><a href="./">link</a></li>  
                    <li><a href="./">link</a></li>  
                </ol>  
            </li>  
            <li><a href="./">link</a>  
                <ol class="submenu_1">  
                    <li><a href="./">link</a></li>  
                    <li><a href="./">link</a></li>  
                    <li><a href="./">link</a></li>  
                    <li><a href="./">link</a></li>  
                </ol>  
            </li>  
            <li><a href="./">link</a></li>  
        </ol>  
    </li>  
    <li><a href="./">link</a></li>  
    <li><a href="./">link</a></li>  
    <li><a href="./">link</a></li>  
</ol>

Live long and prosper,
Gunnar

[Peter]

Hallo Gunnar,

<div class="menu_1">
<a href="./">link</a>
<a href="./">link</a>

Frei nach wahsaga: "Ich möchte furchtbar gern eine Liste sein, bitte bitte lass mich doch ...!!!1"

<ol class="submenu_1">
                    <li><a href="./">link</a></li>
                    <li><a href="./">link</a></li>
                    <li><a href="./">link</a></li>
                    <li><a href="./">link</a></li>
                </ol>

ja mir ist klar das die Vorgehensweise seit ein paar Jahren betrieben wird.
Und ganu das wollte ich absichtlich nicht. Mir ist nicht klar warum man eine Auflistung, in meinen Augen, so zweckentfremden sollte.

Jetzt kommt wahrscheinlich wieder das Argument, Links seien ja ein Auflistung, aber dem kann ich mich nicht anschliessen. Ein Link ist für mich ein Verweis und nicht mehr oder weniger. Tonnenweise diese in <li>s einzukapseln ist mir zuwider.

Wer hat eigentlich damit angefangen das so zu handhaben?
Und vor allem, wenn es denn so toll wäre, warum ist die Vorgehensweise erst seit ein paar Jahren aktuell, kann mich nicht erinnern das im Selfhtml damals das so empfohlen wurde.

Mag sein das ich mit meiner Meinung alleine dastehe, aber für mich ist das so wie die momentane Untugend im <h1>Element das Logo einer Seite als Verweis unterzubringen, nur um dem semantischen Zwangsbedürfnis Ausdruck zu verleihen.

Peter

[Timo "God's Boss" Reitz]

ja mir ist klar das die Vorgehensweise seit ein paar Jahren betrieben wird.
Und ganu das wollte ich absichtlich nicht. Mir ist nicht klar warum man eine Auflistung, in meinen Augen, so zweckentfremden sollte.

Das ist keine Zweckentfremdung (siehe unten).

Jetzt kommt wahrscheinlich wieder das Argument, Links seien ja ein Auflistung, aber dem kann ich mich nicht anschliessen. Ein Link ist für mich ein Verweis und nicht mehr oder weniger. Tonnenweise diese in <li>s einzukapseln ist mir zuwider.

Da kommt nicht das Argument, Links seien eine Auflistung. Es kommt aber ganz sicher das Argument, eine Liste von Links auch im HTML-Code in eine Liste zu packen. Denn nichts anderes hast du: Listen von Links.

Wer hat eigentlich damit angefangen das so zu handhaben?
Und vor allem, wenn es denn so toll wäre, warum ist die Vorgehensweise erst seit ein paar Jahren aktuell, kann mich nicht erinnern das im Selfhtml damals das so empfohlen wurde.

Das kommt darauf an, wie viele Jahre das her ist. Semantisches Markup hat erst mit der weiten Verbreitung der CSS-Unterstützung Aufwind bekommen, vorher war es nunmal nicht möglich, ein gewünschtes Design und semantisches Markup zu verbinden.

Mag sein das ich mit meiner Meinung alleine dastehe, aber für mich ist das so wie die momentane Untugend im <h1>Element das Logo einer Seite als Verweis unterzubringen, nur um dem semantischen Zwangsbedürfnis Ausdruck zu verleihen.

Das und die Listengeschichte sind zwei unterschiedliche Sachen. Ich halte im <h1> die Überschrift des aktuellen Dokuments für angebracht.

[Kai345]

[latex]Mae  govannen![/latex]

ja mir ist klar das die Vorgehensweise seit ein paar Jahren betrieben wird.
Und ganu das wollte ich absichtlich nicht. Mir ist nicht klar warum man eine Auflistung, in meinen Augen, so zweckentfremden sollte.

Jetzt kommt wahrscheinlich wieder das Argument, Links seien ja ein Auflistung, aber dem kann ich mich nicht anschliessen. Ein Link ist für mich ein Verweis und nicht mehr oder weniger. Tonnenweise diese in <li>s einzukapseln ist mir zuwider.

Stichwort Barrierefreiheit.

Nimm einen vernünftigen™ Browser (Opera, Firefox, ..weitere...) und deaktiviere CSS komplett. Schau dir nun die Konstruktion mit <div>
  <a ..></a>
  <a ..></a>
  ...
</div>

und zum Vergleich die Konstruktion mit einer Liste an. Und so bekommen es diejenigen zu sehen, die keine CSS-fähigen Clients benutzen müssen. Außerdem geben bestimmte Clients (z.B. für Blinde) ggf. eine Liste anders wieder als ein div mit irgendwelchen Links.

Lies auch mal diese Seiten zu Menüs

Cü,

Kai

[molily]

Hallo,

Jetzt kommt wahrscheinlich wieder das Argument, Links seien ja ein Auflistung, aber dem kann ich mich nicht anschliessen.

»Links« als bloßer Plural, als bloße Menge von Links sind gar nichts. Aber Links treten nicht so einfach als zufällige Ballung auf, sondern eben i.d.R. in der Struktur einer Liste, die z.B. eine Seitennavigation wiedergibt.

Ein Link ist für mich ein Verweis und nicht mehr oder weniger. Tonnenweise diese in <li>s einzukapseln ist mir zuwider.

ul und ol sind dafür, Makrostrukturen zu bilden. Die sind natürlich nicht aus dem einzelnen Verweis an sich ableitbar, sondern aus der sequentiellen Struktur, die sich aus den vielen aufeinanderfolgenden Links ergibt. Insofern ist dein Argument unbrauchbar.

Wer hat eigentlich damit angefangen das so zu handhaben?

Vermutlich Tim-Berners Lee Mitte der Neunziger. :)

Und vor allem, wenn es denn so toll wäre, warum ist die Vorgehensweise erst seit ein paar Jahren aktuell

Weil man erst vor ein paar Jahren zu semantischer Textauszeichnung gekommen ist, vorher kannte man zur Makrostrukturierung bloß table, und damit wurde auch gleichzeitig die eine mögliche Präsentation fest ins Markup eingebunden. Heute zeichnet man Texte nach ihrer Struktur bzw. Bedeutung aus und trennt die Präsentation davon.

kann mich nicht erinnern das im Selfhtml damals das so empfohlen wurde.

90% der heutigen Praxis wurden »damals« nicht in SELFHTML empfohlen, und? Wissen und technische Methoden ändert sich.

Mathias