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

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

Document Object Model

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

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

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

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

            <!-- было -->
            <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/

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

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

Атрибуты

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

            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');
            /* А как добавить на страницу? */
        

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

            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

Пример

События

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

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

            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 и история

URL и история

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

WTF???

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

Event Loop

Event Loop

Event Loop

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