JavaScript中的立即嵌套DOM声明

Question

如何在JavaScript中而不是使用jQuery获得嵌套的DOM元素？ 例：

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

我想将此jQuery选择器$('.nav > li')为javascript。 我怎样才能做到这一点？

Answer 1

您有一个非常不错的函数，名为document.querySelectorAll() ，可以使用CSS查询选择元素。

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

如果您打算多次使用它，那么您也可以使用var，这样就可以像使用jQuery

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

Answer 2

只是为了补充建议querySelectorAll的答案，这是使用旧式DOM操作将如何实现的方法。

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]);
    }
  }
}

也可以作为说明性编程为什么更适合此类任务的一个很好的例子。