Чтобы получить первый дочерний узел определенного типа в JavaScript, вы можете использовать различные методы в зависимости от структуры вашей DOM (объектной модели документа). Вот несколько подходов, которые вы можете использовать:
-
Использование
querySelector
:const firstChildOfType = document.querySelector('parentSelector > childSelector');
Замените
'parentSelector'
селектором родительского элемента и'childSelector'
селектором определенного типа дочернего элемента, который вы хотите получить. Этот метод возвращает первый соответствующий элемент. -
Использование
getElementsByTagName
:const parentElement = document.querySelector('parentSelector'); const childElements = parentElement.getElementsByTagName('elementType'); const firstChildOfType = childElements[0];
Замените
'parentSelector'
селектором родительского элемента и'elementType'
типом дочернего элемента, который вы хотите получить. Этот метод возвращает действующуюHTMLCollection
всех элементов с указанным именем тега, и вы можете получить доступ к первому элементу, используя индекс[0]
. -
Использование свойства
children
:const parentElement = document.querySelector('parentSelector'); const firstChildOfType = [...parentElement.children].find(child => child.matches('childSelector'));
Замените
'parentSelector'
селектором родительского элемента и'childSelector'
селектором определенного типа дочернего элемента, который вы хотите получить. Этот метод преобразуетHTMLCollection
, возвращаемыйchildren
, в массив с помощью оператора расширения ([...parentElement.children]
). Затем вы можете использовать методfind
, чтобы найти первый дочерний элемент, соответствующий данному селектору.
После того как вы извлекли первый дочерний узел определенного типа, вы можете выполнять дальнейшие операции или получать доступ к его свойствам по мере необходимости.