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

Содержание

querySelector()
querySelectorAll()
getElementById()
getElementsByClassName()
getElementsByTagName()
getElementsByName()
Итого

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

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

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

querySelector()
querySelectorAll()

querySelector()

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

Синтаксис

    let element = document.querySelector(selectors);

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

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

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

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

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

    <<span>script</span>>
        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* считаются устаревшими";
    <<span>/script</span>>

При работе с 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() позволяет получать первые и последние элементы в списке

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

querySelectorAll()

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

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

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

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

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

getElementById()

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

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

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

getElementsByClassName()

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

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

getElementsByTagName()

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

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

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

getElementsByName()

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

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

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

Итого

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

Методы getElementsBy*, также позволяют работать с DOM, однако считаются устаревшими и встречаются чаще в старом коде.