JavaScript

https://jsfiddle.net/tjuw6vtg/13/

window

DOM

document

...

BOM

navigator

screen

location

frames

history

XMLHttpRequest

JavaScript

Object

Array

Function

...

window.open(‘https://www.google.ru’);

window.location = ‘https://www.google.ru’;

window.history.back();

window.history.go(-2);

DOM

document.body.style.color = “red”;

BOM

<html>

<titel>Hello World!</title>

</header>

<body>

<h1>Hello World!</h1>

</footer>

</body>

</html>

html

header

body

#text

title

#text

Hello Wordl!

#text

Hello Wordl!

#text

footer

#text

Nodes

element node

text

node

<p>

<p></p>

</p>

<p></p>

Возможности работы с DOM

получить абсолютно любой элемент дерева
воздействовать на его атрибуты, свойства и текст

$0.style.color = “red”;

Навигация по DOM

document

documentElement(html)

body

elem.firstChild

elem.lastChild

elem.firstElementChild === elem.children[0]
elem.lastElementChild === elem.children[elem.children.length - 1]

elem.firstChild elem.lastChild

elem.firstElementChild === elem.children[0]
elem.lastElementChild === elem.children[elem.children.length - 1]

elem.childNodes

elem.previousSibling

elem.nextSibling

elem.parentElement

id

document.getElementId(‘slider’)

<div>

document.getElementsByTagName('div')

<input name="adress">

document.getElementsByName(‘adress’);

.header__contacts_phone

document.getElementsByClassName(‘header__contacts_phone’);

<div class="active">

document.querySelectorAll(‘div.active’);

document.querySelector(‘div.active’);

Метод	Поиск по	Поддержка
getElementById	id	везде
getEmenetByName	name	везде
getElementByTagName	tag	везде
getElementByClassName	class	кроме IE8-
querySelector	CSS-селектор	везде
querySelectorAll	CSS-селектор	везде

elem.matches(‘li’); //true/false

elem.closes(‘div’); //коллекция элементов

var collection = document.getElementsByClassName('.active');

//любая выборка

for (var i = 0; i<collection.length; i++) {
console.log(collection[i]); // элемент коллекции

};

var elem = document.getElementById(id);

for (var i = 0; i< elem.childNodes; i++) {
console.log(elem.childNodes[i]); // дочерний элемент

};

Что дальше?

Работа с атрибутами

hasAttribute(nameOfAttribute)
getAttribute(nameOfAttribute)
setAttribute(nameOfAttribute, valueOfAttribute)
removeAttribute(nameOfAtribute)

var adressLink = document.getSelector(‘.main .main__socials_adress’);

if(adressLink.hasAttribute(‘href’)) {
var href = adressLink.getAttribute(‘href’);

window.opent(href, ‘_blank’);

adressLink.setAttribute(‘href’, ‘htttp://www.google.ru’);

}

document.querySelector('.red').removeAttribute('hidden');

<span class=”header__user_name” data-name=”Dariya Pushkarskaya”>Дарья</span>

elem.dataset.name; // Dariya Pushkarskaya

Работа с классами

className
classList

elem.className; //main container

elem.className = ‘main container active’;

ClassList

classList.contain(class)
classList.add/remove(class)
classList.toggle(class)

if (elem.classList.contain(‘show’)) {

elem.classList.remove(‘show’);

elem.classList..add(‘hidden’);

}

if (elem.classList.contain(‘hidden)) {

elem.classList.remove(‘hidden’);

elem.classList..add(‘show’);

}

elem.classList.toggle(‘active’);

События

События мыши
События на элементах управления
События по нажатию клавиш клавиатуры
События документа
События CSS

События мыши

click
contextmenu
mouseover
mouserout
mousedown
mouseup
mousemove

События на элементах управления

submit
focus

События по нажатию клавиш

keydown
keyup

События документа

DOMContentLoaded

События CSS

transitioned

События CSS

transitioned