web-dev-qa-db-fra.com

dans querySelector: comment obtenir les premiers et obtenir les derniers éléments? quel ordre de traversée est utilisé dans le dom?

dans une div, avoir des éléments (pas nécessairement de 2e génération) avec l'attribut move_id.

Tout d'abord, aimerait la manière la plus directe de récupérer les premier et dernier éléments de l'ensemble

essayé d'obtenir le premier et le dernier via:

var first = div.querySelector('[move_id]:first');
var last  = div.querySelector('[move_id]:last');

cette bombe parce que: d'abord et: dernier étaient des vœux pieux de ma part (?)

ne peut pas utiliser les méthodes de tableau de querySelectorAll puisque NodeList n'est pas un tableau:

var first = (div.querySelectorAll('[move_id]'))[0];
var last  = (div.querySelectorAll('[move_id'])).pop();

cette bombe parce que NodeList n'a pas de méthode pop()

(oui, on pourrait utiliser des méthodes Array en haut de la NodeList:

var first = div.querySelector('[move_id]');
var last = Array.prototype.pop.call(div.querySelectorAll('[move_id']));

cela fonctionne, et c'est ce que j'utilise maintenant, mais penser qu'il doit y avoir quelque chose de plus direct qui me manque tout simplement)

Deuxièmement, il faut vérifier que les éléments sont répertoriés par une traversée de profondeur en premier selon http://en.wikipedia.org/wiki/Tree_traversal

javascriptdomhtml5
49
cc young

Pour accéder aux premier et dernier éléments, essayez.

var nodes = div.querySelectorAll('[move_id]');
var first = nodes[0];
var last = nodes[nodes.length- 1];

Pour plus de robustesse, ajoutez des vérifications d'index.

Oui, l'ordre des nœuds est la profondeur de précommande en premier. document order Du DOM est défini comme,

Il existe un ordre, ordre des documents, défini sur tous les nœuds du document correspondant à l'ordre dans lequel le premier caractère de la représentation XML de chaque nœud apparaît dans la représentation XML du document après expansion des entités générales. Ainsi, le nœud d'élément de document sera le premier nœud. Les nœuds d'élément se produisent avant leurs enfants. Ainsi, l'ordre des documents ordonne les nœuds d'éléments par ordre d'occurrence de leur balise de début dans le XML (après expansion des entités). Les nœuds d'attribut d'un élément se produisent après l'élément et avant ses enfants. L'ordre relatif des nœuds d'attribut dépend de l'implémentation.

70
Anurag

:last ne fait pas partie de la spécification css, c'est spécifique à jQuery.

vous devriez chercher last-child

var first = div.querySelector('[move_id]:first-child');
var last  = div.querySelector('[move_id]:last-child');
57
Guillaume Massé

Exemple pour obtenir l'élément d'entrée last:

document.querySelector(".groups-container >div:last-child input")

5
g.breeze