JS получение элементов страницы

```
var h1 = document.getElementById("h1");

```

* В этом примере мы создаем переменную "h1" которая найдет в DOM (document \ страница) тэг с **id="h1"**. Теперь переменная = элементу (содержит в себе обращение к элементу на странице)

### **getElementsByTagName("p")** - по тэгу (!важно что тут множественное число Element**s**)

Пример 1

```
var p = document.getElementsByTagName("p");

```

* Переменная "p" найдет в DOM (document \ страница) все тэги **<p>**. Теперь переменная = все **<p>** (массив).
	+ Что бы обратиться к определенному элементу в массиве нужно указать в квадратных скобках его номер (отсчет начинается с нуля)

```
console.log(p[2]); // обращение к третьему элементу

```

Пример 2

* Что бы записать определенный элемент (не массив) нужно указать в квадратных скобках его номер (отсчет начинается с нуля)

```
var p = document.getElementsByTagName("p")[0]; // обращение к первому элементу

```

### **getElementsByClassName("btn") -** по классу (!важно что тут множественное число Element**s**)

Пример 1

```
var btn = document.getElementsByClassName("btn"); // btn = массив

```

* Переменная "btn" найдет в DOM все **class="btn"**. Теперь **btn** = все содержащие **class="btn"** (массив).
	+ Что бы обратиться к определенному элементу в массиве нужно указать в квадратных скобках его номер (отсчет начинается с нуля)

```
console.log(btn[2]); // обращение к третьему элементу

```

Пример 2

* Что бы записать определенный элемент (не массив) нужно указать в квадратных скобках его номер (отсчет начинается с нуля)

```
var btn = document.getElementsByClassName("btn")[0]; // btn = элемент №1

```

\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_

### **querySelectorAll(".btn") -** обращение к любому css селектору (даже псевдоКлассы)

Пример 1

```
var hоv = document.querySelectorAll("ul>li:first-child"); // hov = массив (**все** ul>li:first-child)

```

\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_

### **.querySelector(".btn") -** обращение к любому **первому** css селектору (даже псевдоКлассы)

Пример 1

```
var hоv = document.querySelector("ul>li:first-child"); // hov = элемент (**только первый** ul>li:first-child)

```

\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_

\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_

\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_

\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_

\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_