JavaScript DOM: как получить первый дочерний узел определенного типа

Чтобы получить первый дочерний узел определенного типа в JavaScript, вы можете использовать различные методы в зависимости от структуры вашей DOM (объектной модели документа). Вот несколько подходов, которые вы можете использовать:

  1. Использование querySelector:

    const firstChildOfType = document.querySelector('parentSelector > childSelector');

    Замените 'parentSelector'селектором родительского элемента и 'childSelector'селектором определенного типа дочернего элемента, который вы хотите получить. Этот метод возвращает первый соответствующий элемент.

  2. Использование getElementsByTagName:

    const parentElement = document.querySelector('parentSelector');
    const childElements = parentElement.getElementsByTagName('elementType');
    const firstChildOfType = childElements[0];

    Замените 'parentSelector'селектором родительского элемента и 'elementType'типом дочернего элемента, который вы хотите получить. Этот метод возвращает действующую HTMLCollectionвсех элементов с указанным именем тега, и вы можете получить доступ к первому элементу, используя индекс [0].

  3. Использование свойства children:

    const parentElement = document.querySelector('parentSelector');
    const firstChildOfType = [...parentElement.children].find(child => child.matches('childSelector'));

    Замените 'parentSelector'селектором родительского элемента и 'childSelector'селектором определенного типа дочернего элемента, который вы хотите получить. Этот метод преобразует HTMLCollection, возвращаемый children, в массив с помощью оператора расширения ([...parentElement.children]). Затем вы можете использовать метод find, чтобы найти первый дочерний элемент, соответствующий данному селектору.

После того как вы извлекли первый дочерний узел определенного типа, вы можете выполнять дальнейшие операции или получать доступ к его свойствам по мере необходимости.