如何使用纯Javascript获取DIV内的所有ID

Question

我希望一次性获取某个Div内所有元素的ID，并更改它们的类名。例如：

<div id = "container">
    <div id = "alot"></div>
    <div id = "of"></div>
    <div id = "random"></div>
    <div id = "ids"></div>
</div>

<script>
    var everyId = //all of the ids in #container. but how ?
    document.getElementById( everyId ).className = "anything";
</script>

我看到有使用库的解决方案，但是只用纯JavaScript是否可行？

- user4330208

---

循环遍历它们并获取.id？ - Shomz

Answer 1

尝试以下内容：

var ids = [];
var children = document.getElementById("container").children; //get container element children.
for (var i = 0, len = children.length ; i < len; i++) {
    children[i].className = 'new-class'; //change child class name.
    ids.push(children[i].id); //get child id.
}

console.log(ids);

- ianaya89

Answer 2

利用 document.querySelectorAll() 和循环可以实现您想要的功能：

var everyChild = document.querySelectorAll("#container div");
for (var i = 0; i<everyChild.length; i++) {
    everyChild[i].classList.add("anything");
}

JSFiddle

- esqew

---

是的，但为什么我不能使用您的JSFiddle删除类名？http://jsfiddle.net/vzn7bwww/1/ - user4330208

你的方法中存在语法错误，调用.replace()并不会设置值：你需要单独设置变量。更新后的JSFiddle。你也可以使用classList的remove()方法。 - esqew

Answer 3

您可以使用querySelectorAll来选择指定父元素内的子元素：

var a = document.querySelectorAll('#container > div'); // get all children within container
console.log(a);
for (var i = 0; i<a.length; i++){ // loop over the elements
    console.log(a[i].id);  //  get the ids
    a[i].className = 'newClass';  // change the class names
}

- baao

Answer 4

你可以利用 querySelectorAll 提供一个选择器来获取你感兴趣的元素。

var c = document.querySelectorAll("#container > div");
console.log(c);  // array of all children div below #container

- Anthony Forloney