web-dev-qa-db-ja.com

querySelector：最初の要素と最後の要素を取得する方法は？ domで使用される走査順序は何ですか？

divには、属性_move_id_を持つ要素（必ずしも第2世代ではない）があります。

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

最初と最後を取得しようとしました：

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

この爆弾は：firstと：lastが私の側で希望的観測をしたからです（？）

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 に従って事前の深さ優先探索によってリストされていることを確認する必要があります

javascriptdomhtml5
49
cc young

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

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

堅牢性のために、インデックスチェックを追加します。

はい、ノードの順序は深さ優先順です。 DOMのdocument order と定義されている、

ドキュメント内のすべてのノードで定義された順序、ドキュメントの順序があり、各ノードのXML表現の最初の文字が一般エンティティの展開後のドキュメントのXML表現で発生する順序に対応します。したがって、ドキュメント要素ノードは最初のノードになります。要素ノードは、子の前に発生します。したがって、ドキュメントの順序は、XMLでの開始タグの出現順に要素ノードを順序付けます（エンティティの拡張後）。要素の属性ノードは、要素の後、その子の前に発生します。属性ノードの相対的な順序は実装依存です。

70
Anurag

:lastはcss仕様の一部ではありません。これはjQuery固有です。

あなたが探している必要があります last-child

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

last入力要素を取得する例：

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

5
g.breeze