Obtenir les éléments à seulement 1 niveau en dessous de l'élément courant en javascript

J'ai besoin d'accéder à l'arborescence du DOM et obtenir les éléments à seulement 1 niveau en dessous de l'élément courant.

Lire le code suivant:

<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>

Je veux obtenir les 3 éléments "a", "b", "c" à la rubrique "nœud". Que dois-je faire?

var nœuds = node.getElementsByTagName("div") < - - - - - je obtenir tous les divs mais pas les 3 divs j'ai besoin.

var nœuds = node.childNodes; <---- fonctionne sous IE, mais FF de Texte contient le Nœud

Personne ne sait comment résoudre le problème?

OriginalL'auteur Billy | 2009-02-27

dom javascript

11

Vous pouvez utiliser une fonction qui écarte tous les non-nœuds d'élément:
```
function getChildNodes(node) {
    var children = new Array();
    for(var child in node.childNodes) {
        if(node.childNodes[child].nodeType == 1) {
            children.push(child);
        }
    }
    return children;
}
```
Merci, pour l'aide - conseil pour les autres utilisateurs, c'est les enfants.push(enfant);
Merci de remarquer. J'ai changé la réponse en conséquence.
Vous pouvez également envisager de splice() pour supprimer des nœuds. Il pourrait être un peu plus vite?

OriginalL'auteur Turismo
4

Je recommande fortement que vous regardez JQuery. La tâche que vous cherchez à faire est simple en Javascript, mais si vous faites supplémentaires DOM traversée, JQuery qui va vous sauver d'innombrables heures de frustration. Non seulement cela, mais il fonctionne sur tous les navigateurs et a un très bon document sur les "prêts" de la méthode.

Votre problème résolu avec JQuery ressemble:
```
$(document).ready(function() {
    var children = $("#node").children();
});
```
Il semble pour tout élément avec un id de "nœud", puis retourne à ses enfants. Dans ce cas, children est un JQuery collection que l'on peut parcourir à l'aide d'une boucle for. En plus, vous pouvez effectuer une itération sur eux à l'aide de la() de la commande.

OriginalL'auteur Soviut
3

C'est plus simple que vous le pensez:
```
var nodes = node.querySelector("node > div");
```
Cela ne fonctionnera pas si le noeud contient un autre nœud du même type.
..querySelectorAll ?

OriginalL'auteur Maurizio In denmark
2

Essayez ceci (réponse tardive, mais peut être utile pour les autres):
```
var list;
list=document.getElementById("node").querySelectorAll("#node>div");
```
OriginalL'auteur Simon Hi
0

Je pense nœud.childNodes est le bon endroit pour commencer. Vous pourriez, pour le faire fonctionner avec FF trop), test de la nodeName (et éventuellement nodeType) de tous les nœuds enfants que vous obtenez, à ignorer les nœuds de texte.

Aussi, vous pourriez avoir un coup d'oeil à certains de la bibliothèque javascript comme prototype, qui offrent une multitude de fonctions utiles.

OriginalL'auteur Ridcully

-1

À mon avis la façon la plus simple de le faire est d'ajouter un nom de classe à l'
premier niveau des nœuds enfants:

<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>

puis d'utiliser la méthode getElementsByClassName, donc dans ce cas:

document.getElementById('node').getElementsByClassName('level_1');

OriginalL'auteur Phil

Vous devez vous connecter pour publier un commentaire.