Денис Чистяков: DOM, jQuery и все, все, все

DOM, jQuery и всевсе все

На Яндеск.Диске yadi.sk/d/4PUvH1NwAKes2

На JsFiddle jsfiddle.net/dench/RHtRZ/8/

Среда выполнения— JavaScript !== Браузер

— Браузер в том числе

— ОС: WebOS, Firefox OS, Chrome OS

— Сервер: Node.JS, SpiderMonkey, Rhino

— Офисные приложения: MS Office, OpenOffice

Различные средыпредоставляют различный API

для работы с ними

DOM— Document Object Model — это API, для чтения и редактирования

содержимомого HTML и XML-документов

— Это дерево, узлами которого могут быть элементы, текст,

комментарии, атрибуты и другие

Что позволяет нам DOM?— Получать доступ к узлу или набору узлов

— Обход дерева

— Изменять атрибуты узла

— Добавлять / удалять / клонировать узлы

— Обрабатывать события на узлах

Простейший DOM<!DOCTYPE html><html lang="ru">

<body>

<button>Отправить</button>

</form>

Что такое jQuery?— JS-библиотека, призванная сделать код удобнее и более

кроссбраузерным

— Главный слоган „Write less, do more“ — «Пиши меньше, получай

больше»

— Всё API нацелено сделать код короче, понятнее и исправить

шороховатости в нативных реализациях

Что такое jQuery?

— Был разработан и презентован Джоном Резигом в 2006

— Продолжает развиваться и сейчас

— Код постоянно претерпевает рефакторинг и оптимизации

Что такое jQuery?— Используется практически всеми крупнейшими компаниями (Яндекс,

Google, Mozilla)

— Имеет обширное комьюнити и огромное количество plugin`ов

— Есть расширения для UI и мобильных приложений

Волшебный $— Переменные в JS могут начинаться с букв и некоторых символов

— jQuery — одна из первых библиотек, начавших использовать $ в

качестве пространства имен

— jQuery === $

Поиск элементов

Поиск элементов<form class="auth" id="auth" data-value="123" action="/">

</form>

getElementByIddocument.getElementById('auth');

</form>

getElementById$('#auth');

</form>

querySelectordocument.querySelector('.auth');

</form>

querySelector$('.auth');

</form>

querySelectordocument.querySelector('[name="login"]');

</form>

querySelector$('[name="login"]');

</form>

querySelectorAlldocument.querySelectorAll('input,button');

</form>

NodeList не Array Ó методовforEach, map и т.п. — нет!

Итерирование по результатамВариант №1

var elems = document.querySelectorAll('input,button');

for (var i = 0, l = elems.length; i < l; i++) {

var elem = elems[i];

Итерирование по результатамВариант №2

var elems = document.querySelectorAll('input,button');

var elemsList = Array.prototype.slice.call(elems);

elemsList.forEach(function(elem) {

querySelectorAll$(':input');

</form>

Все методы поискавозвращают коллекции и

предоставляют методы для

итерирования по ним

Итерирование по результатам$(':input').each(function(){

var $item = $(this);

Для поиска используетсябиблиотека Sizzle

Атрибуты и свойства

Атрибуты и свойстваvar form = document.getElementById('auth');

var $form = $(form);

</form>

*Attributeform.getAttribute('action'); >> "/"

form.hasAttribute('method', 'POST'); >> false

form.setAttribute('method', 'POST');

form.hasAttribute('method', 'POST'); >> true

form.removeAttribute('method');

*Attribute$form.attr('action'); >> "/"

$form.attr('method', 'POST');

$form.removeAttr('method');

Data-атрибутыform.dataset['value']; >> "123"

form.dataset.hasOwnProperty('value'); >> true

form.dataset.foo = 'bar';

Data-атрибуты$form.data('value'); >> "123"

$form.data('foo', 'bar');

</form>

Атрибуты !== свойстваform.getAttribute('action'); >> "/"

form.getAttribute('method'); >> null

form.getAttribute('id'); >> "auth"

form.action; >> "http://fiddle.jshell.net/"

form.method; >> "get"

form.id; >> "auth"

Атрибуты !== свойства$form.attr('action'); >> "/"

$form.attr('method'); >> undefined

$form.attr('id'); >> "auth"

$form.prop('action'); >> "http://fiddle.jshell.net/"

$form.prop('method'); >> "get"

$form.prop('id'; >> "auth"

Классыform.className; >> "auth"

form.className += " form"; >> "auth form"

form.classList.add('foo');

form.classList.item(1); >> "form"

form.classList.contains('foo'); >> true

form.classList.remove('foo');

Классы$form.addClass('form');

$form.hasClass('form'); >> true

$form.removeClass('form');

Создание и удаление элементов

createElement + appendChildvar elem = document.createElement('span');

elem.className = 'error';

elem.setAttribute('id', 'auth-error');

elem.setAttribute('foo', 'bar');

elem.textContent = "Введен неверный логин или пароль";

document.body.appendChild(elem);

createElement + appendChildvar $elem = $('<span>', {

id: "auth-error",

class: ["error"],

foo: "bar",

text: "Введен неверный логин или пароль"

}).appendTo(document.body);

cloneNodevar elem = document.createElement('span');

var clone = elem.cloneNode(true)

clone.id = 'mail-error';

clone.textContent = "Не удалось отправить письмо";

document.body.appendChild(elem);

document.body.appendChild(clone);

cloneNodevar $body = $(document.body);

var $elem = $('<span>', {…});

var $clone = $elem.clone(true)

.prop('id', 'mail-error')

.text("Не удалось отправить письмо")

$body.append($elem).append($clone)

События

Все элементы DOM и jQueryмогут реагировать на те или

иные события

Можно навешивать обработчики в HTML<form class="auth" id="auth"

data-value="123" action="/" onsubmit="submitHandler()">

<button onclick="clickHandler()">Отправить</button>

</form>

Почему это плохо?— Нельзя навешать более одного обработчика на узел

— JS и HTML становятся тесно связаны

— Неинтуитивно

— При изменении HTML необходимо всегда помнить про атрибуты с

обработчиками

— Нельзя динамически навешивать обработчики

addEventListenervar form = document.getElementById('auth');

form.addEventListener('submit', submitHandler);

var button = document.querySelector('button');

button.addEventListener('click', clickHandler);

button.addEventListener('click', yetClickHandler);

addEventListenervar $form = $('#auth');

$form.on('submit', submitHandler);

var $button = $('button');

$button.on('click', clickHandler);

.on('click', yetClickHandler);

Существует два подхода

— Перехват событий (Capturing)

— Всплывающие события (Bubbling)

Перехват событий (Capturing)

addEventListenervar button = document.querySelector('button');

button.addEventListener('click', clickHandler, true);

button.addEventListener('click', yetClickHandler, true);

Всплывающие события (Bubbling)

В jQuery все событиявсплывающие из соображений

кроссбраузерности

addEventListenervar button = document.querySelector('button');

button.addEventListener('click', clickHandler, false);

button.addEventListener('click', yetClickHandler, false);

stopPropagationvar button = document.querySelector('button');

button.addEventListener('click', function(event) {

event.stopPropagation();

}, true);

stopPropagation

stopPropagationvar button = document.querySelector('button');

event.stopPropagation();

}, false);

stopPropagation

stopImmediatePropagationvar button = document.querySelector('button');

event.stopImmediatePropagation();

}, false);

У многих элементов естьдействия по умолчанию

preventDefaultvar link = document.querySelector('a');

link.addEventListener('click', function(event) {

console.log(this);

}, false);

<a href="http://yandex.ru">Yandex</a>

preventDefaultvar link = document.querySelector('a');

link.addEventListener('click', function(event) {

event.preventDefault();

console.log(this);

}, false);

<a href="http://yandex.ru">Yandex</a>

В jQuery методы такжедоступны у объекта события

В jQuery этого же эффектаможно достигнуть, выполнив

return false в теле

обработчика

Подключение jQuery на странице<!DOCTYPE html><html lang="ru">

<head><title>jQuery</title></head>

<body>

</form>

</script>

</body></html>

jQuery tips and tricks— Называйте jQuery-переменные, начиная с $

— Всегда кэшируйте результаты селекторов

— Используйте live-события по возможности

— Посмотрите „30 Days to Learn jQuery“

— Используйте map, grep, proxy и другие утилиты

Мы научились— Получать доступ к узлу или набору узлов

— Обход дерева

— Изменять атрибуты узла

— Добавлять / удалять / клонировать узлы

— Обрабатывать события на узлах

Спасибоdench@yandex-team.ru

twitter.com/denchistyakov

Денис Чистяков: DOM, jQuery и все, все, все

Documents

Денис Запорожан

Денис Митрофанов

Мобильность (Денис Савенков)

Денис Чистяков — JavaScript на фронте и в тылу

Евдокименко Денис

Филиппов Денис

Чистяков В.П. - Курс теории вероятностей

Тарасов Денис

Денис Гурский

Испытание поединком PostgreSQL vs MySQL / Александр Чистяков, Даниил Подольский

Денис Кучумов

Борис Чистяков. Город детства

некифоров денис

П.П. Чистяков

(денис)тиражные решения

Сергей Житинский, Александр Чистяков (Git in Sky)

Денис Чистяков: Системы контроля версий

редактировал денис

CodeFest 2013. Чистяков А. — Использование систем виртуализации в веб

8 кудрявцев денис