dans querySelector : comment obtenir le premier et le dernier élément ? quel est l'ordre de parcours utilisé dans le dom ?

Question

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

Tout d'abord, j'aimerais connaître la méthode la plus directe pour récupérer le premier et le dernier élément d'un ensemble.

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

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

ces bombes parce que :first et :last étaient des vœux pieux de ma part ( ?)

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

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

ces bombes parce que NodeList n'a pas de méthode pop()

(oui, il est possible d'utiliser des méthodes de tableau en plus de la liste de nœuds) :

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 actuellement, mais je pense qu'il doit y avoir quelque chose de plus direct qui m'échappe)

Deuxièmement, il convient de vérifier que les éléments sont énumérés par un parcours préalable en profondeur, conformément à la procédure suivante http://en.wikipedia.org/wiki/Tree_traversal

Answer 1

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, ajouter des contrôles d'index.

Oui, l'ordre des nœuds est de type pre-order depth-first. L'ordre des nœuds de DOM document order est définie comme suit,

Il existe un ordre, l'ordre du document, 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 de l'élément du document sera le premier nœud. Les nœuds d'éléments apparaissent avant leurs enfants. Ainsi, l'ordre du document ordonne les nœuds d'éléments dans l'ordre de l'occurrence de leur balise de début dans le XML (après expansion des entités). Les nœuds d'attributs d'un élément apparaissent après l'élément et avant ses enfants. L'ordre relatif des nœuds d'attributs dépend de l'implémentation.

Answer 2

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

vous devez rechercher last-child

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

Answer 3

J'ajoute aux réponses ici une solution (un peu différente des autres proposées) :

L'utilisation de la :last-of-type pour obtenir le dernier élément d'un certain type d'information. étiquette nom.

Méthode des tableaux at() est également utile en combinaison avec querySelectorAll mais il faut déstructurer le résultat pour obtenir un "vrai" tableau, parce que querySelectorAll n'a pas le at à sa disposition (c'est triste...)

console.log(
  ":last-of-type:",
  document.querySelector('mark:last-of-type') // <---- 
)

console.log(
  ":last-child:",
  document.querySelector('mark:last-child')
)

console.log(
  "querySelectorAll + at:",
  [...document.querySelectorAll('mark')].at(-1)
)

<p>
this is <mark>highlighted</mark> and this is <mark>is also</mark> but <strong>not this</strong>.
</p>

Answer 4

Exemple pour obtenir le dernier élément d'entrée :

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

Answer 5

let first = div.querySelector('[move_id]');
let last  = Array.from(div.querySelectorAll('[move_id]')).pop();