Javascript селектор по атрибуту

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 — научим с нуля

Источник

Using CSS Selectors In Javascript

In CSS, selectors are patterns used to select the element(s) you want to style, but as you can tell from the title above, selectors are also useful in javascript and below are some examples on how to use them.

Basics

Using a selector in javascript

const div = document.querySelector("div") // => First occurence of a div element in the document const p = div.querySelector("p") // => First occurence of a p element in the div 

document.querySelectorAll("div") // NodeList of all div elements 

By IDs

To get an element by its ID, use a # before the element ID

document.querySelector("#id") // => document.getElementById('id') 

By classes

To get elements by class, use a . before the class name

document.querySelectorAll(".myElementClass") 

By tag name

To get elements by tag name, just input the tag name

document.querySelectorAll("body") // => document.getElementsByTagName('body') 

Replicating .getElementById and getElementsByTagName

document.querySelector("#myDivId") // => document.getElementById('myDivId') 

document.querySelectorAll("a") // => document.getElementsByTagName('a') 

All elements

document.querySelectorAll("*") // => NodeList[. ] 

Using multiple selectors

To use multiple selectors, we seperate each of them with a , .

   Hello i am a paragraph  href="https://awesomeplace.com">Hey I am a link  href="https://anotherplace.com">I am another link   

document.querySelectorAll("p, a") // => NodeList[p,a,a] 

More with elements

In the above examples, we made basic queries, but other things can be done like getting elements by order or parent.

Getting element children

There are two variants of this, one gets an element’s child no matter how deep it is down the tree, and the other gets an element’s direct child.

   Hello i am a paragraph  href="https://awesomeplace.com">Hey I am a link Hello i am a paragraph and here's  href="https://anotherplace.com">a link     

With the above HTML as an example, we will look at these two variants.

document.querySelectorAll("div a") // => NodeList[a,a] 

Getting elements by order

There are two ways to do this also. Consider the following HTML.

    href="https://awesomeplace.com">Hey I am a link I should intervene but i wont Hello i am another paragraph  Hello i am a paragraph   

document.querySelector("div + p") // => 
Hello i am a paragraph 

With ~ , it does not matter the element immediately behind matches.

document.querySelector("a ~ p") // => 
Hello i am another paragraph 

and we can see that the pre element did not affect the result because it does not matter if the pre was there in the first place. But the following selector will fail because it checks the element immediately above it.

document.querySelector("a + p") // => null 

Getting elements by attribute

An attribute selector starts with [ and ends with ] and is used as such

   style="color:blue;">Hello i am styled Hello i have no style   

document.querySelector("p[style]") // => 
Hello i am styled 

Check attribute value

To check an attribute value we use the = symbol.

   href="https://awesomeplace.com">Hey I am a link  href="https://anotherplace.com">I am another link   

Источник