Получить элементы всего на 1 уровень ниже текущего элемента с помощью JavaScript

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 node = node.getElementsByTagName ("div") <---- Я получаю все div, но не 3 необходимых мне div. </p>

var node = node.childNodes; <---- работает в IE, но FF содержит текстовый узел </p>

Кто-нибудь знает, как решить проблему?

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

Он ищет любой элемент с идентификатором "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

Я добавил некоторый текст, чтобы мы могли видеть, что он работает, и JavaScript, который добавит «добавил!» к нижней части каждого из div у основания:

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

<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>

Answer 6

На мой взгляд, самый простой способ сделать это - добавить имя класса к дочерние узлы первого уровня:

<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');

Answer 7

Я думаю, что node.childNodes - правильное место для начала. Вы можете (чтобы он работал и с FF), проверить nodeName (и, возможно, nodeType) всех дочерних узлов, которые вы получаете, чтобы пропустить текстовые узлы.

Также вы можете взглянуть на некоторую библиотеку JavaScript, такую ​​как prototype , которая предоставляет множество полезных функций.