Elemente nur 1 level unter dem aktuellen element per javascript

Ich brauche Zugriff auf den DOM-Baum und Holen Sie sich die Elemente nur 1 level unter dem aktuellen element.

Lesen Sie den folgenden code:

<div id="node">
    <div id="a">
        <div id="aa">
            <div id="ab">
                <div id="aba"></div>
            </div>
        </div>
    </div>
    <div id="b">
        <div id="ba">
            <div id="bb">
                <div id="bba"></div>
            </div>
        </div>
    </div>
    <div id="c">
        <div id="ca">
            <div id="cb">
                <div id="cba"></div>
            </div>
        </div>
    </div>
</div>

Möchte ich, um die 3 Elemente "a", "b", "c" unter "Knoten". Was soll ich tun?

var Knoten = Knoten.getElementsByTagName("div") <---- bekomme ich alle divs aber nicht die 3 divs, die ich brauche.

var Knoten = Knoten.childNodes; <---- funktioniert im IE, aber FF enthält Text-Knoten

Weiß jemand, wie das problem zu lösen?

InformationsquelleAutor Billy | 2009-02-27
  1. 12

    Könnten Sie eine Funktion benutzen, die Regeln alle nicht-element-Knoten:

    function getChildNodes(node) {
    var children = new Array();
    for(var child in node.childNodes) {
        if(node.childNodes[child].nodeType == 1) {
            children.push(child);
        }
    }
    return children;
}
    • Danke, hat mir geholfen, aus - Tipp für andere Benutzer - es sind Kinder.push(child);
    • Vielen Dank für den Hinweis. Ich habe die Antwort entsprechend.
    • Sie könnten auch erwägen splice () - löschen von Knoten. Es könnte ein bisschen schneller sein?
    InformationsquelleAutor Turismo
  2. 4

    Ich würde empfehlen, die Sie Blick auf JQuery. Die Aufgabe, die Sie schauen, um zu tun, ist einfach in reines Javascript, aber wenn Sie tun, jede zusätzliche DOM-traversal, JQuery geht zu sparen Sie unzählige Stunden der frustration. Nicht nur das, sondern es funktioniert in allen Browsern und hat eine sehr gute "Dokument bereit" - Methode.

    Dein problem gelöst mit JQuery sieht wie folgt aus:

    $(document).ready(function() {
    var children = $("#node").children();
});

    Sieht es für ein beliebiges element mit der id "Knoten" gibt dann seine Kinder. In diesem Fall children ist ein JQuery-Kollektion Iteration mit einer for-Schleife. Zusätzlich konnte man Durchlaufen Sie diese mit der each () - Befehl.

    InformationsquelleAutor Soviut
  3. 3

    Dies ist einfacher als Sie denken:

    var nodes = node.querySelector("node > div");
    • Das wird nicht funktionieren, wenn der Knoten enthält einen anderen Knoten des gleichen Typs.
    • ..querySelectorAll ?
    InformationsquelleAutor Maurizio In denmark
  4. 2

    Versuchen, diese (späte Antwort, aber kann nützlich sein für andere):

    var list;
list=document.getElementById("node").querySelectorAll("#node>div");
    InformationsquelleAutor Simon Hi
  5. 0

    Ich denke Knoten.childNodes ist der richtige Ort, um zu starten. Sie könnte damit es funktioniert mit FF auch), test der nodeName (und möglicherweise nodeType) aller untergeordneten Knoten, die Sie erhalten, zu überspringen, text-Knoten.

    Auch Sie vielleicht einen Blick auf einige javascript-Bibliothek wie Prototyp, die eine Menge nützliche Funktionen.

    InformationsquelleAutor Ridcully
  6. 0

    Habe ich etwas text, damit wir sehen können, dass es funktioniert, und JavaScript-Code hinzufügen "Hinzugefügt!" auf den Boden jedes der divs an der Basis:

    JS:

    var cDiv = document.querySelectorAll('body > div > div'), i;
for (i = 0; i < cDiv.length; i++)
{
	cDiv[i].appendChild(document.createTextNode('added!'));
}

    HTML:

    <div id="node">
    <div id="a">a
        <div id="aa">aa
            <div id="ab">ab
                <div id="aba">aba</div>
            </div>
        </div>
    </div>
    <div id="b">b
        <div id="ba">ba
            <div id="bb">bb
                <div id="bba">bba</div>
            </div>
        </div>
    </div>
    <div id="c">c
        <div id="ca">ca
            <div id="cb">cb
                <div id="cba">cba</div>
            </div>
        </div>
    </div>
</div>

    InformationsquelleAutor Aaron Mason
  7. -1

    Meiner Meinung nach der einfachste Weg, dies zu tun ist, um eine Klasse name der
    ersten Ebene untergeordneten Knoten:

    <div id="node">
    <div id="a" class="level_1">
        <div id="aa">
            <div id="ab">
                <div id="aba"></div>
            </div>
        </div>
    </div>
    <div id="b" class="level_1">
        <div id="ba">
            <div id="bb">
                <div id="bba"></div>
            </div>
        </div>
    </div>
    <div id="c" class="level_1">
        <div id="ca">
            <div id="cb">
                <div id="cba"></div>
            </div>
        </div>
    </div>
</div>

    dann verwenden Sie die Methode getElementsByClassName, also in diesem Fall:

    document.getElementById('node').getElementsByClassName('level_1');
    InformationsquelleAutor Phil
Schreibe einen Kommentar