Для работы с DOM
(объектная модель документа) элементами на странице в JavaScript есть удобные методы, которые позволяют получать и далее манипулировать ими. Еще недавно активно использовалось 4 метода с помощью которых можно добраться до элементов:
getElementsByClassName()
- по именам классов;getElementsByTagName()
- по имени тега;getElementsByName()
- по значению атрибута name;getElementById()
- по идентификатору (id) элемента.Сегодня все эти методы заменили:
querySelector()
querySelectorAll()
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()
- это 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()
- это document
метод, который возвращает первый элемент, соответствующий указанному идентификатору (id
). Если совпадений не найдено возвращается значение null
.
<div id="elemId">div</div>
<script>
let elementById = document.getElementById('elemId')
elementById.style.backgroundColor = 'yellow';
</script>
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()
- это 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()
- это 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, однако считаются устаревшими и встречаются чаще в старом коде.