☰

querySelector で最初の要素と最後の要素を取得するにはどうすればよいでしょうか? DOM ではどのようなトラバーサル順序が使用されますか? 質問する

tag-icon • tag-icon javascript dom html
querySelector で最初の要素と最後の要素を取得するにはどうすればよいでしょうか? DOM ではどのようなトラバーサル順序が使用されますか? 質問する

div 内に、属性を持つ要素 (必ずしも第 2 世代である必要はありません) がありますmove_id。

まず、セットの最初と最後の要素を取得する最も直接的な方法が欲しいです

最初と最後を次の方法で取得しようとしました:

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

これは失敗です。:first と :last は私の希望的観測だったからです (?)

は配列ではないquerySelectorAllため、 の配列メソッドは使用できません。NodeList

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

NodeListこれはメソッドがないので失敗ですpop()

(はい、NodeList 上で配列メソッドを使用することもできます。

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

これは機能し、現在使用しているものですが、私が見逃しているもっと直接的なものがあるはずだと考えています)

次に、要素が事前順序の深さ優先探索によってリストされていることを確認する必要があります。http://en.wikipedia.org/wiki/ツリートラバーサル

ベストアンサー1

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

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

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

はい、ノードの順序は深さ優先です。DOMはdocument order次のように定義されます。

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

おすすめ記事