使用核心JavaScript進行多級元素選擇

Question

JavaScript如何實現。選擇某個其他選擇器的基礎上的任何X元素

像。我可以使用jQuery有些事情就像

x = $('#key').children('.left').children('input'); 
// In this example I am using id Selection, Class Selector and Element Selector 

我試圖以這種方式

x = document.getElementById('key') 
      .getElementByClassName('left') 
      .getElementByName('input'); 

做到這一點使用JavaScript這樣做，但我很失敗。我也通過互聯網搜索，但沒有有用的解決方案。但jQuery的工作原理在這種情況下對所有的瀏覽器

Answer 1

使用querySelectorAll：

document.querySelectorAll('#key > .left > input') 

這相當於jQuery的版本$('#key').children('.left').children('input');。

支持：IE8 +。

還要注意的是，你還可以使用getElementsByClassName（IE9 +）和getElementsByName的，但它會不太方便，如果你真的想選擇直接子元素>，而不是所有的孩子。在這種情況下，我會用for循環和children屬性檢查類和標記名稱。

如果你對任何深度元素都好，不僅是直接的孩子，我會建議去getElementsByTagName。