Как выбрать DOM элементы в Java Script с помощью querySelector()

Выбор селекторов в Java Script существенно улучшился за счет появления функции querySelector(), которая очень похожа на jQuery аналог. С ее помощью теперь мы сможем легко выбирать селекторы по классу, идентификатору, названию тегов и даже атрибутов.

С появлением querySelector() синтаксис Java Script в ваших скриптах может значительно упроститься. Ранее я писал о том, как с помощью пяти разных методов можно делать выборку тех или иных элементов. Теперь же querySelector() объединяет их всех в одно целое.

Выбор любого элементов в Java Script данным методом делится на два направления.

1. Синтаксис: document.querySelector('селектор') - позволяет выбирать первый найденный элемент.
2. Синтаксис: document.querySelectorAll('селектор') - ищет все прописанные селекторы и записывает их в массив.

В зависимости от нужд скрипта вы можете использовать тот или иной скрипт.

Примеры:
document.querySelector('[name=ex5]') //по имени
document.querySelector('.myclass li:nth-child(2)') //второй по счету
document.querySelector('div[title="my"]') //по любому атрибуту
document.querySelector('[type="radio"]:checked').value //нажатая радиокнопка
document.querySelectorAll('div') //найти все div – результат записывается в массив
document.querySelector('select').options[document.querySelector('select').selectedIndex].value //возвращает value выбранного select-а
document.querySelector('select').options[document.querySelector('select').selectedIndex].text //возвращает текст выбранного select-а
document.querySelector('select').selectedIndex //возвращает порядковый номер выбранного select-а

Как вы видите из данных примеров, querySelector() позволяет делать выборку по многим условиям очень схожих с jQuery. При этом он не привязывается строго к типу элемента (id, класс и т.п.), что сильно повышает его уровень использования.