javascript - Javascript - 如何获取所有元素并对每个元素执行相同的操作

Question

我想在 DIV(id = room) 中获取所有 DIV，并在每个 DIV 上执行相同的 javascript 代码。

我认为它应该看起来像这样

通过 id 房间获取元素 -> 获取里面的所有 div -> 对它们做一些事情（将每个类更改为“草”）

或使用循环。

怎么做？

请不要使用 jQuery。

Answer 1

现代浏览器（IE9+）：

var divs = document.querySelectorAll('#room div');

[].forEach.call(divs, function(div){
  div.className = 'green';
});

Answer 2

var parent = document.getElementById("room");
var divs = parent.getElementsByTagName('div');
for (i=0; i<divs.length; i++)
{
    divs[i].className="grass";
};

Answer 3

var a = document.getElementById("room").getElementsByTagName("div");

for(i = 0; i < a.length; i++)
{
    a[i].className = "grass";
}

Answer 4

你想把所有的div 都放在里面，还是只是直接的孩子？

这个遍历直接子代。如果要遍历所有内部节点，则需要对其进行递归。

function grassify(nodeId) {

  var node = document.getElementById(nodeId);
  for(var i in node.childNodes) {
    // Do things with node.childNodes[i], for example:
    node.childNodes[i].className = 'grass';
  }
} 

然后只是：

grassify('room');

Answer 5

function myFunction()
{
var a=document.getElementById('room').childNodes;
for (i=0; i<a.length; i++)
  {
  a[i].className="grass";
  };
}

提琴手

Answer 6

var room=document.getElementByID("#room");
   var divs=room.getElementsByTagName("div");
   for(var i=0;i<divs.length;i++){
      doSomething(divs[i]);
}

使用getElementByID和getElementsByTagName

Answer 7

使用 getElementsByTagName

首先获取对容器元素的引用，然后使用 getElementsByTagName 获取所需的元素类型。

见http://jsfiddle.net/aQtTx/

JS：

var targetDiv = document.getElementById("div1");
var nestedDivs = document.getElementsByTagName("div");
for(var divIndex = 0; divIndex < nestedDivs.length; divIndex++)
{
    nestedDivs[divIndex].style.backgroundColor = 'red';
}