Поиск дочернего элемента родительского чистого javascript

Question

Поиск дочернего элемента родительского чистого javascript

каким был бы наиболее эффективный метод, чтобы найти дочерний элемент (с классом или идентификатором) конкретного родительского элемента, используя только чистый javascript. Не jQuery или других фреймворков.

в этом случае, мне нужно найти child1 или child2 на родитель, предполагая, что дерево DOM может иметь несколько child1 или child2 элементы класса в дереве. Я хочу только элементы родитель

<div class="parent">

    <div class="child1">

        <div class="child2">

        </div>

    </div>

</div>

653 3

javascript dom

3 ответов:

Comments

Ничего не найдено.

Rick Viscomi · Accepted Answer · 2013-04-30 17:21:34

The children свойство возвращает массив элементов, например, так:
parent = document.querySelector('.parent');
children = parent.children; // [<div class="child1">]
querySelector - Это относительно новый и не поддерживается в старых браузерах. Есть альтернативы, как document.getElementsByClassName('parent')[0] если вы так хотите.

Edit: теперь, когда я думаю об этом, вы можете просто использовать querySelectorAll получить потомков от parent имея имя класса child1:
children = document.querySelectorAll('.parent .child1');
разница между qS и qSA заключается в том, что последний возвращает все совпадающие элементы селектор, в то время как первый возвращает только первый такой элемент.

csch · Accepted Answer · 2016-09-02 17:33:54

Если у вас уже есть var parent = document.querySelector('.parent'); вы можете сделать это, чтобы расширить область поиска до parentдетей:
parent.querySelector('.child')

Waleed · Accepted Answer · 2018-07-09 17:46:44

просто добавив еще одну идею, вы можете использовать селектор ребенка, чтобы получить немедленных детей
document.querySelectorAll(".parent > .child1");
должен вернуть все непосредственные дочерние элементы с классом .child1, так