javascript - 如何仅对元素的子元素运行 getElementsByTagName？

Question

我无法让选择器正常工作。

我有这个 HTML:

<div.wrapper>
    <div.ui-controlgroup-controls>
        <form>
            <div.ui-btn></div>
        </form>
        <div.ui-btn></div>
        <div.ui-btn></div>
        <div.ui-btn></div>
        <div.ui-btn></div>
    </div>
</div>

我正在尝试选择 div 标签，它们是 ui-controlgroup-controls 的子标签 - 这意味着排除表单中的内容。

这就是我正在尝试的:

// el is my div.wrapper element
el.children[0].getElementsByTagName("div");

但是这不起作用，因为表单中的 div 最终出现在选择中。

问题:
当我不想使用 jQuery 时，如何正确选择元素？

Answer 1

执行此操作的一种方法是遍历生成的节点列表并检查父节点:

var nodes = el.children[0].getElementsByTagName("div");
nodes = Array.prototype.slice.call(nodes);
nodes = nodes.filter(function(v, i){
    return v.parentElement === el.children[0]; 
});

下面是这种方法的演示:http://jsfiddle.net/WLhY2/

一种更简单(尽管效率较低)的方法是使用 querySelectorAll 通过选择器表达式检索相关节点:

var divs = document.querySelectorAll('div.ui-controlgroup-controls > div')