document.getElementsByClassName() 配列内の要素の順序質問する

Question

はい、準拠した実装ではそうなります（非準拠の実装は知りませんが）。しかし、戻ってくる配列ではなく、HTMLCollection結果はツリー順序¹（時々文書の順序): トップダウン、深さ優先のトラバーサル — これは、マークアップを見たときにどのように見えるかを言い表す、おしゃれな方法です。 :-)

たとえば、次のドキュメントの場合:

<div id="d1" class="a">
    <div id="d2" class="a">
        <div id="d3" class="a"></div>
    </div>
    <div id="d4" class="a"></div>
</div>
<div id="d5" class="a"></div>

...getElementsByClassName("a")は、確実に d1、d2、d3、d4、d5 の順にリストします。ここで試してください:

for (const el of document.getElementsByClassName("a")) {
    console.log(el.id);
}

<div id="d1" class="a">
    <div id="d2" class="a">
        <div id="d3" class="a"></div>
    </div>
    <div id="d4" class="a"></div>
</div>
<div id="d5" class="a"></div>

その他の注意事項:

このgetElementsByClassNameメソッドは、ライブ HTMLCollectionつまり、要素を追加、削除、または変更すると、既存のコレクションが更新されます。これは、何を行うかによって、便利で強力になる場合もあれば、驚くべき結果になる場合もあります。
関連するメソッドquerySelectorAllは、スナップショット NodeListたとえば、ライブではないHTMLCollection。

例：

const byClassName = document.getElementsByClassName("a");
const bySelector = document.querySelectorAll(".a");
console.log("Before adding another one:");
console.log("byClassName.length = " + byClassName.length);
console.log("bySelector.length = " + bySelector.length);
const div = document.createElement("div");
div.className = "a"
document.body.appendChild(div);
console.log("AFTER adding another one:");
console.log("byClassName.length = " + byClassName.length);
console.log("bySelector.length = " + bySelector.length);

<div id="d1" class="a">
  <div id="d2" class="a">
    <div id="d3" class="a"></div>
  </div>
  <div id="d4" class="a"></div>
</div>
<div id="d5" class="a"></div>

¹ なぜそれがわかるgetElementsByClassName(classNames)のでしょうか？は、「クラス名を持つ要素のリスト classNames、」これはHTMLCollection、 ; を返すと言っている。HTMLCollection、それは「コレクション要素のそしてそれリンクから、「...コレクションは、コレクションのルートをルートとするサブツリーのビューを表し、指定されたフィルターに一致するノードのみが含まれます。ビューは線形です。反対の特定の要件がない限り、コレクション内のノードはツリー順に並べ替えられる必要があります。」getElementsByClassName反対に特定の要件を提供していないため、ツリー順になっています。

Answer 1