11480 sujets

JavaScript, DOM et API Web HTML5

Bonjour

Dans une structure du genre:

    <div id="div1">
        <div id="div1_1">
            <div id="div1_1_1">......</div>
            ..........
        </div>
        <div id="div1_2"> .... </div>
        <div id="div1_3"> ....  </div>
    </div>


Si j'écris

    var div1 = document.getElementById('div1');
    var div1Children = div1.getElementByTagName('div');

Je récupère non seulement les enfant directs (div1_1, div1_2, div1_3), mais également les descendants de ces enfants, par exemple div1_1_1.
Y a-t-il un moyen simple (autre que parcourir l'arborescence) de ne récupérer que les enfants direct?
Je suis dans un contexte où je ne peux pas utiliser jQuery, qui serait bien pratique pour ce genre de problème.

Merci de votre aide
Modérateur
Salut,


var elDivPremierNiveau = document.querySelectorAll('#div1 > *');


à+
Modifié par niuxe (24 May 2015 - 17:19)
Modérateur
@Raphaël : réponse en même temps surement. Smiley smile
Modifié par niuxe (24 May 2015 - 17:18)
Merci de vos réponse, mais je me suis mal exprimé.
Dans mes fichiers réels, les div n'ont pas d'id, je les ai simplement mis pour expliqué ce que je voulais.

Reprenons l'exemple sans id:

<div>[i]1ère div de la page[i]
        <div>[i]2ème div de la page, 1er enfant de la  1ère div[[/i]
            <div>[i]3ème div de la page, 1er enfant de la 2ème div[/i]</div>
            ..........
        </div>
        <div>[i]N ème enfant de la page, 2ème enfant de la 1ère div[/i]</div>
        <div>[i]N+P ème enfant de la page, 3ème enfant de la 1ère div[/i]</div>
    </div>

Je voudrais retrouver un array "directChildren" qui ne contiendrait que les enfants directs de la 1ère div et pas les petits enfants, arrière petits enfants, etc.

Le but est de faire une boucle

    for(var i = 0; i < directChildren.length; i++) directChildren[ i ].id = 'div1_' + (i + 1);
[/i][/i]
Modifié par PapyJP (24 May 2015 - 18:01)
Juste comme exemple de ce que j'aimerais éviter de faire, voici un bout de code OHO que j''utilise pour ce genre de choses. Je peux bien entendu le refaire en JavaScript, mais j'aurais préféré trouver quelque chose de plus simple si possible:

function getChildrenWithTagName($xmlItem, $tagName) {
    $children = array();
    $tagEntries = $xmlItem -> getElementsByTagName($tagName);
    foreach($tagEntries as $tagEntry) {
        if($tagEntry -> parentNode -> isSameNode($xmlItem)) $children[] = $tagEntry;
    }
    return $children;
}

sachant qu'en JavaScript isSameNode a été supprimé, du moins par Mozilla, et doit être remplacé par "==="
Modifié par PapyJP (24 May 2015 - 18:11)
Zelalsan a écrit :
salut,
tu peux tout simplement passer par children

div1.children[0];
div1.children.length;

etc.

Pourquoi pas? sauf qu'il faut rechercher les bons, car bien entendu il y a d'autres enfants d'autre type.
J'ai fini par faire ce que je voulais éviter: réécrire mon code PHP en Javascript:

function getDirectChildren(element, tag) {
    var children = element.getElementsByTagName(tag);
    var directChildren = [];
    for(var i = 0; i < children.length; i++) {
        if(children[ i ].parentNode === element) directChildren[directChildren.length] = children[ i ];
    }
    return directChildren;
}

Ça a l'air de marcher sans problème.
Modifié par PapyJP (24 May 2015 - 19:41)
Zelalsan a écrit :
children retourne exactement la même chose.

Certes, cela donnerait quelque chose comme:

function getDirectChildren(tag) {
    var children = element.children;
    var directChildren = [];
    for(var i = 0; i < children.length; i++) {
        if(children[ i ].tagName == tag} directChildren[directChildren.length] = children[ i ];
    }
    return directChildren;
}
Au temps pour moi, en fait je ne m'étais pas imaginé qu'il pourrait y avoir d'autres types d'éléments. Du coup je ne comprends pas ce qui gène dans querySelectorAll.
De toute façon tu as besoin de récupérer le parent de référence pour pouvoir en déduire ses enfants directs. Au pire, tu peux ajouter une classe ou un attribut personnalisé dynamiquement, puis procéder à un querySelectorAll.
Zelalsan a écrit :
Au temps pour moi, en fait je ne m'étais pas imaginé qu'il pourrait y avoir d'autres types d'éléments. Du coup je ne comprends pas ce qui gène dans querySelectorAll.
De toute façon tu as besoin de récupérer le parent de référence pour pouvoir en déduire ses enfants directs. Au pire, tu peux ajouter une classe ou un attribut personnalisé dynamiquement, puis procéder à un querySelectorAll.

Tu as sans doute raison, je pensais que querySelector... était une fonction jQuery, mais apparemment c'est LA SOLUTION que je cherchais.
J'espère que c'est assez généralement supporté par les navigateurs pour que je puisse m'en servir.
Merci encore.
Administrateur
PapyJP a écrit :

Tu as sans doute raison, je pensais que querySelector... était une fonction jQuery, mais apparemment c'est LA SOLUTION que je cherchais.
J'espère que c'est assez généralement supporté par les navigateurs pour que je puisse m'en servir.
Merci encore.

Pas loin, c'est une fonction ajoutée dans JS grâce à jQuery (sur l'air de "ça serait bien d'avoir en JS natif cette fonctionnalité qui fait une bonne partie du succès de jQuery") Smiley smile

Compatibilité IE8+ comme le dit Zelalsan (et Safari 3.2 et Android 2.1 donc OK sur mobile également)
https://developer.mozilla.org/fr/docs/Web/API/Document/querySelector
Modifié par Felipe (25 May 2015 - 11:26)