#4 Универсальный поиск DOM элементов
В предыдущих уроках мы разбирали с вами методы поиска по Id, классам и тегам. В этом уроке мы рассмотрим универсальный вариант, которым можно заменить все предыдущие. Есть два метода document.querySelector и document.querySelectorAll
<div id='container'>
Test
</div>
<div class='article'>Div 1</div>
<div class='article'>Div 2</div>
<div class='article'>Div 3</div>
<div class='article'>Div 4</div>
<button onclick='changeColor()'>Change</button>
В нашем html у меня написаны 4 дива с классом article и див с id container.
Давайте рассмотрим как мы можем найти див по id и поменять в нем цвет текста.
function changeColor () {
var element = document.querySelector('#container')
element.style.color = 'red'
}
Мы ищем наш елемент с помощью querySelector. Чтобы указать, что мы хотим найти именно елемент по id мы ставим перед названием решетку. Дальше мы можем менять цвет как обычно.
Точно также мы можем искать по тегу все елементы с помощью querySelectorAll
function changeColor () {
var elements = document.querySelectorAll('div')
for(var i = 0; i < elements.length; i++) {
elements[i].style.color = 'red'
}
}
Здесь мы использовали просто тег div и циклом поменяли цвет у всех елементов.
Единственная разница между querySelectorAll и querySelector в том, что первый возвращает массив елементов, а второй только первый елемент найденный на странице.
Для поиска по классам впереди названия класса нужно ставить точку.
function changeColor () {
var elements = document.querySelectorAll('.article')
for(var i = 0; i < elements.length; i++) {
elements[i].style.color = 'red'
}
}
Давайте теперь попробуем более сложный пример. Например в html сделаем вот такую разметку
<body>
<div class='description'>
<p>
Text
</p>
</div>
<button onclick='changeColor()'>Change</button>
</body>
И теперь мы можем найти елемент вот так
function changeColor () {
var element = document.querySelector('.description p')
element.style.border = '1px solid green'
}
То есть мы указали, что хотим найти класс description и потом в нем найти тег p.
И такие селекторы могут быть достаточно сложными.
Давайте напишем еще один пример в котором будем менять цвет у чекбоксов, которые отмечены.
<body>
<div class='container'>
<div>
<input type='checkbox' />
Movies
</div>
<div>
<input type='checkbox' /> Sports
</div>
<div>
<input type='checkbox' /> Reading
</div>
<div>
<input type='checkbox' /> Sleeping
</div>
</div>
<button onclick='changeColor()'>Change</button>
</body>
Теперь найдем все инпуты внутри класса container, которые типа checkbox и которые checked.
function changeColor () {
var elements= document.querySelectorAll('.container input[type="checkbox"]:checked')
for(var i = 0; i < elements.length; i++) {
elements[i].parentElement.style.color = 'red'
}
}
Потом мы проходимся по ним циклом и задаем цвет на паренте с помощью метода .parentElement.
Если мы посмотрим в браузер, то у нас подсвечиваются красным выбраные чекбоксы.
Если у вас возникли какие-то вопросы или комментарии, пишите их прямо под этим видео и я обязательно на них отвечу.