使用getElementById查找子元素

Question

在Javascript中，我需要使用getElementById()选择子元素：

#topbarsection li a {}

我已经试过了：

topbarsection = document.getElementById('topbarsection>li>a');

和这个：

topbarsection = document.getElementById('topbarsection li a');

Answer 1

您应该将querySelectorAll用于此类事情：

document.querySelectorAll('#topbarsection > li > a');

Answer 2

通常，将使用document.querySelectorAll() ，它接受css选择器并返回元素列表，

document.querySelectorAll('#topbarsection li a');

将返回的数组<a>元件，其后代的<li>元素，在转弯后代#topbarsection 。

您可以像访问普通数组一样访问元素，

document.querySelectorAll('#topbarsection li a')[0]

是找到的第一个元素， [1]是第二个，依此类推。

因此，我们可以依次将更改应用于每个元素。 假设我们要将所有target属性设置为"_blank" ，我们可以使用for循环来实现：

var elems = document.querySelectorAll('#topbarsection li a');

for (var i = 0, l = elems.length; i < l; i++) {
    elems[i].setAttribute("target", "_blank");
}

-！

还有一个不太常用的document.querySelector ，它与document.getElementById相似，只返回一个元素。

document.querySelector('.header') === document.querySelectorAll('.header')[0]

它返回匹配的第一个元素。