Получить элемент html страницы

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

Источник

Document: querySelector() method

The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.

Note: The matching is done using depth-first pre-order traversal of the document’s nodes starting with the first element in the document’s markup and iterating through sequential nodes by order of the number of child nodes.

Syntax

Parameters

A string containing one or more selectors to match. This string must be a valid CSS selector string; if it isn’t, a SyntaxError exception is thrown. See Locating DOM elements using selectors for more about selectors and how to manage them.

Note: Characters that are not part of standard CSS syntax must be escaped using a backslash character. Since JavaScript also uses backslash escaping, be especially careful when writing string literals using these characters. See Escaping special characters for more information.

Return value

An Element object representing the first element in the document that matches the specified set of CSS selectors, or null is returned if there are no matches.

If you need a list of all elements matching the specified selectors, you should use querySelectorAll() instead.

Exceptions

Thrown if the syntax of the specified selectors is invalid.

Usage notes

If the specified selector matches an ID that is incorrectly used more than once in the document, the first element with that ID is returned.

CSS pseudo-elements will never return any elements, as specified in the Selectors API.

Escaping special characters

To match against an ID or selectors that do not follow standard CSS syntax (by using a colon or space inappropriately, for example), you must escape the character with a backslash (» \ «). As the backslash is also an escape character in JavaScript, if you are entering a literal string, you must escape it twice (once for the JavaScript string, and another time for querySelector() ):

div id="foo\bar">div> div id="foo:bar">div> script> console.log("#foo\bar"); // "#fooar" (\b is the backspace control character) document.querySelector("#foo\bar"); // Does not match anything console.log("#foo\\bar"); // "#foo\bar" console.log("#foo\\\\bar"); // "#foo\\bar" document.querySelector("#foo\\\\bar"); // Match the first div document.querySelector("#foo:bar"); // Does not match anything document.querySelector("#foo\\:bar"); // Match the second div script> 

Examples

Finding the first element matching a class

In this example, the first element in the document with the class » myclass » is returned:

const el = document.querySelector(".myclass"); 

Complex selectors

const el = document.querySelector("div.user-panel.main input[name='login']"); 

Negation

As all CSS selector strings are valid, you can also negate selectors:

const el = document.querySelector( "div.user-panel:not(.main) input[name='login']", ); 

This will select an input with a parent div with the user-panel class but not the main class.

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 17, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник