如何仅对元素的子元素运行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')