. Каким будет наиболее эффективным способом найти дочерний элемент (с классом или идентификатором) определенного родительского элемента, используя только чистый javascript. Нет jQuery или других фреймворков.
В этом случае мне нужно найти child1 или child2 родителя, предполагая, что дерево DOM может иметь несколько child1 или child2 в дереве. Мне нужны только элементы parent
<div class="parent">
<div class="child1">
<div class="child2">
</div>
</div>
</div>
Свойство children возвращает массив элементов, например:
parent = document.querySelector('.parent');
children = parent.children; // [<div class="child1">]
Существуют альтернативы querySelector, например, document.getElementsByClassName('parent')[0], если хотите.
Изменение: Теперь, когда я думаю об этом, вы можете просто использовать querySelectorAll, чтобы получить потомков parent с именем класса child1:
children = document.querySelectorAll('.parent .child1');
Разница между qS и qSA заключается в том, что последний возвращает все элементы, соответствующие селектору, тогда как первый возвращает только первый такой элемент.
Если у вас уже есть var parent = document.querySelector('.parent');, вы можете сделать это для охвата поиска parent детьми:
parent.querySelector('.child')
Просто добавив еще одну идею, вы можете использовать дочерний селектор, чтобы получить непосредственных детей
document.querySelectorAll(".parent > .child1");
должен вернуть всех ближайших детей с классом .child1
я написал маленький отрывок, чтобы пройти через DOM, чтобы найти первый соответствующий parentNode.
Надеюсь, это когда-нибудь кому-нибудь поможет.
(/¯◡ ‿ ◡) ⊃━ ☆ ﾟ. * ･｡ ﾟ,
function getFirstParentMatch(element, selector) {
if (!element) {return element};
element.matches(selector) || (element = (element.nodeName.toLowerCase() === 'html' ? false : getFirstParent(element.parentNode, selector)));
return element;
}