Question

我需要访问DOM树并获取当前元素下方1级的元素。

阅读以下代码：

<div id="node">
    <div id="a">
        <div id="aa">
            <div id="ab">
                <div id="aba"></div>
            </div>
        </div>
    </div>
    <div id="b">
        <div id="ba">
            <div id="bb">
                <div id="bba"></div>
            </div>
        </div>
    </div>
    <div id="c">
        <div id="ca">
            <div id="cb">
                <div id="cba"></div>
            </div>
        </div>
    </div>
</div>

我想在“节点”下获得3个元素“a”，“b”，“c”。我该怎么办？

var nodes = node.getElementsByTagName（“div”）＆lt; ----我得到所有的div但不是我需要的3个div。

var nodes = node.childNodes; ＆lt; ----在IE中工作，但FF包含文本节点

有谁知道如何解决这个问题？

Answer 1

您可以使用排除所有非元素节点的函数：

function getChildNodes(node) {
    var children = new Array();
    for(var child in node.childNodes) {
        if(node.childNodes[child].nodeType == 1) {
            children.push(child);
        }
    }
    return children;
}

Answer 2

我强烈建议您查看JQuery。您希望在纯Javascript中执行的任务很简单，但如果您正在进行任何其他DOM遍历，JQuery将为您节省无数个小时的挫败感。不仅如此，它适用于所有浏览器，并且具有非常好的“文档就绪”方法。

使用JQuery解决了您的问题：

$(document).ready(function() {
    var children = $("#node").children();
});

它查找id为“node”的任何元素然后返回其子元素。在这种情况下，children是一个JQuery集合，可以使用for循环进行迭代。另外，您可以使用each（）命令迭代它们。

Answer 3

这比你想象的要简单：

var nodes = node.querySelector("node > div");

Answer 4

试试这个（迟到的答案，但对其他人有用）：

var list;
list=document.getElementById("node").querySelectorAll("#node>div");

Answer 5

我认为node.childNodes是正确的起点。您可以（使其也适用于FF），测试您获得的所有子节点的nodeName（可能还有nodeType），以跳过文本节点。

另外，您可能会看一些像prototype这样的javascript库，它提供了许多有用的功能。

Answer 6

我已经添加了一些文字，因此我们可以看到它正在运行，并且会添加添加了＃14的JavaScript！＆＃34;到底部每个div的底部：

＆＃13;

var cDiv = document.querySelectorAll('body > div > div'), i;
for (i = 0; i < cDiv.length; i++)
{
	cDiv[i].appendChild(document.createTextNode('added!'));
}

＆＃13;

<div id="node">
    <div id="a">a
        <div id="aa">aa
            <div id="ab">ab
                <div id="aba">aba</div>
            </div>
        </div>
    </div>
    <div id="b">b
        <div id="ba">ba
            <div id="bb">bb
                <div id="bba">bba</div>
            </div>
        </div>
    </div>
    <div id="c">c
        <div id="ca">ca
            <div id="cb">cb
                <div id="cba">cba</div>
            </div>
        </div>
    </div>
</div>

＆＃13;

Answer 7

Universal selectors可以解决问题：

var subNodes = document.querySelectorAll("#node > *");

查询部分：

#node是唯一的容器选择器

>下一个slector应该仅应用于儿童

*通用选择器，它匹配每个标签，但不匹配文本

Can I use universal selector

Answer 8

在我看来，最简单的方法是在中添加一个类名第一级子节点：

<div id="node">
    <div id="a" class="level_1">
        <div id="aa">
            <div id="ab">
                <div id="aba"></div>
            </div>
        </div>
    </div>
    <div id="b" class="level_1">
        <div id="ba">
            <div id="bb">
                <div id="bba"></div>
            </div>
        </div>
    </div>
    <div id="c" class="level_1">
        <div id="ca">
            <div id="cb">
                <div id="cba"></div>
            </div>
        </div>
    </div>
</div>

然后使用方法getElementsByClassName，所以在这种情况下：

document.getElementById('node').getElementsByClassName('level_1');

通过javascript获取比当前元素低1级的元素

8 个答案: