Question

这两个例子都是节点列表，但只有第一个工作。

按预期工作：

var apple = document.getElementById('apple');
var nodeList = document.getElementsByTagName('li'); // Line of concern

var array = [];

for(var i = 0; i < nodeList.length; i++) {
  array[i] = nodeList[i];
}

for(var i = 0; i < array.length; i++) {
  array[i].style.display = 'none';
}

不起作用（错误是：“未捕获的TypeError：无法设置未定义的属性'显示'）：

var apple = document.getElementById('apple');
var nodeList = apple.parentNode.childNodes; // Line of concern

var array = [];

for(var i = 0; i < nodeList.length; i++) {
  array[i] = nodeList[i];
}

for(var i = 0; i < array.length; i++) {
  array[i].style.display = 'none';
}

因此，如果两个变量“nodeList”都是实际的节点列表，那么为什么我不能在后一个例子中设置属性，也不能设置类似的东西。

另外，我如何解决后者的问题？

请不要jQuery这个问题。

谢谢。

Answer 1

不两种不同类型的NodeLists。

apple.parentNode.childNodes

返回一个NodeList，但它包含 ALL 节点 - 包括new line＆amp; HTML上元素之间的空格字符。所以我无法应用我想要的属性的原因是因为一些节点是非元素。

代替那个答案，就是使用仅元素选择方法;在这种情况下： parentElement ＆amp;的的子：

apple.parentElement.children

请参阅节点上的Mozilla's Developer页面，以及更多节点方法的左侧列。

两种不同类型的NodeLists？无法将一个NodeList上的属性设置为Array

1 个答案: