Javascript queryselector and queryselector

Using querySelector and querySelectorAll

Sometimes, document.getElementById , document.getElementsByClassName and document.getElementsByTag name just don’t cut it.

• Select the first element in a document by class attribute
• Selecting element by class or tag name nested in another element only
• Selecting all elements of multiple tag types (e.g. all paragraphs and span elements)

To be sure, there is usually a workaround using the standard selection methods.

However, in these situations in can often be easier to use the querySelector and querySelectorAll methods.

querySelector and querySelectorAll

The difference between these two is that querySelector returns a single element matching its selection criteria. querySelectorAll, on the other hand, returns all elements matching the search criteria in an iterable list.

Selection criteria are specified using the highly developed and powerful CSS selector syntax. This allows for highly nuanced selection without the need to combine standard methods and/or traverse the DOM.

Learn about querySelector and querySelectorAll in this post through making five nuanced DOM selections that would require some level of workaround using document.getElementById , document.getElementsByClassName and document.getElementsByTag alone.

Five ways to use querySelector and querySelectorAll

#1: Using the wildcard operator (*) to select all DOM elements

You can easily select all DOM elements by combining querySelectorAll with the wildcard operator:

#2: Select first matching element by tag or class name

document.getElementsByClassName and document.getElementsByTag will select all elements that match their criteria. This can be replicated by combining querySelectorAll and selecting by tag or class.

This can easily be adapted to only select the first element that would be selected by querySelectorAll by applying the querySelector method instead:

document.querySelector('p'); // Selects first paragraph element in document document.querySelector('.item'); // Selects first element of class item

#3: Mix and match id, class and tag element selection

querySelectorAll can be used to select multiple elements by a mix of id, class name and tag name:

document.querySelectorAll('#content, .item, p'); // Selects element with id content, all elements with class name item, and all paragraph elements

#4: Reaching nested elements

Elements nested within other elements can be selected using element > element or element element syntax.

/* Get all paragraph elements whose parent element class list contains 'container' */ document.querySelectorAll('.container > p'); /* Get all paragraph elements that are nested within an element of class 'container' */ document.querySelectorAll('.container p');

With ordinary selection methods, this would be impossible without traversing the DOM, likely resulting in more convoluted syntax.

#5: Select by HTML5 attribute and value

Because it accepts CSS syntax, querySelector and querySelectorAll can select elements by their attribute and attribute value:

/* Get all elements that contain the attribute target */ document.querySelectorAll('[target]'); /* Get all elements that contain the attribute target and are set to value '_blank' */ document.querySelectorAll('[target=_blank]');

Summary

When coming across the need for complex selection when programming, querySelector and querySelectorAll meet this demand by enabling complex element selection in a single line. And the best thing: if you already know CSS, then you are already ready to go since both methods use CSS selection syntax!

Related links

Источник

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

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

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

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

querySelector()

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

Синтаксис

 let element = document.querySelector(selectors); 

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

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

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

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

 div >JavaScript/div> div >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 >li №1/li> li >li №2/li> li >li №3/li> /ul> div >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 >div/div> script> let elementById = document.getElementById('elemId') elementById.style.backgroundColor = 'yellow'; /script>  

getElementsByClassName()

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

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

Skypro — научим с нуля

Источник