Нахождение дочернего элемента родительского чистого JavaScript

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

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

    <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

У вас есть родительский элемент, вы хотите получить все дочерние элементы определенного атрибута 1. получить родительский 2. получить родительское имя узла с помощью parent.nodeName.toLowerCase()преобразования имени узла в нижний регистр, например, DIV будет div 3. для дальнейшей конкретной цели, получить атрибут родительская например parent.getAttribute("id"). это даст вам idродительский 4. Затем используйте, document.QuerySelectorAll(paret.nodeName.toLowerCase()+"#"_parent.getAttribute("id")+" input " ); если вы хотите, чтобы входные дочерние элементы родительского узла

let parent = document.querySelector("div.classnameofthediv")
let parent_node = parent.nodeName.toLowerCase()
let parent_clas_arr = parent.getAttribute("class").split(" ");
let parent_clas_str = '';
  parent_clas_arr.forEach(e=>{
     parent_clas_str +=e+'.';
  })
let parent_class_name = parent_clas_str.substr(0, parent_clas_str.length-1)  //remove the last dot
let allchild = document.querySelectorAll(parent_node+"."+parent_class_name+" input")