[解決済み] in querySelector: どのように最初の要素を取得し、最後の要素を取得するのか？

質問

を持つ要素（第2世代とは限らない）が、divの中で move_id .

まず、集合の最初と最後の要素を取得する最も直接的な方法を希望します。

を経由して最初と最後を取得しようとしました。

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

この爆弾は、:first と :last が私の希望的観測であったため（？）

のArrayメソッドは使えません。 querySelectorAll というのは NodeList はArrayではないので

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

この爆弾は NodeList はメソッドを持たないからです。 pop()

(そう、NodeListの上でArrayのメソッドを使うことができるのです。

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

これは動作しますし、今使っているものですが、私が単に見逃しているもっと直接的な何かがあるはずだと考えています。）

次に、以下のように、プレオーダの深さ優先探索によって要素がリストされていることを確認する必要があります。 http://en.wikipedia.org/wiki/Tree_traversal

どのように解決するのですか？

最初と最後の要素にアクセスするために、試してみてください。

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

堅牢性を高めるため、インデックスチェックを追加する。

はい、ノードの順序はpre-order depth-firstです。DOMの document order は次のように定義されています。

一般実体の展開後の文書のXML表現において，各ノードのXML表現の最初の文字が出現する順序に対応する文書内のすべてのノードに，文書順序という順序が定義されている。したがって、文書要素ノードが最初のノードとなる。要素ノードは、子ノードの前に出現する。したがって，文書順は，要素ノードを，その開始タグがXML中に出現する順（実体の展開後）に並べる。要素の属性ノードは、要素の後、その子の前に出現する。属性ノードの相対的な順序は、実装に依存する。