ここでは、コードだ配列

Question

に要素の値を変更することができません：

HTML：

<div id="ID1"> 
    <a href="www.google.com">click</a> 
</div> 
<a href="www.yahoo.com">click</a> 

JS：

var element = document.querySelector("a[href^='www.google.com']"); 
console.log(element); // this returns the <a> object 
element = element.parentNode; 
console.log(element); // this returns the <div> object 

は完璧に働きました。しかし、ここでの第二部です：

var elements = document.querySelectorAll("a[href^='www.google.com']"); 
console.log(elements[0]); //this returns <a> object 
elements[0] = elements[0].parentNode; 
console.log(elements[0]); //this returns <a> instead of <div> 

だから、私はelements[0]で値を変更することができませんでした。なぜこれが起こっているのですか？ tempのような変数を使用せずにどのように変更できますか？temp = elements[0]; temp = temp.parentNode; console.log(temp);？

Answer 1

querySelectorAllNodeListはArrayではありません。あなたはそれを変異させる必要がある場合は、さらに配列

var elements = [].slice.call(document.querySelectorAll("a[href^='www.google.com']")) 

elements[0] = elements[0].parentNode; 
console.log(elements[0]); //div 

に変換「面白い」の部分は次のとおりです。読み取り専用の行動はcrossbrowserではありません。

Object.getOwnPropertyDescriptor(document.querySelectorAll('a'), '0') 

クローム UPD ChromeはNodeListのプロパティについて嘘をついています。これは読み込み専用であり、列挙可能です。

// {value: a, writable: true, enumerable: false, configurable: true} 

FF

// { value: <a>, writable: false, enumerable: true, configurable: true } 

IE - 気に？ IEは真実を伝えています。プロパティは書き込み可能です。

// {configurable: true, enumerable: true, value: HTMLAnchorElement {...}, writable: true} 

Answer 2

がdocs他のケースで

ごとなどのように見える、のNodeListは、DOM内の任意 以降の変更は コレクションの内容には影響を与えないという意味、静的なコレクションです。 document.querySelectorAllは静的なNodeListを返します。あなたは今

elements = [].slice.call(elements); 
elements[0] = elements[0].parentNode; 
console.log(elements[0]); //this returns <a> instead of <div> 

を行う場合を除き

不思議なことに、任意のインデックスに新しい値を代入すると、値を変更していない、それはあなたが探している値を返します。