Les enfants avec nom de balise <div> qu'en javascript

J'ai un code HTML comme:

<div id="xyz">

 <svg>......</svg>
 <img>....</img>
 <div id = "a"> hello </div>
 <div id = "b"> hello
      <div id="b1">I m a grand child</div>     
 </div>
 <div id = "c"> hello </div>

</div>

Je veux obtenir tous les enfants avec des balises "div" du parent de l'élément avec l'id = xyz dans une variable javascript.

Tels que mon résultat devrait être:

"<div id = "a"> hello </div>
 <div id = "b"> hello
      <div id="b1">I m a grand child</div>     
 </div>
 <div id = "c"> hello </div>"

OriginalL'auteur Hardik Dave | 2014-04-28

  1. 7

    Vous pouvez utiliser querySelectorAll: 

    var childDivs = document.querySelectorAll('#xyz div')

    Une méthode pour transformer les divs pour une chaîne de magasin ou d'alerte) pourrait être:

    var divsHtml = function () {
    var divhtml = [],
        i = -1,
        divs = document.querySelectorAll('#xyz div');
    while (i++ < divs.length) {
        divs[i] && divhtml.push(divs[i].outerHTML);
    }
    return divhtml.join('');
}();

    Si vous avez besoin de compatibilité pour les navigateurs plus anciens (j'.c. IE<8) l'utilisation @ Cerbrus " la méthode pour récupérer les divs, ou l'utilisation d'une cale d'épaisseur.

    À éviter la double inscription de (imbriqué) vrd, vous souhaiterez peut-être utiliser

    var divsHtml = function () {
    var divhtml = [],
        i = -1,
        divs = document.querySelector('#xyz').childNodes;
    while (i++ < divs.length) {
        divs[i] &&
        /div/i.test(divs[i].tagName) &&
        divhtml.push(divs[i].outerHTML);
        /* ^ this can also be written as:
          if(divs[i] && /div/i.test(divs[i].tagName) {
              divhtml.push(divs[i].outerHTML)
          }
        */
    }
    return divhtml.join('');
}();

    Voici un jsfiddle

    Gardez à l'esprit que querySelectorAll est IE 8/9+
    Il donne un [objet NodeList], comment puis-je alerte? pour voir le contenu? Je voudrais également puis le stocker dans mon local de stockage.
    voir ajusté réponse.
    Ça marche!!!! Cependant, je doit être initialisée à -1 sinon il ignore le premier div enfant dans l'ordre. Merci!!
    Ce sera complètement gâcher la structure html, surtout si il y a un quelques couches de divs imbriqués. Cela mis à part, la plus qui a obtenu cette réponse acceptée ne répond pas à la question d'origine.

    OriginalL'auteur KooiInc

  2. 18

    Vous pouvez simplement obtenir le #xyz div abord, puis trouver tous div enfants:

    var childDivs = document.getElementById('xyz').getElementsByTagName('div')
//                       ^ Get #xyz element;         ^ find it's `div` children.

    L'avantage de cette méthode sur Document.querySelectorAll est que ces sélecteurs de travail dans assez bien chaque navigateur, par opposition à IE 8/9+ pour le queryselector.

    Vais-je être en mesure d'obtenir toutes les divs puis dans une variable une chaîne de caractères? Cela fonctionne, mais renvoie un objet. Qui je le crains n'est pas stocké correctement dans mon localstorage
    Pourquoi voulez-vous ces éléments stockés dans localstorage? Qu'essayez-vous de faire?
    Comme je voudrais être en mesure de recharger ces matières avec les modifications appliquées sur eux sur l'actualisation de la page. Donc, je veux stocker les divs sur seulement intoo mon local de stockage.
    Hormis le fait que le stockage et le ré-insérer du html brut, comme ça semble être un problème de sécurité, pourquoi ne pas vous obtenez juste le contenu html de la xyz div? (document.getElementById('xyz').innerHTML). C'est le texte, et facile à stocker / restauré. De toute façon, cela semble être une question distincte. Veuillez envisager d'accepter cette réponse, car il répond à la question posée.

    OriginalL'auteur Cerbrus

  3. 5

    Si vous voulez que les enfants immédiats de xyz, vous pouvez appeler

    var childrendivs = document.querySelectorAll('#xyz > div');

    ou de calculer vous-même, si vous utilisez un ancien navigateur, sans document.querySelectorAll-Soutien

    var childrendivs = [],
    children = document.getElementById('xyz').children;
for(var i = 0; i < children.length; i++){
    if (children[i].tagName == "DIV") {
        childrendivs.push(children[i]);
    }
}

    OriginalL'auteur Artjom B.

  4. 3

    À moins que j'ai mal compris, c'est exactement ce que getElementsByTagName.

    Il n', mais comment puis-je obtenir uniquement les balises div de la div parent(xyz)? Je veux obtenir tous les éléments par nom de balise "div", mais de la société mère(xyz).
    tout comme Cerbrus dit: getElementById('xyz').getElementsByTagName
    C'est la bonne réponse pour la performance
    n'est-ce pas obtenir plus que juste des enfants directs? Que faire si je veux seulement les enfants avec le nom de la balise?

    OriginalL'auteur georg