Basic JS, Tarasov, Lesson 5 - DOM

by shurikation

JavaScript

/**** Lesson 5 - DOM *****/

/*
Vanila JS - это чистый javascript;

Все элементы HTML хранятся в DOM. Обращаясь к нему, мы можем менять структутру HTML на сайте. По сути это интерфейс.

в объекте window есть объект document
если его вывести в консоль - мы увидим разметку текущей страницы.

console.dir(window.document);
console.dir(document); - или так вывести объект.

Это прослойка между js и html-кодом т.е. интерфейс по сути.
*/

/*** по ID ***/
document.getElementByID('id of html element here'); 

const myElem = document.getElementByID('id of html element here');  если хотим найти что-то по id

В JS можно ставить id т.к. поиск по id выполняется быстрее. ID надо ставить на ключевые моменты, с которыми мы работаем. А так лучше - классы.

/*** Кладем элеимент по классe в переменную ***/

const myElems = document.getElementsByClassName('id of html element here'); - если хотим найти что-то по id

В этом случае вам вернутся коллекция.
HTML Collections на MDN
Коллекция - это объект, который ведет себя как массив.

Этим методом почти не пользуются.

Еще один редкий метод - 
getElementsByTagName('p');
Он найдет все тэги <p>

/** ***/
Кроме ID
еще
document.querySelector('.test-class:nth-child(2);');
document.querySelector('.test-class');
Если таких элементов с таким классом много, то он найдет первый попавшийся и вернет его.

document.querySelectorAll('.test-class');
Вернет все эелемнты с таким классом, почти как колекция, но это node list.

/** Как вытащить нужный элемент из node list **/
Относитесь к этим коллекция как к объектам/массивам.

const myElems = document.querySelectorAll('.test-class');
console.log(myElems[0]); // выдаст самый первый в с писке

/* Перебор */
for (const elem of myElems) {
	console.log(elem);
}
// все элементы из myElems кладутся в elem и затем выводятся - и так пробегемся по всем эелемнтам

*************************
getElementByID - выдает айди элемента
querySelector - можно искать по любому селектору (тэгу, класссу, айди и...