querySelectorAll ne fonctionne pas
J'ai une exigence où j'ai à la collecte de la dernière .div
à l'intérieur d'un conteneur et d'appliquer un peu de logique métier. La sélection de la dernière .div
doit être dynamique, car l'utilisateur a la possibilité d'ajouter/supprimer des .div
éléments.
J'ai d'abord essayé avec querySelectorAll
mais il n'a pas l'air de fonctionner. J'ai donc décidé de le changer pour getElementsByClassName
et étonnamment, il a travaillé avec la même logique. Quelqu'un peut-il m'aider avec la raison pour laquelle le remove_div
ne fonctionne pas, alors que le second ( remove_div_2
)?
Note: je ne suis pas à la recherche d'une solution/solution à la question parce que j'ai déjà procédé à la deuxième option. Je veux juste savoir la raison pour laquelle l'option avec querySelectorAll
ne fonctionne pas.
Ci-dessous mon code:
HTML:
<div id='container'>
<div id='div1' class='div'>This is Div 1</div>
<div id='div2' class='div'>This is Div 2</div>
<div id='div3' class='div'>This is Div 3</div>
</div>
<button type='button' id='append_div'>Append Div</button>
<button type='button' id='remove_div'>Remove Div</button>
<button type='button' id='remove_div_2'>Remove Div 2</button>
JavaScript:
window.onload = function () {
var elementToStyle = document.querySelectorAll("#container .div");
elementToStyle[elementToStyle.length - 1].classList.add('red');
document.getElementById('append_div').onclick = function () {
var divToInsert = document.createElement('div');
divToInsert.id = 'new_div';
divToInsert.className = 'div';
divToInsert.innerHTML = 'This is an appended div';
document.getElementById('container').appendChild(divToInsert);
var elToStyle = document.querySelectorAll("#container .div");
for (i = 0; i < elToStyle.length; i++)
elToStyle[i].classList.remove('red');
elToStyle[elToStyle.length - 1].classList.add('red');
};
document.getElementById('remove_div').onclick = function () {
var elToStyle = document.querySelectorAll("#container .div");
document.getElementById('container').removeChild(elToStyle[elToStyle.length - 1]);
elToStyle[elToStyle.length - 1].classList.add('red');
};
document.getElementById('remove_div_2').onclick = function () {
var elToStyle = document.getElementsByClassName('div');
document.getElementById('container').removeChild(elToStyle[elToStyle.length - 1]);
elToStyle[elToStyle.length - 1].classList.add('red');
};
}
OriginalL'auteur | 2013-09-11
Vous devez vous connecter pour publier un commentaire.
La raison en est que
querySelectorAll
méthode renvoie une liste statique. Toutes les modifications apportées au document après laquerySelectorAll
est utilisé (commeremoveChild
dans ce cas) ne figurera pas dans la liste des nœuds retournés. DoncelToStyle[elToStyle.length - 1]
serait toujours pointer vers le nœud qui a été supprimé.Alors que,
getElementsByClassName
sur l'autre main retourne un direct de la liste de nœuds. Cela implique queelToStyle[elToStyle.length - 1]
serait toujours pointer vers le dernier.div
indépendamment des modifications ont été apportées au document après le nœud de la liste a été préparée ou pas.Ci-dessous est extrait de la documentation officielle ici
Remarque: Vous pouvez le voir en faisant un
console.log(elToStyle);
à la fois avant et après laremoveChild
.OriginalL'auteur Harry
Si vous voulez faire référence à la dernière division de l'élément il suffit de faire ce qui suit...
..et ensuite appliquer votre
querySelector
.class='div'
car il est mentionné comme.div
dans la questionOriginalL'auteur John