なぜquerySelectorAllはライブDOM要素を返すのですか？

Question

querySelectorAll doesn't return live DOM elements.ただし、私が何かを紛失していない限り、これはすべてのプロパティでは当てはまりません。

質問：.innerHTMLプロパティでquerySelectorAllをテストしました。ドキュメントの作成時に存在した番号5を返す代わりに、Javascriptで挿入されたFIVEという単語が返されました。どうしてこれなの？

対照として、私は.length特性を有するquerySelectorAllを試験し、予想通りに番号10を返した。

私はquerySelectorAllについての重要な概念を見逃しているに違いありませんが、私はそれが何であるか分かりません。私のコードは以下の通りです。本当にありがとう！

var largeContainer = document.querySelectorAll(".box_1"); 
 
\t \t 
 
document.getElementsByClassName("box_1")[9].className = "box_2"; \t \t \t \t 
 
console.log(largeContainer.length); 
 
\t \t 
 
document.getElementsByClassName("box_1")[5].innerHTML = "FIVE"; 
 
console.log(largeContainer[5].innerHTML);

.box_1 { 
 
    height: 100px; 
 
    margin: 0 0 16px 0; 
 
    font-size: 2rem; 
 
    color: white; 
 
    background-color: red; 
 
} 
 

 
.box_2 { 
 
    height: 100px; 
 
    margin: 0 0 16px 0; 
 
    font-size: 2rem; 
 
    color: white; 
 
    background-color: blue; 
 
}

<div class="box_1">0</div> 
 
<div class="box_1">1</div> 
 
<div class="box_1">2</div> 
 
<div class="box_1">3</div> 
 
<div class="box_1">4</div> 
 
<div class="box_1">5</div> 
 
<div class="box_1">6</div> 
 
<div class="box_1">7</div> 
 
<div class="box_1">8</div> 
 
<div class="box_1">9</div>

Answer 1

にある要素に設定された後

console.log(largeContainer[5].innerHTML); 

にある要素の.innerHTMLを取得し、あなたはそれが返されることを正しいです静的なNodeList、つまりインストール時に選択した要素のセットは変更されません。

ただし、NodeListのこれらのElementsは、既存のDOM要素（生存ノード）への参照です。したがって、これらの要素への変更は、その後のアクセスに反映されます。

Answer 2

まあ、var largeContainer = document.querySelectorAll(".box_1");はクラスbox_1を持つすべてのDOM要素を選択します。後でクラスを変更した場合でも、largeContainerはそれらのDOM要素を参照しています。一度それらを取得するために使用されたセレクタではありません。

Answer 3

代わりの文書 が、それは JavaScriptを使用して挿入された単語FIVEを返さ作成されたときに存在した数5を返します。どうしてこれなの？

質問でコード.innerHTMLがdocumentationを1として

document.getElementsByClassName("box_1")[5].innerHTML = "FIVE";