Using getElementById to find child element

Question

In Javascript, I need to select child elements with getElementById() :

#topbarsection li a {}

I've tried this:

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

and this:

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

Answer 1

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

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

Answer 2

Normally, one would use document.querySelectorAll() , it accepts css selectors and returns a list of elements,

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

would return an array of <a> elements which are descendants of <li> elements, in turn descendants of #topbarsection .

You can access the elements as you would the items a normal array,

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

Is the first element found, [1] the second, etc.

Because of this, we can apply changes to each of the elements in turn; let's say we want to set all their target attributes to "_blank" , we can do that using a for loop:

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

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

Ta - da!

There is also the less commonly used document.querySelector , which works similarly to document.getElementById in that it only returns a single element.

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

It returns the first element matched.