Question

使用纯JavaScript，我已使用此行返回多个元素的NodeList：

var elements = document.getElementsByClassName('icon-wrapper');

然后，我可以使用这些行中的任何一行来定位该NodeList中的特定索引：

elements[0];
elements[1];
elements[2];

但是当我尝试从NodeList中包含多个对象或循环遍历它们时，只返回一个节点，即最后一个请求的节点。

我尝试将.appendChild应用于类icon-wrapper的所有节点

以下是代码：

＆＃13;

var square = document.createElement('div');
square.style.width = "32px";
square.style.height = "32px";
square.style.zIndex = "-1";
square.style.position = "absolute";
square.style.backgroundColor = "red";
var elements = document.getElementsByClassName('icon-wrapper');
var requiredElement = elements[0, 1, 2];
requiredElement.appendChild(square);

＆＃13;

body {
  background: lightyellow;
}
.icon-wrapper {
  width: 30px;
  height: 30px;
  background: green;
  float: left;
  margin: 2px;
}

＆＃13;

<div class="icon-wrapper">
  <svg></svg>
</div>
<div class="icon-wrapper">
  <svg></svg>
</div>
<div class="icon-wrapper">
  <svg></svg>
</div>

＆＃13;

Answer 1

您的逻辑错误有两种方式：

声明elements[0,1,2]相当于elements[2];它只返回最后一个元素，而不是所有元素。
您正在尝试将相同的ONE广场添加到多个元素中。即使没有错误编号1，它也会最终落在最后一个元素上，因为只有一个方块可以绕过。如果你想在NodeList中的每个元素上有一个正方形，你需要为NodeList中的每个元素创建一个正方形，然后遍历它，在每个元素上附加一个正方形迭代。例如：

转换NodeList to an Array：

var node_list_array = Array.prototype.slice.call(div_list);

并为每个元素添加不同的方块：

node_list_array.forEach(function(elem, index){ 
  elem.appendChild (squares[index]); 
});

Answer 2

var requiredElement = elements[0,1,2];

这不会做你认为它做的事情，无论那是什么。它相当于var requiredElement = elements[2];。

你需要摆脱你的jQuery心态。你可以从不提及“纯JavaScript”开始;所有JavaScript都是纯粹的。 DOM元素不是类似jQuery的神奇组合，你可以同时将类应用于或附加到某些东西或将某些东西附加到所有东西或其他东西上。你必须在getElementsByClassName之类的列表上循环，并逐个元素地执行任何操作。

一般来说，使用getElementsByClassName本身就是代码气味。不要使用类来识别您随后将操作和插入和删除的元素。类是CSS构造，其主要目的是将元素与CSS规则相关联，CSS规则的选择器指定了这些类。

例如，不是在代码中使用费力分配的单个样式创建div，而是尝试使用代码在此处插入它（提示：您只能将其包含在一个位置;如果您插入它在其他地方，它将移动到那里，并从之前的位置移除），只需将它添加到您的HTML，一个类带来所有这些样式。

Answer 3

实现这一目标的方法可能有很多种。简单的方法创建3个不同的方形变量添加。然后使用for循环将它们附加到每个元素。

Answer 4

你想要实现这样的目标吗？退房：

https://jsfiddle.net/cd2gbuc9/3/

即：

1) Get the required elements.
   For each of them in a loop:
     1) Create a square
     2) Append the square to the element

Answer 5

当你使用getElementsByClassName时，结果是“NodeList”。 NodeList是“节点”的数组，节点可以是“元素”或“属性”或“注释”和/或“文本”。你最多检查循环中的noteType，只将elemnt添加到nodeType为1的节点类型元素。

for(var i = 0; i < elements.length; i++)
{
    if(elements[i].nodeType === 1){
       elements[i].appendChild(square);
    }
}

有关详细信息，请参阅此参考：

http://www.w3schools.com/jsref/prop_node_nodetype.asp

Answer 6

首先，Document.getElementsByClassName。如果您在循环期间删除/添加元素，则需要注意这一点，因为它是live HTMLCollection。

var requiredElement = elements[0,1,2];不是从像对象这样的数组访问索引项的方法，我不知道你在哪里有这个想法。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

因此，您需要使用迭代方法迭代类似对象的数组。

您需要为每个appendChild创建一个新的红色框，否则您只需将框从一个地方移动到另一个地方。

用ES6编写的一个例子。

function createARedSquare() {
  const square = document.createElement('div');
  // use CSS for a class when possibe
  square.className = 'redSquare';
  return square;
}

//const slice = Function.prototype.call.bind(Array.prototype.slice);

// Gets a 'live' HTMLCollection and converts to an Array, a fixed node content
function getElementsByClassName(className) {
  // You could use Array#slice here instead of Array.from if < ES6
  return Array.from(document.getElementsByClassName(className));
}

function addRedSquareToEachIconWrapper() {
  getElementsByClassName('icon-wrapper')
    .forEach(iconWrapper => iconWrapper.appendChild(createARedSquare()));
}

addRedSquareToEachIconWrapper();

body {
  background: lightyellow;
}
.icon-wrapper {
  width: 30px;
  height: 30px;
  background: green;
  float: left;
  margin: 2px;
}
.redSquare {
  width: 32px;
  height: 32px;
  background: red;
  z-index: -1;
  position: absolute;
}

<div class="icon-wrapper">
  <svg></svg>
</div>
<div class="icon-wrapper">
  <svg></svg>
</div>
<div class="icon-wrapper">
  <svg></svg>
</div>

如何访问NodeList中的所有元素？

6 个答案: