孩子的孩子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)

支持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';
};