Поиск дочернего элемента по классу в JavaScript и YUI2

Быстрый ответ

Если вам нужно найти дочерний элемент с определённым именем класса, примените метод querySelector('.child-class') к родительскому элементу. Он вернёт вам первый элемент, который соответствует этому запросу:

let child = document.getElementById('parent').querySelector('.child-class');

Для того чтобы найти все дочерние элементы с заданным именем класса, воспользуйтесь методом querySelectorAll:

let children = document.getElementById('parent').querySelectorAll('.child-class');

Теперь в переменной child будет храниться первый найденный элемент, а в children — коллекция всех подходящих элементов.

Использование ':scope' для выбора только прямых потомков

С помощью псевдокласса :scope и комбинатора > можно упростить работу с глубокими DOM деревьями, выбирая только прямых потомков:

let directChildren = parentElement.querySelectorAll(':scope > .child-class');

Псевдокласс :scope обозначает контекст, из которого был вызван метод, и позволяет выбрать только прямых потомков.

Повышение производительности и совместимости

Совет профессионалов: если требуется получить только первый дочерний элемент, лучше использовать querySelector, а не querySelectorAll, чтобы избежать безнужного извлечения всех элементов.

Вопрос совместимости с браузерами также важен. Методы querySelector и querySelectorAll работают начиная с IE9. В случае необходимости работы с устаревшими браузерами, можно прибегнуть к альтернативным методам, например, перебору childNodes и проверке className.

Создание собственной функции для обхода DOM

Если стандартные методы вас не устраивают, особенно когда требуется широкая поддержка браузеров или детальный контроль, можно составить собственную функцию для обхода DOM:

// Велик дар рекурсии для обхода DOM элементов!
function findElementsByClassName(rootElement, className) {
  var foundElements = [];
  var elementsToSearch = [rootElement];

  while (elementsToSearch.length > 0) {
    var currentElement = elementsToSearch.shift();
    if (currentElement.classList.contains(className)) {
      foundElements.push(currentElement);
    }
    Array.prototype.push.apply(elementsToSearch, currentElement.children);
  }

  return foundElements;
}

let foundChildren = findElementsByClassName(document.getElementById('parent'), 'child-class');

Эта функция прекрасно справится с поиском в вложенных структурах и обеспечит совместимость с различными браузерами.

Визуализация

Представьте себе цифровую библиотеку (<div>) с рядами полок (<div> с классом .shelf), на каждой из которых размещены книжные коллекции (<div> с классом .book). Ваша задача — найти все книги о приключениях. Вот пример кода:

let library = document.querySelector('.digital-library');
let adventureShelf = library.querySelector('.shelf.adventure');
let adventureBooks = adventureShelf.querySelectorAll('.book');

Наглядное представление этой структуры выглядит так:

🏛️📚 Библиотека (`.digital-library`)
  ├ 📚 Полка Нон-Фикшн (`.shelf.non-fiction`)
  ├ 📚 Полка Романтика (`.shelf.romance`)
  ├ 📚 **Полка Приключений** (`.shelf.adventure`)
  │   ├ **Книга о Приключениях 1** (`.book`)
  │   ├ **Книга о Приключениях 2** (`.book`)
  │   └ **Книга о Приключениях 3** (`.book`)
  └ 📚 Полка Научной Фантастики (`.shelf.scifi`)

Таким образом, все приключенческие романы на ".shelf.adventure" могут быть обнаружены благодаря вашему искусному коду!

Работа с элементами, содержащими несколько классов, и раннее завершение поиска

Элементы могут содержать несколько классов, и для выбора нужного элемента требуется точность. Вот функция, которая этим занимается:

function getByClass(targetClass, parentElement = document) {
  var children = parentElement.children, element;
  
  for (var i = 0; i < children.length; i++) {
    if (children[i].classList.contains(targetClass)) {
      element = children[i];
      break; // Нужный элемент найден, поиск можно заканчивать.
    }
  }
  
  return element;
}

Раннее завершение: когда цель достигнута, продолжать поиск необязательно — так можно избежать wasteful processing и экономить время.

Продвинутый поиск: слежение за динамически изменяющимися элементами DOM

В динамичных веб-приложениях элементы DOM постоянно могут меняться. MutationObserver позволяет отслеживать эти изменения и вовремя на них реагировать:

let observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    if (mutation.type === 'childList') {
      // Элементы были добавлены или удалены. Пора корректно адаптировать методы поиска.
    }
  });
});

observer.observe(document.getElementById('parent'), { childList: true });

Полезные материалы

1. Документ: метод querySelector() – Веб API | MDN — подробная инструкция по использованию метода querySelector.
2. ParentNode.querySelector() – Веб API | MDN — описание применения querySelector в контексте родительского узла.
3. Документ: метод querySelectorAll() – Веб API | MDN — правильное применение querySelectorAll для выбора нескольких элементов.
4. MutationObserver – Веб API | MDN — урок по наблюдению за изменениями в DOM с использованием MutationObserver.