#3 Поиск DOM элементов по тегам и классам
В предыдущем уроке мы с вами рассмотрели метод document.getElementById, который позволяет нам находить уникальный елемент и потом мы можем менять его свойства.
Как еще можно находить елементы на странице? Очень часто нам приходится находить не один елемент, а массив елементов на странице.
Давайте добавим в наш html 4 дива
<body>
<p id='paragraph'>
Some text
</p>
<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>
<button onclick='changeColor()'>Change</button>
</body>
Теперь мы можем использовать специальную функцию getElementsByTagName, чтобы найти эти елементы по тегу div.
function changeColor () {
var elements = document.getElementsByTagName('div')
console.log(elements)
}
Как мы видим в консоли, у нас вывелся массив из 4 елементов. И если мы хотим поменять свойство первого, то мы должны обратиться к елементу по индексу, как мы делали в уроке "Массивы в Javascript". Ссылку на него я оставлю в тексте видео.
Обращаясь к елементу по индексу мы получаем обычный DOM елемент и можем менять его свойста.
function changeColor () {
var elements = document.getElementsByTagName('div')
console.log(elements)
elements[0].style.color = 'red'
}
Если мы посмотрим в браузер, то елемент у нас стал красным.
Что же делать если елементов много и мы хотим поменять их все? В этом нам поможет цикл for. Циклы вы также можете посмотреть в уроке "Циклы в Javascript".
Давайте напишем цикл от нуля до длины массива. Длину массива можно узнать с помощью свойста length. И внутри цикла поменяем цвет каждого елемента на красный.
function changeColor () {
var elements = document.getElementsByTagName('div')
console.log(elements)
for(var i = 0; i < elements.length; i++) {
elements[i].style.color = 'red'
}
}
Если мы посмотрим в браузер, то цвет поменялся у всех елементов.
Но по тегу обращаться к елементам не всегда удобно, так как тегов мало, а елементов, которые вы хотите модифицировать на странице много и их нужно как-то уникально различать. Именно поэтому большинство елементов всегда ищут по классу.
Давайте перепишем этот же код используя классы. Добавим класс к всем div елементам.
<body>
<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>
</body>
Теперь давайте заменим метод getElementsByTagName на getElementsByClassName.
function changeColor () {
var elements = document.getElementsByClassName('article')
console.log(elements)
for(var i = 0; i < elements.length; i++) {
elements[i].style.color = 'red'
}
}
Как мы видим в браузере, цвета все так же меняются, хотя елементы мы ищем уже по классу.
Если у вас возникли какие-то вопросы или комментарии, пишите их прямо под этим видео и я обязательно на них отвечу.