Skypro - научим с нуля
Веб-разработчик: новая работа через 9 месяцев. Гарантия трудоустройства.
Для работы с 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, однако считаются устаревшими и встречаются чаще в старом коде.
Skypro - научим с нуля