DOM, Browser, Event Loop

DOM

Document Object Model

            <html>
                <head>
                    <title>Example</title>
                </head>
                <body>
                    <p>This is an example page</p>
                    <h1>Example page</h1>
                </body>
            </html>

Document Object Model

Отображение страницы

загрузка html ресурса
лексический и синтаксический анализ
построение DOM
загрузка и обработка CSS
построение CSSOM
построение дерева отображения
...

Document Object Model

программный интерфейс к HTML (XML) документам
представляет из себя группу узлов
каждый узел имеет свойства и методы
в браузере доступна для JavaScript

DOM, типы объектов

document – корневой элемент
element – узел DOM
NodeList – коллекция из element
HTMLCollection – коллекция из element
attribute – ссылка на объект для работы с атрибутами
namedNodeMap – map из element

Выбор элементов

Возвращают живые коллекции NodeList

document.getElementById
document.getElementsByName
document.getElementsByTagName
document.getElementsByClassName

Возвращают статические коллекции NodeList

document.querySelectorAll
document.querySelector

В чем разница?

            <!-- было -->
            <section>1<section>
            <section>2<section>
            <section>3<section>
            ...
            var nodes = document.getElementsByTagName('section');
            console.log(nodes.length)// ???

https://jsfiddle.net/tu9ben4g/

В чем разница?

            <!-- было -->
            <section>1<section>
            <section>2<section>
            <section>3<section>
            ...
            var nodes = document.querySelectorAll('section');
            console.log(nodes.length)// ???

https://jsfiddle.net/thoc54v1/1/

Навигация по узлам

parentNode
childNodes
firstChild, lastChild
nextSibling, previousSibling

Навигация по элементам

parentNode
children
firstElementChild, lastElementChild
nextElementSibling, previousElementSibling

Атрибуты

attributes
getAttribute
setAttribute
img.src
img.htmlFor
img.className
верблюжийРегистр

Содержимое элементов

            var foo = document.getElementById('paragraph1');
            var html = foo.innerHtml; // текст с разметкой
            var text = foo.innerText; // только текст
            var p = foo.outerText;// текст с разметкой включая себя

Создание новых узлов

            var img = document.createElement('img');
            img.src = 'http://url/image.jpg';
            var text = document.createTextNode('Some text');
            /* А как добавить на страницу? */

Добавление на страницу

appendChild
insertBefore

            var div = document.createElement('div');
            div.innerText = 'Hello';
            var form = document.getElementById('form1');
            form.appendChild(div);
            /* div - живая ссылка */

`insertBefore`

            var div = document.createElement('div');
            div.innerText = 'Hello';
            var form = document.getElementById('form1');
            document.body.insertBefore(div, form);

Удаление элементов

            var form = document.getElementById('form1');
            var removedForm = document.body.removeChild(form);
            /* или */
            var removedForm = form.remove(); // Не поддерживается в IE

Элемент не удаляется совсем, он исключается из DOM, но сохраняется в памяти до тех пор, пока на него существуют ссылки

DocumentFragment

var fragment = document.createDocumentFragment();
не имеет родительского элемента
не имеет отражения в DOM документа
частично поддерживает методы работы с дочерними элементами
querySelector, querySelectorAll

Пример

События

target.addEventListener(type, listener[, useCapture]);

type - тип события
listener - объект принимающий событие или функция обратного вызова
useCapture - захват события true/false

Совместимость

            if (el.addEventListener) { // обычные браузеры
                el.addEventListener('click', modifyText, false);
            } else if (el.attachEvent)  { // IE8-
                el.attachEvent('onclick', modifyText);
            }
            function modifyText(event) {
            ...
            }

Отписка от события

            el.addEventListener('click', modifyText, false);
            function modifyText(event) {
            ...
            }
            el.removeEventListener('click', modifyText, false);
            el.detachEvent('onclick', modifyText) /* для IE8- */

Event Bubbling vs Event Capturing

            <div id="d1">
              <a href="/404" id="l1">Link</a>
            </div>

Event Bubbling vs Event Capturing

            d**.getElementById('d1').addEventListener('click', () => {
              alert('div');
            });
            d**.getElementById('l1')addEventListener('click', () => {
              alert('link');
            });

https://jsfiddle.net/5ph6oys2/5/

window

Таймеры

            var timerId = setTimeout(function(){...}, 300);
            var intervalId = setInterval(function(){...}, 1000);
            ...
            clearTimeout(timerId);
            clearInterval(intervalId);

URL и история

Объект Location
- location.href
- location.hash
- location.origin
- location.search
- location.assign()
- location.reload()

URL и история

Объект History
- history.pushState()
- history.replaceState()
- history.back()
- history.forward()
- history.go()

`history.pushState`

            var state = {data: someData};
            var title = 'My amazing page';
            var url = '/index.html';
            history.pushState(state, title, url);

Как слушать переходы?

Событие popstate

            // подписываемся на событие
            window.addEventListener('popstate', function(){
                console.log('url changed');
            });

640k

WebStorage

`localStorage`

"постоянное" хранилище
хранит ключ => значение
данные хранит в виде строк
досутпный размер хранилища зависит от браузера

`localStorage`

            var data = {
                a: 1,
                b: 'text'
            };
            localStorage.setItem("data", JSON.stringify(data));
            // {"a":1,"b":"text"}

`localStorage`

            var data = localStorage.getItem('data');
            // {"a":1,"b":"text"}
            console.log(JSON.parse(data)); // Object
            console.log(localStorage.data);// ???
             
            localStorage.removeItem('data');

`sessionStorage`

"временное" хранилище
данные хранятся до закрытия вкладки или браузера
хранит ключ => значение
данные хранит в виде строк
досутпный размер хранилища зависит от браузера

localStorage / sessionStorage

ммм... Где искать?

https://jsfiddle.net/denisz/o40aty7z/3/

Cookies

`Cookies`

– небольшой фрагмент данных, отправленный веб-сервером и хранимый на компьютере пользователя. Веб-клиент всякий раз при попытке открыть страницу соответствующего сайта пересылает этот фрагмент данных веб-серверу в составе HTTP-запроса.

`Cookies`

            console.log(document.cookie); // String
            // key=value; key2=value2; mykey=myvalue2

`Cookies`

key=value
path=/mypath
domain=mysite.ua
expires=Tue, 19 Jan 2055 03:14:07 GMT

WTF???

https://jsfiddle.net/denisz/apy6um8n/3/

Event Loop

Stack – стек вызовов, синхронная часть
Heap – куча, область памяти
Queue – очередь, асинхронная часть

Event Loop

            function foo() {
              baz();
            }
            function baz() {
              bar()
            }
            function bar() {
              console.log('hello');
            }

Event Loop

Examples

https://jsfiddle.net/denisz/9tkerns5/1/

requestAnimationFrame

указывает браузеру на то, что вы хотите произвести анимацию, и просит его запланировать перерисовку на следующем кадре анимации. В качестве параметра метод получает функцию, которая будет вызвана перед перерисовкой.

requestAnimationFrame

            window.requestAnimationFrame(() => console.log('hello'));

Самостоятельное изучение

Спасибо!

Denis Zavgorodny
web technologist, founder of @ChernivtsiJS,
mentor at @NodeSchool Chernivtsi

@DenisZavgorodny

denis.zavgorodny@gmail.com