Comment utiliser getElementsByTagName() pour trouver tous les éléments imbriqués?

J'ai le code HTML suivant:

<html>
  <head><title>Title</title></head>
  <body>
    <div id='div2'>
      <a href='#'>1</a>
      <div id='div1'>
        <a href='#'>2</a>
      </div> 
    </div>

  </body>
</html>

... et le code Javascript suivant, je suis en cours d'exécution à travers Greasemonkey:

var nodes = document.body.getElementsByTagName('a');
for (var i = 0; i < nodes.length; i++) {
  var node = nodes[i];
  node.parentNode.removeChild(node);    
}

Je m'attends à trouver et supprimer tous les tags; au lieu de cela, il trouve le premier, mais pas le second. Aussi loin que je peux dire c'est avoir de la difficulté avec la façon dont le deuxième est Une balise imbriquée.

Quelqu'un pourrait s'il vous plaît laissez-moi savoir comment faire pour supprimer toutes les balises, à l'aide de getElementsByTagName? Il y a des raisons, je préfère ne pas utiliser XPath si possible.

Il va probablement exiger la récursivité.
La documentation que j'ai lu dit: "La méthode getElementsByTagName recherches de manière récursive à travers tous les nœuds descendants du nœud actuel de la recherche pour les éléments de nœuds avec le nom spécifié." Donc, je m'attendais à faire la récursivité pour moi, ce qui m'amène à penser que je suis en train de faire une simple erreur.

OriginalL'auteur Duncan Bayne | 2010-09-24

  1. 5

    De Capture de la longueur et retirer dans l'ordre inverse. Cela permettra d'éliminer les effets secondaires.

    var nodes = document.body.getElementsByTagName('a');

for (var J=nodes.length-1;  J >= 0;  J--) //-- Kill the last, first, to avoid orphan problems.
{
    var node    = nodes[J];
    if (node)
    {
        node.parentNode.removeChild (node);
    }
}

    Mais une meilleure façon...

    Ajouter cette directive à votre en-tête:

    //@require http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

    Ensuite l'ensemble de votre code devient:

    $("a").remove ();

    OriginalL'auteur Brock Adams

  2. 1

    Suivantes Vinay réponse:

    var nodes = document.body.getElementsByTagName('a');
while(nodes.length > 0) {
  nodes[0].parentNode.removeChild(nodes[0]);
}

    Depuis à l'aide d'une boucle for, comme c'est bizarre si vous n'êtes pas fait usage de l'itérateur pour rien.

    En fait je l'utilise dans mon code; l'extrait, j'ai collé était le plus petit sous-ensemble de mon code qui reproduit le problème.

    OriginalL'auteur Jamie Wong

  3. 1

    L'erreur était de supprimer le nœud puis passez à l'élément suivant. La suppression de la première (#0), la seconde le 1er janvier.

    var nodes = document.body.getElementsByTagName('a');
for (var i = 0; i < nodes.length; i++) {
  var node = nodes[0]; //fixed 0 here, as opposed to i
  node.parentNode.removeChild(node);    
}

    OriginalL'auteur Macsek

  4. 0

    modifier votre code pour

    var nodes = document.body.getElementsByTagName('a');
for (var i = 0; nodes.length > 0; i++) {
    var node = nodes[0];
    node.parentNode.removeChild(node);    
}

    nœuds.longueur obtient évalué chaque fois que vous supprimez un enfant.

    Même si les nœuds.la longueur est évalué à chaque fois, pourquoi ne node.parentNode.removeChild(node) fait retirer de la pile, contre tout juste de le nœud DOM?
    essayez de déboguer le script d'origine, vous comprendrez ce que je veux dire par réévaluée. pour y cela se produit, vous pouvez regarder dans n'importe quel article sur javascript meilleures pratiques pour l'explication.

    OriginalL'auteur Vinay B R