JavaScript中立即嵌套的DOM聲明

Question

如何在javascript中獲取嵌套的DOM元素而不是使用jQuery？ 例子：

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

我想這個jQuery選擇$('.nav > li')轉換爲JavaScript。我怎樣才能做到這一點？

Answer 1

你有一個非常好的函數document.querySelectorAll()可以選擇元素與CSS查詢。

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

如果你打算使用它不止一次，你也可以使用一個變種，因此會覺得使用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]); 
    } 
    } 
} 

也可以作爲聲明式編程更適合這類任務的一個很好的例子。