38. Методи пошуку елементів в DOM

document.querySelector (css-selector) - вибір елемента по css-селектору (id, class, тег)
document.querySelectorAll (css-selector) - вибір всіх елементів по css-селектору (крім id - може бути тільки один елемент в документі)
document.getElementById (id) - вибір по id
document.getElementsByName (name) - вибір по атрибуту name
document.getElementsByTagName (tag) або ('*') - вибір по тегу або всіх
document.getElementsByClassName (class) - вибір по класу

Приклади

document.querySelector (css-selector) - вибір елемента по css-селектору

Вибір по id

#block1

 let elem1 = document.querySelector('#block1');
 elem1.style.background = 'blue';

Вибір по class (вибереться тільки перший елемент з зазначеним класом)

.myc1

 let elem2 = document.querySelector('.myc1');
 elem2.style.background = 'orange';

Вибір по тегу, наприкдад 'input' (вибереться перший елемент)

  let elem3 = document.querySelector('input');
 elem3.style.border = '3px solid green';

document.querySelectorAll (css-selector) - вибір всіх елементів по css-селектору (крім id - може бути тільки один елемент в документі)

Вибір по class (доступ до кожного елемента по індексу)

.df

// отримуємо всі елементи
 let elem4 = document.querySelectorAll('.df');
 
// в циклі перебираємо елементи масиву
 for(var i=0; i<elem4.length; i++) 
    {
    	elem4[i].style.background = 'grey';
    };

Вибір по class одного елемента з кількох

.dc

// отримуємо всі елементи
 let elem5 = document.querySelectorAll('.dc');
 
 //вибираємо другий елемент (перший має індекс = 0)   
    elem5[1].style.background = 'yellow';

document.getElementById (id) - вибір елемента по id

Вибір по id (знак # не вказується)

#block2

   let elem6 = document.getElementById('block2');
 elem6.style.background = 'purple';

document.getElementsByName (name) - вибір елементів, які мають атрибут name - форми, інпути, селектори

Вибір по name (обидва елемента мають name=nam1)

  let elem7 = document.getElementsByName('nam1');
  elem7[0].style.background = 'lightblue';   
   elem7[1].style.background = 'yellow';

document.getElementsByTagName(tag) - вибір по тегу

  let elem8 = document.getElementsByTagName('select');
  elem8[0].style.background = 'green';   
   elem8[1].style.background = 'red';

document.getElementsByClassName (class) - вибір по класу

.ff

 let elem9 = document.getElementsByClassName('ff');
  elem9[0].style.borderColor = 'green';   
   elem9[1].style.borderColor = 'red';
    
  for(var i=0; i<elem9.length; i++) 
    {
    	elem9[i].style.background = 'yellow'
    };

далі ✏