无法更改数组中元素的值

时间:2016-07-11 12:26:07

标签: javascript html arrays element

以下是代码:

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]的值。为什么会这样?如何在不使用temptemp = elements[0]; temp = temp.parentNode; console.log(temp);变量的情况下更改它?

2 个答案:

答案 0 :(得分:2)

querySelectorAll返回NodeList而不是Array。如果你需要改变它进一步将其转换为数组

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

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

&#34;搞笑&#34;部分是:readonly行为不是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}

答案 1 :(得分: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>

现在,它返回您要查找的值。