select要素を配列に変換すると、子要素の配列が返されるのはなぜですか？

Question

querySelectorAllの代わりに私が偶然にquerySelectorを使用したときに、面白いものが見つかりました。私は通常、静的ノードリストをクエリの直後の配列に変換します。しかしquerySelectorはNodeListではなく最初に一致するノードを返すので、私のスクリプトはselectノードを配列に変換しようとしました。空の配列を返す代わりに、select要素の子を返します。

select要素を配列に変換すると、子ノードが返されるのはなぜですか？これはdivのような他の要素では動作しません：

var selectParent = document.querySelector('.selectParent'); 
 
var selectArray = Array.from(selectParent); 
 
console.log(selectArray); 
 

 
var divParent = document.querySelector('.divParent'); 
 
var divArray = Array.from(divParent); 
 
console.log(divArray);

<select class="selectParent"> 
 
    <option>Option 1</option> 
 
    <option>Option 2</option> 
 
</select> 
 

 
<div class="divParent"> 
 
    <div>Div 1</div> 
 
    <div>Div 2</div> 
 
</div>

Answer 1

それは主に歴史compatibiiltyことです。 HTMLSelectElementは、それがあることが必要である二つの重要なものを持ってい配列のような：

• length
• インデックススタイルのアクセス

...と、これら二つのものがそのオプションに関連しています lengthボックス内の option要素の数であり、 [0], [1]などは、これらの要素にアクセスします。 option要素。上記のリンクから

キー引用符は、以下のとおりです。

optionsコレクションもHTMLSelectElementオブジェクト上でミラーリングされます。サポートされているプロパティインデックスは、その瞬間にoptions属性によって返されたオブジェクトによってサポートされているインデックスです。

と

length IDL属性はoptionsコレクションによって表されるノードの数を返さなければなりません...