document.querySelector() и document.querySelectorAll() в JavaScript

• querySelector()
• querySelectorAll()
• getElementById()
• getElementsByName()
• Итого

Для работы с DOM (объектная модель документа) элементами на странице в JavaScript есть удобные методы, которые позволяют получать и далее манипулировать ими. Кроме querySelector() и querySelectorAll(), для поиска используют стандартные методы:

• getElementsByClassName() - по именам классов;
• getElementsByTagName() - по имени тега;
• getElementsByName() - по значению атрибута name;
• getElementById() - по идентификатору (id) элемента.

Для поиска по любому CSS-селектору используют:

• querySelector()
• querySelectorAll()

querySelector()

querySelector() - это document метод, который возвращает первый элемент, соответствующий указанному селектору или группе селекторов. Если поиск не увенчался успехом возвращается значение null.

Синтаксис

    let element = document.querySelector(selectors);             

let element - для того, чтобы работать с полученными элементами, создаем переменную, куда и записываем полученные данные.

document - объект, который служит точкой входа для получения содержимого страницы.

querySelector - вызов метода.

selectors - перечень селекторов, на основе которых будет производиться поиск элементов.

    <div class="class-name">JavaScript</div>
    <div id="elemId">JS</div>
    <span>Джава Скрипт</span>
    <div name="attributeName">ECMAScript</div>

    <script>
        let elementByClassName = document.querySelector('.class-name'); // доступ по классу
        let elementById = document.querySelector('#elemId'); // доступ по id
        let elementByTag = document.querySelector('span'); // доступ по тегу
        let elementByAttribute = document.querySelector('[name="attributeName"]'); // доступ по имени атрибута
        
        elementByClassName.innerHTML = "Манипулировать элементами на странице с помощью querySelector легко и удобно!";
        elementById.innerHTML = "querySelector - это универсальный способ получения доступа к DOM элементам";
        elementByTag.innerHTML = "С помощью innerHTML можно получать или менять содержимое элементов";
        elementByAttribute.innerHTML = "Методы getElementsBy* также позволяют находить элементы";
    </script>

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

    document.querySelector('.class-name#elemId'); // элемент с этим классом и id
    document.querySelector('.class-name, #elemId'); // первый элемент с классом или id
    document.querySelector('.class-name-1:not(#elemId1)'); // элемент с классом, но без этого id
    document.querySelector(':not(.class-name-1):not(#elemId1)'); // элемент без этого класса и id

Также метод querySelector() позволяет получать первые и последние элементы в списке

    <ul>
        <li>li №1</li>
        <li>li №2</li>
        <li>li №3</li>
    </ul>
        
    <script>
    let elementByFirstTag = document.querySelector('ul > li:first-child');
    elementByFirstTag.innerHTML = 'Заменили текст в первом li в теге ul';
    
    let elementByLastTag = document.querySelector('ul > li:last-child');
    elementByLastTag.innerHTML = 'Заменили текст в последнем li в теге ul';
    </script>

querySelectorAll()

querySelectorAll() - это document метод, который возвращает коллекцию (NodeList) всех найденных элементов на странице, соответствующие указанному селектору или группе селекторов. Если поиск не увенчался успехом возвращается пустой NodeList.

    <ul>
        <li class="class-name selected">li №1</li>
        <li class="class-name selected">li №2</li>
        <li class="class-name selected">li №3</li>
    </ul>
    <div class="class-name selected">div №1</div>
           
    <script>
    let collectionOfElements = document.querySelectorAll('.class-name.selected');
    for (let i = 0; i < collectionOfElements.length; i++) {
    collectionOfElements[i].innerHTML = "Меняем текст в полученных элементах через цикл for";
    }
    </script>

Здесь мы получаем все элементы с классами class-name и selected и меняем текст в них через цикл for.

querySelectorAll() возвращает статическую (non-live) коллекцию элементов. Если после вызова метода на странице появились еще элементы соответствующие прописанным селекторам и необходимо получить доступ и до них, querySelectorAll() нужно вызывать снова.

Поиск по классу и тегу подробно разобран в отдельных уроках про getElementsByClassName() и getElementsByTagName(). Ниже бегло рассмотрим другие стандартные методы getElementsBy* для поиска элементов.

getElementById()

getElementById() остаётся стандартным методом для поиска по известному уникальному id. Подробно его разберём в отдельном уроке про getElementById().

getElementsByName()

getElementsByName() - это document метод, который возвращает коллекцию (NodeList) всех найденных элементов на странице, соответствующие указанному атрибуту name. Если поиск не увенчался успехом возвращается пустой NodeList.

    <div name="elemName">element №1</div>
    <div name="elemName">element №2</div>
    <div name="elemName">element №3</div>
        
    <script>
    let collectionOfelementsByName = document.getElementsByName('elemName')
    console.log(collectionOfelementsByName);
    </script>

Методы getElementsBy* возвращают «живые» коллекции, то есть они меняются в зависимости от изменения DOM. В свою очередь querySelectorAll() получает статическую коллекцию.

Итого

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

Методы getElementsBy* также позволяют работать с DOM. В новом коде часто выбирают querySelectorAll(), потому что он принимает любые CSS-селекторы.