javascript 如何仅在元素的子元素上运行 getElementsByTagName？

How to run getElementsByTagName on children of an element only?

提问by frequent

I'm having trouble getting a selector to work properly.

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

I have this HTML:

我有这个 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>

and I'm trying to select the divtags, which are children of ui-controlgroup-controls- which means excluding whats inside the form.

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

This is what I'm trying:

这就是我正在尝试的：

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

However this does not work, because the div inside the form ends up in the selection.

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

Question:
How can I select the elements correctly when I don't want to use jQuery?

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

采纳答案by Asad Saeeduddin

One way to do this is to iterate over your resulting node list and check the parent:

一种方法是迭代生成的节点列表并检查父节点：

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]; 
});

Here is a demonstration of this approach: http://jsfiddle.net/WLhY2/

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

A simpler (albeit less efficient) approach is to use querySelectorAllto retrieve the relevant nodes using a selector expression:

一种更简单（尽管效率较低）的方法是使用querySelectorAll选择器表达式来检索相关节点：

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

回答by ZER0

For the browser that supports querySelectorAll:

对于支持querySelectorAll的浏览器：

var divs = el.children[0].querySelectorAll("div");

For the browsers that supports the usage of sliceon NodeList (e.g. not IE, at least not IE < 9):

对于支持在 NodeList 上使用slice的浏览器（例如不是 IE，至少不是 IE < 9）：

var slice = Function.call.bind(Array.prototype.slice);

var divs = slice(el.children[0].children).filter(function(node) { 
               return node.tagName === "DIV"
           });

For the browsers that doesn't support neither:

对于既不支持也不支持的浏览器：

var nodes = el.children[0].children;
var divs = [];

for (var l = nodes.length, node; node = nodes[--l];) {
  if (node.tagName === "DIV")
    divs.push(node);
}

回答by ZER0

In most browsers, you can do:

在大多数浏览器中，您可以执行以下操作：

el.querySelectorAll(".ui-controlgroup-controls > div")

---

---

But this could give false positives if there are more deeply nested ".ui-controlgroup-controls"that you want to avoid.

但是，如果".ui-controlgroup-controls"您想避免更深的嵌套，这可能会导致误报。

If that's the case, just iterate the .children, and build a collection of nested divs.

如果是这种情况，只需迭代.children, 并构建嵌套 div 的集合。

var divs = [];

for (var i = 0, len = el.children.length; i < len; i++) {
    if (el.children[i].classname === "ui-controlgroup-controls") {
        for (var j = 0, lenj = el.children[i].children.length; j <, lenj; j++) {
            if (el.children[i].children[j].nodeName === "DIV") {
                divs.push(el.children[i].children[j])
            }
        }
    }
}

---

---

If it's known that you have only one ui-controlgroup-controlselement, then you can get rid of the outer loop, and just use children[0].

如果已知您只有一个ui-controlgroup-controls元素，那么您可以摆脱外部循环，而只需使用children[0].

var divs = [];

for (var j = 0, lenj = el.children[0].children.length; j <, lenj; j++) 
    if (el.children[0].children[j].nodeName === "DIV") 
        divs.push(el.children[o].children[j])

回答by themefield

<your-element>.querySelectorAll(":scope > div");

:scopeis a pseudo-class representing the parent element. No support in IE, but there is a shim.

:scope是一个表示父元素的伪类。IE 不支持，但有一个shim。