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

Utiliser element.firstElementChild et element.lastElementChild

Si vous souhaitez obtenir le premier enfant élément , utiliser : node.firstElementChild . (si vous voulez le premier enfant, même s'il s'agit d'un non-élément comme le texte, utilisez : node.firstChild ).

Si vous souhaitez obtenir le dernier enfant élément , utiliser : node.lastElementChild . (encore une fois, si vous voulez sélectionner un enfant qui n'est pas un élément, comme du texte, utilisez : node.lastChild ).

MDN WebDocs Description

Extrait des webdocs MDN mentionnés ci-dessus :

premierélémentenfant - La propriété en lecture seule Element.firstElementChild renvoie le premier élément enfant d'un élément, ou null s'il n'y a pas d'élément enfant.

dernierElémentEnfant - La propriété en lecture seule Element.lastElementChild renvoie le dernier élément enfant d'un élément, ou null s'il n'y a pas d'élément enfant.

Prise en charge d'un grand nombre de navigateurs

firstChild y lastChild avoir compatibilité avec un très grand nombre de navigateurs .

Pris en charge dans :

• Chrome - Version 1
• Edge - Version 12
• Firefox - Version 1
• Internet Explorer - Version 6
• Opera - Version 12.1
• Safari - Version 1

Démonstration pratique - firstElementChild & lastElementChild

var mydiv = document.getElementById('my-div');
mydiv.firstElementChild.style.backgroundColor = 'green';
mydiv.lastElementChild.style.backgroundColor = 'green';

<div id="my-div">
    <p>My first paragraph!</p>
    <p>Here is an intermediate paragraph!</p>
    <p>Here is another intermediate paragraph!</p>
    <p>Here is yen another intermediate paragraph!</p>
    <p>My last paragraph!</p>
</div>

Démonstration de travail - firstChild & lastChild

var mydiv = document.getElementById('my-div');
mydiv.firstChild.style.backgroundColor = 'green';
mydiv.lastChild.style.backgroundColor = 'green';

<div id="my-div"><p>My first paragraph!</p><p>Here is an intermediate paragraph!</p><p>Here is another intermediate paragraph!</p><p>Here is yen another intermediate paragraph!</p><p>My last paragraph!</p></div>

Answer 2

Vous pouvez obtenir directement le premier et le dernier élément.

//-- first element
console.log( document.querySelector("#my-div").querySelectorAll( "p" )[0] );
//-- last element
console.log( document.querySelector("#my-div").querySelectorAll( "p" )[document.querySelector("#my-div").querySelectorAll( "p" ).length-1] );

<div id="my-div">
  <p>My first paragraph!</p>
  <p>Here is an intermediate paragraph!</p>
  <p>Here is another intermediate paragraph!</p>
  <p>Here is yen another intermediate paragraph!</p>
  <p>My last paragraph!</p>
</div>

Answer 3

Exemple pour obtenir le dernier article ou tout autre élément :

document.querySelector("article:last-child")