javascript - Unable to change value of an element in array -

here's code:

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); // returns <a> object element = element.parentnode; console.log(element); // returns <div> object 

worked perfect. but, here's second part:

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> 

so, couldn't change value @ elements[0]. why happening? how can change without using temp variable temp = elements[0]; temp = temp.parentnode; console.log(temp);?

queryselectorall returns nodelist not array. if need mutate further convert array

var elements = [].slice.call(document.queryselectorall("a[href^='www.google.com']"))  elements[0] = elements[0].parentnode; console.log(elements[0]); //div 

the "funny" part is: readonly behaviour not crossbrowser.

object.getownpropertydescriptor(document.queryselectorall('a'), '0') 

chrome upd chrome lying nodelist property. readonly , enumerable.

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

ff

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

ie - cares? ie telling truth. properties writable.

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