Immediate nested DOM declaration in javascript

Question

How can I get a nested DOM element in javascript instead of using jQuery? Example:

$('#id') = document.getElementById('id');

I would like to convert this jQuery selector $('.nav > li') to javascript. How can I do that?

Answer 1

You have a really nice function called document.querySelectorAll() which can select elements with css queries.

document.querySelectorAll('.nav > li');

If you plan to use it more than once, you can also use a var so it'll feel like using jQuery

var _ = document.querySelectorAll.bind(document)
var menuItems = _('.nav > li');

Answer 2

Just to complement the answers suggesting querySelectorAll , here's how you would achieve that with old school DOM operations.

var selected = [];

// get all elements that have the class 'nav' (.nav)
var navs = document.getElementsByClassName('nav');

var i, j, children;

// iterate over each nav and get a list of their direct children (.nav >)
for(i = 0; i < navs.length; i++) {
  children = navs[i].children;

  // iterate over the children and select if the tag is li (.nav > li)
  for(j = 0; j < children.length; j++) {
    if(children[j].tagName === 'LI') {
      selected.push(children[j]);
    }
  }
}

Also serves as a good example of why declarative programming is better suited to this kind of task.