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

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

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

<div class="parent">
    <div class="child1">
        <div class="child2">
        </div>
    </div>
</div>

Ответы

Ответ 1

Свойство 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 заключается в том, что последний возвращает все элементы, соответствующие селектору, тогда как первый возвращает только первый такой элемент.

Ответ 2

Если у вас уже есть var parent = document.querySelector('.parent');, вы можете сделать это для охвата поиска parent детьми:

parent.querySelector('.child')

Ответ 3

Просто добавив еще одну идею, вы можете использовать дочерний селектор, чтобы получить непосредственных детей

document.querySelectorAll(".parent > .child1");

должен вернуть всех ближайших детей с классом .child1

Ответ 4

я написал маленький отрывок, чтобы пройти через 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;    
}