孩子的孩子 Javascript DOM

Question

假设我有一个带有两个子 div 的 div，它们充当未定义数量的导航按钮的列。 比如

<div id='controls'>
<div id='column1'><a id='button1' href=#></a></div>
<div id='column2'><a id='button2' href=#></a></div>
</div>

我现在就是这样

var column1 = document.getElementById('column1').children;
var column2 = document.getElementById('column2').children;
var button1 = document.getElementById('button1');

button1.onclick = function() {
    column1.className = column1.className.replace(new RegExp('\b' + active + '\b'),'');
    column2.className = column2.className.replace(new RegExp('\b' + active + '\b'),'');
    this.className += ' active';
};

由于我对两者都做同样的事情，有没有办法将它组合成类似的东西：

var controls = document.getElementById('controls').children.children;

或

var controls = document.getElementById('controls').children;
var controls = controls.children;

Answer 1

使用document.querySelectorAll()

var controls = document.querySelectorAll('#controls > div');
console.log(controls)

Supports IE8+

---

这里的控件是一个数组，所以你需要迭代它们来改变它的属性

button1.onclick = function () {
    var controls = document.querySelectorAll('#controls > div');
    for (var i = 0; i < controls.length; i++) {
        controls[i].className = controls[i].className.replace(new RegExp('\b' + active + '\b'), '');
    }
    this.className += ' active';
};