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

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

Сегодня все эти методы заменили:

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'); // слитно, когда условие И (учесть оба селектора)
    document.querySelector('.class-name,#elemId'); // через запятую, когда ИЛИ
    document.querySelector('.class-name-1:not(#elemId1)'); // один селектор, но не другой XOR
    document.querySelector(':not(.class-name-1),:not(#elemId1)'); // ни тот ни другой NAND
    document.querySelector(':not(.class-name-1):not(#elemId1)'); // или ни тот или ни другой
    

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

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

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

Ниже бегло рассмотрим устаревшие, но все еще поддерживаемые методы getElementsBy*, которые сегодня еще можно встретить, особенно в написанных давно проектах.

getElementById()

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

    
    <div id="elemId">div</div>

    <script>
    let elementById = document.getElementById('elemId')
    elementById.style.backgroundColor = 'yellow';
    </script>
    

getElementsByClassName()

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

    
    <div class="class-name-1 class-name-2">element №1</div>
    <div class="class-name-1">element №2</div>
    <div class="class-name-1 class-name-2">element №3</div>
        
    <script>
    let collectionOfelementsByClassName = document.getElementsByClassName('class-name-1 class-name-2')
    console.log(collectionOfelementsByClassName)
    </script>
    

getElementsByTagName()

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

    
    <div>element №1</div>
    <div>element №2</div>
    <div>element №3</div>
        
    <script>
    let collectionOfelementsByTagName = document.getElementsByTagName('div')
    console.log(collectionOfelementsByTagName);
    </script>  
    

Если вместо тега вставить звездочку '*' метод вернет все элементы представленные на странице.

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, однако считаются устаревшими и встречаются чаще в старом коде.