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

Javascript - How to get all elements and do same thing on each of them

本文关键字：元素 执行 操作 Javascript- 何获取 获取      更新时间：2023-09-26

我想在div（id=room）中获得所有div，并对每个div执行相同的javascript代码。

我认为它应该像这个

通过id room获取元素->将所有div放在里面->对它们做点什么（将每个类更改为"grass"）

或者通过使用循环。

如何做到这一点？

请不要使用jQuery

现代浏览器（IE9+）：

var divs = document.querySelectorAll('#room div');
[].forEach.call(divs, function(div){
  div.className = 'green';
});

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

您想让所有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');

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

使用getElementByID和getElementsByTagName

使用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';
}

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

Js出价

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