Comment une nodelist créée par getElementsByClassname ou getElementsByTagName peut-elle afficher ses valeurs sous forme de chaîne?

Ce que je sais de getElementsByClassName/getElementsByTagName est que les deux créent une nodelist des éléments en question et que les éléments nodelist sont traités comme des objets auxquels j'ai un problème. vouloir afficher le innerHTML des éléments à l'intérieur de la nodelist mais comme ce sont des objets, cela semble impossible.Comment une nodelist créée par getElementsByClassname ou getElementsByTagName peut-elle afficher ses valeurs sous forme de chaîne?

Exemple:

<!DOCTYPE html> 
<head> 
    <link rel="stylesheet" type="text/css" href="stylesheet.css"> 
    <script src="javascript.js"></script> 
</head> 
    <body> 
     <p id="pp"></p> 
     <button onclick="test()">push to test</button> 
     <p>dog</p> 
     <p>cat</p> 
     <p>snake</p> 
    </body>

fichier //javascript.js

function test() { 
    var paragraph = document.getElementsByTagName("p"), 
     para1 = paragraph[0].innerHTML, 
     ansBox = document.getElementById("pp"); 
    ansBox.innerHTML = para1; 
}

ceci est une version condensée d'un code plus. Je pense que la variable para1 devrait être une chaîne et ensuite l'instruction d'assignation devrait assigner cette chaîne à ansBox.innerHTML mais à la place je n'obtiens rien. J'ai retravaillé plusieurs versions de ce code aucun travail. Comment pouvez-vous afficher les éléments de texte à l'intérieur d'une nodelist dans la boîte à icônes?

Source

2017-05-07 JaMe

J'ai oublié d'ajouter les balises d'ouverture et de fermeture HTML dans l'exemple ci-dessus, désolé – JaMe

Votre script est chargé mais votre DOM n'a pas encore chargé si vous chargez votre script à l'intérieur head comme

<!DOCTYPE html> 
<head> 
    <link rel="stylesheet" type="text/css" href="stylesheet.css"> 
</head> 
    <body> 
     <p id="pp"></p> 
     <button onclick="test()">push to test</button> 
     <p>dog</p> 
     <p>cat</p> 
     <p>snake</p> 
     <script src="javascript.js"></script> <!-- load it here --> 
    </body>

également paragraph[0] et ansBox se réfèrent au même DOM HTMLParagraphElement juste pour que vous savez qui n'a pas rien à l'intérieur (il est vide pour commencer)

Source

2017-05-07 03:24:27 Dummy

Je sais que mettre le script dans la tête peut retarder le chargement du document, mais il va quand même charger le script lui-même ne fonctionnera pas jusqu'à l'événement de clic du bouton, ce qui devrait être bon. De même, le paragraphe [0] et ansBox font référence à différentes balises p. Le paragraphe [0] fait partie de la méthode getElementByTagId donc il s'agit d'un objet nodelist, et ansBox est assigné avec le getElementById qui est le seul paragraphe qui n'est pas inclus avec les autres balises car il est le seul à avoir un identifiant. Oui, la zone ansBox a été affectée à vide, mais a été réaffectée à droite après les mots – JaMe

@JaMe ** paragraph ** est le 'HTMLCollection', ** le paragraphe [0] ** est la balise ** first **' p' de votre document qui est * ** le même élément référencé par 'ansBox' ***, donc votre code est auto-assigné, pense que vous êtes toujours confus au sujet de l'API, inclus un lien pour votre recherche [Element.getElementsByTagName()] (https: // developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName) – Dummy

Merci Dummy, (Il suffit de lire votre nom d'utilisateur). Le problème était que je pensais en attribuant un identifiant au premier paragraphe que je supprimais effectivement ce paragraphe d'être collecté avec les balises p «normales», mais il est toujours indexé comme 0. Aussi, je ne connais apparemment pas la différence entre nodelist et un HTMLCollection. J'ai un long chemin à faire! – JaMe

Dans le code JavaScript ci-dessus, vous avez pris le code HTML dans un élément vide, puis vous l'avez assigné à lui-même, et bien sûr vous obtenez une valeur vide.

Source

2017-05-07 03:38:06

J'ai pris un élément HTML vide et lui ai assigné un élément nodelist. Un élément nodelist a été affecté à para1 à partir de la variable de paragraphe. Qui a été affecté à une collection HTML à cause de la méthode getElementsByTag. Ses différentes choses – JaMe

Peut-être que vous vous trompez, la variable 'paragraph' renvoie un [HTMLCollection] (https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName). La variable 'para1' n'est pas un' HTMLCollection'. Dans le code ci-dessus, 'paragraph [0]' renvoie un [HTMLParagraphElement] (https://developer.mozilla.org/en-US/docs/Web/API/HTMLParagraphElement), correspondant à l'élément à la position 0 dans '' HTMLCollection', à savoir l'élément p dont l'identifiant est "pp" dans le code ci-dessus. –

Merci, café Tien. Tu as raison. Je pensais que la balise ID provoquerait la méthode getElementByTag d'ignorer cette balise. Nan! Il comptait encore et m'a permis de lui attribuer un tag vide :) Merci d'avoir pris le temps d'aider – JaMe

Comment une nodelist créée par getElementsByClassname ou getElementsByTagName peut-elle afficher ses valeurs sous forme de chaîne?

Répondre

Questions connexes