使用Core JavaScript进行多级元素选择

Question

如何在JavaScript中实现。选择其他选择器

的任何X元素

像。我可以使用jQuery做这样的事情

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

我尝试以这种方式使用JavaScript

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

但我没有成功。我也通过互联网搜索，但没有有用的解决方案。但是jQuery如何在这个适用于所有浏览器的场景中工作

Answer 1

使用querySelectorAll：

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

这相当于jQuery版本$('#key').children('.left').children('input');。

支持：IE8 +。

另请注意，您还可以使用getElementsByClassName（IE9 +）和getElementsByName，但如果您真的想要选择直接子元素>而不是所有元素，那将会不太方便儿童。在这种情况下，我会使用for循环和children属性检查类和标记名称。

如果您对任何深度元素都没有问题，而且不仅仅指导孩子，我建议您使用getElementsByTagName。