Веб-разработка. DOM презентация

Содержание

DOM DOM – Document Object Model API для работы со страницей из JavaScript. Читать информацию Создавать новые элементы Манипулировать существующими Изменять свойства Перемещать

Слайд 1Веб-разработка
Лекция №5. DOM.
Шумилов Вадим Валерьевич
Тензор, 2016

Слайд 2DOM

Слайд 3DOM
DOM – Document Object Model

API для работы со страницей из JavaScript.


Читать информацию
Создавать новые элементы
Манипулировать существующими
Изменять свойства
Перемещать

Слайд 4DOM
DOM – Document Object Model

Все элементы страницы (тэги, текст, комментарии) являются

элементами DOM.

Часто его называют DOM-дерево.

Слайд 5Навигация

Слайд 6Навигация
Каждый DOM-элемент имеет следующие навигационные свойства:

parentNode – родитель
previousSubling – предыдущий сосед
nextSibling

– следующий сосед
firstChild, lastChild – первый и последний дочерний элементы
childNodes – коллекция дочерних элементов

Слайд 7Навигация
Важные особенности:

Коллекция здесь – не настоящий массив.
Если какой-то элемент не определен,

значение навигационного свойства будет null.

Слайд 8Навигация


Привет
Текст...
Еще абзац


Слайд 9Навигация


Привет
Текст...
Еще абзац


var body = document.body;

Слайд 10Навигация


Привет
Текст...
Еще абзац


var body = document.body;
body.firstChild

Слайд 11Навигация

[
]Привет
Текст...
Еще абзац


var body = document.body;
body.firstChild

Слайд 12Навигация

[
]Привет
Текст...
Еще абзац[
]

var body = document.body;
body.firstChild
body.lastChild

Слайд 13Навигация

[
]Привет
Текст...
Еще абзац


var body = document.body;
var first = body.firstChild;
first.nextSibling;

Слайд 14Навигация

[
]Привет
Текст...
Еще абзац


var body = document.body;
var first = body.firstChild;
first.nextSibling.nextSibling;

Слайд 15Навигация

[
]Привет
Текст...
Еще абзац


var body = document.body;
var first = body.firstChild;
first.nextSibling.firstChild

Слайд 16Навигация

[
]Привет
Текст...
Еще абзац


var body = document.body;
var first = body.firstChild;
first.nextSibling.firstChild;
first.nextSibling.firstChild.parentNode

Слайд 17Навигация
Существуют дополнительные навигационные свойства,
не учитывающие текстовые ноды.

parentElementNode
firstElementChild, lastElementChild
previousElementSibling, lastElementSibling
children

Слайд 18Навигация
Как работать с коллекциями (childNodes, children)?

Два способа обращения к элементу:

elt.childNodes[i];
elt.childNodes.item(i);

Перебор –

по индексу от 0 до elt.childNodes.length

Слайд 19Поиск элементов

Слайд 20Поиск элементов
Несколько основных способов найти элемент(ы)

getElementById()
getElementsBy*()
querySelector()/querySelectorAll()

Слайд 21Поиск элементов
document.getElementById(‘elt-id’);

Вызов – с объекта document
Возвращает один элемент с указанным id

или null

Слайд 22Поиск элементов
anyElement.getElementsBy*(‘query’);

Вызов – с любого элемента. Это ограничивает область поиска
Варианты:
ByName
ByClassName
ByTagName
Возвращает

«живую коллекцию» (возможно, пустую)

Слайд 23Поиск элементов
anyElement.querySelector(‘#css .selector’);

Вызов – с любого элемента. Это ограничивает область поиска


Возвращает один первый элемент, подходящий под указанный селектор или null, если не найден
Бросает исключение, если селектор некорректный

Слайд 24Поиск элементов
anyElement.querySelectorAll(‘#css .selector’);

Вызов – с любого элемента. Это ограничивает область поиска


Возвращает коллекцию элементов (возможно, пустую), подходящих под указанный селектор
Бросает исключение, если селектор некорректный

Слайд 25Поиск элементов
Разница между getElementsBy* и querySelectorAll

Оба метода возвращают коллекцию, но их

действие не равнозначно.
getElementsBy* возвращают «живую» коллекцию

Слайд 26Поиск элементов

Первый
Второй


liveCol = document.getElementsByTagName(‘p’);
col = document.querySelectorAll(‘p’);

Слайд 27Поиск элементов
liveCol = document.getElementsByTagName(‘p’);
col = document.querySelectorAll(‘p’);

liveCol.length; // 2
col.length; // 2

Слайд 28Поиск элементов
liveCol = document.getElementsByTagName(‘p’);
col = document.querySelectorAll(‘p’);

document.body.innerHTML = ‘’; // удалит все

из body

liveCol.length; // ??
col.length; // ??

Слайд 29Поиск элементов
liveCol = document.getElementsByTagName(‘p’);
col = document.querySelectorAll(‘p’);

document.body.innerHTML = ‘’; // удалит все

из body

liveCol.length; // 0
col.length; // 2

Слайд 30Атрибуты

Слайд 31Атрибуты
Для работы с атрибутами у каждого элемента есть следующие методы:

getAttribute(‘name’);
setAttribute(‘name’, ‘value’);
hasAttribute(‘name’);
removeAttribute(‘name’);



Слайд 32Атрибуты
Особенности:

Значения атрибутов – строки. Все что не строки – конвертируется в

строку
Имена атрибутов - регистронезависимы
Изменение атрибутов приводит к изменению DOM и HTML

Слайд 33Атрибуты
Атрибуты и свойства

Элементы это объекты.
Как и у любого объекта, у

элементов есть свойства
Некоторые свойства синхронизируются с атрибутами
Некоторые – в обе стороны, некоторые – только в одну

Слайд 34Атрибуты


var elt = document.getElementById(‘some’);

elt.id; // ‘some’
elt.getAttribute(‘id’); // ‘some’

Слайд 35Атрибуты


var elt = document.getElementById(‘some’);

elt.id = “foo”;
elt.getAttribute(‘id’); // ‘foo’
elt.outerHTML; // ‘

id=“foo”>
’

Слайд 36Атрибуты
Не все атрибуты и свойства синхронизируются



var elt =

document.getElementsByTagName(‘input’)[0];

elt.value; // ‘foo’
elt.getAttribute(‘value’); // ‘foo’

Слайд 37Атрибуты
Не все атрибуты и свойства синхронизируются



var elt =

document.getElementsByTagName(‘input’)[0];

elt.value = ‘bar’;
elt.getAttribute(‘value’); // ‘foo’
elt.innerHTML; // ‘’
Но на экране в поле ввода будет “bar”...

Слайд 38Модификация дерева

Слайд 39Модификация дерева
Можно создавать ноды дерева

var div = document.createElement(‘div’);
var text = document.createTextNode(‘Это

текстовая нода’);

Слайд 40Модификация дерева
Можно добавлять ноды в другие ноды

div.appendChild(text);

document.body.appendChild(div);

Слайд 41Модификация дерева
Можно читать что получилось в виде строки:

document.body.innerHTML;

Это текстовая нода

Слайд 42Модификация дерева
Можно читать что получилось в виде строки:

document.body.outerHTML;

Это текстовая нода

Слайд 43Модификация дерева
Создавать содержимое документа можно с помощью innerHTML.

document.body.innerHTML = “Параграф текста”;

«Перезапись»

innerHTML приводит к удалению всего содержимого, которое ранее было внутри.

Слайд 44Модификация дерева
Можно управлять местом вставки

parent.insertBefore(elem, nextSibling);
parent.replaceChild(newElem, elem);

Слайд 45Модификация дерева
insertBefore




Слайд 46Модификация дерева
insertBefore





var ref = document.getElementById(‘ref’);
var newDiv = document.createElement(‘div’);
document.body.insertBefore(newDiv, ref);

Слайд 47Модификация дерева
insertBefore

var ref = document.getElementById(‘ref’);
var newDiv = document.createElement(‘div’);
document.body.insertBefore(newDiv, ref);





Слайд 48Модификация дерева
Если указать последний параметр null – вставка будет эквивалентна appendChild.



insertBefore(newChild, null) == appendChild(newChild)

Слайд 49Модификация дерева
replaceChild





var ref = document.getElementById(‘ref’);
var newDiv = document.createElement(‘div’);
document.body.replaceChild(newDiv, ref);

Слайд 50Модификация дерева
replaceChild

var ref = document.getElementById(‘ref’);
var newP = document.createElement(‘p’);
document.body.replaceChild(newDiv, ref);





Слайд 51Модификация дерева
Элементы можно удалять методом removeChild





var ref = document.getElementById(‘ref’);
document.body.removeChild(ref);

Слайд 52Модификация дерева
Элементы можно удалять методом removeChild

var ref = document.getElementById(‘ref’);
document.body.removeChild(ref);




Слайд 53Модификация дерева
Элементы можно клонировать методом cloneNode


Абзац


var p = document.body.firstElementChild;
var pClone =

p.cloneNode();
document.body.appendChild(pClone);

Слайд 54Модификация дерева
Элементы можно клонировать методом cloneNode

var p = document.body.firstElementChild;
var pClone =

p.cloneNode();
document.body.appendChild(pClone);


Абзац


???


Слайд 55Модификация дерева
Элементы можно клонировать методом cloneNode

var p = document.body.firstElementChild;
var pClone =

p.cloneNode();
document.body.appendChild(pClone);


Абзац





Слайд 56Модификация дерева
Элементы можно клонировать методом cloneNode

var p = document.body.firstElementChild;
var pClone =

p.cloneNode(true);
document.body.appendChild(pClone);


Абзац


Абзац




Слайд 57События

Слайд 58События
DOM Events. События. Какие они бывают?

Слайд 59События
DOM Events. События. Какие они бывают?

Click
Mousedown, Mousemove
Focus
Keydown, Keyup
Sumbit

Слайд 60События
Как добавить обработчик события.

...

p.onclick=function() {
alert(‘Нажали на

текст’);
};

Слайд 61События
Как добавить обработчик события.

function handleClick() { ... };

...

p.onclick=handleClick;

Слайд 62События
...

p.onclick=handleClick;

p.setAttribute(‘onclick’, handleClick);

Слайд 63События
...

p.onclick=handleClick;

p.setAttribute(‘onclick’, handleClick);

Слайд 64События
p.onclick = f1;
p.onclick = f2;

Слайд 65События
p.onclick = f1;
p.onclick = f2;

Проблема. Второй обработчик «затрет» первый!

Слайд 66События
addEventListener!

p.addEventListener(‘click’, f1);
p.addEventListener(‘click’, f2);

Слайд 67События
Обратите внимание!

p.onclick = ...
p.addEventListener(‘click’, ...);

При навешивании через атрибут нужно добавить on!

Слайд 68События
elt.addEventListener vs elt.on*

Позволяет добавить несколько обработчиков
Есть события, которые нельзя добавить через

свойство/разметку. Можно только через addEventListener

Слайд 69События
Как удалить обработчик?

elt.onclick = null;
elt.removeEventListener(‘click’, f);


Слайд 70События

elt.addEventListener(‘click’, function() { doSmth(); });

elt.removeEventListener(‘click’, function() { doSmth();});

Слайд 71События

elt.addEventListener(‘click’, function() { doSmth(); });

elt.removeEventListener(‘click’, function() { doSmth();});

Слайд 72События
Важно! Требуется указывать всегда одну и ту же функцию!

function handler() {

doSmth();
}

elt.addEventListener(‘click’, handler);
elt.removeEventListener(‘click’, handler);

Слайд 73Объект события

Слайд 74Объект события
p.onclick = function(event) {
// event???
}

Слайд 75Объект события
Объект-дескриптор события. Содержит свойства и методы, позволяющие получить дополнительную информацию

о событии, управлять им и т.п.

Слайд 76Объект события
event.type – тип события (click, mousedown, keyup, etc.)
event.target – объект,

на котором случилось событие


Есть разные специфические свойства
event.clientX, event.clientY – координаты курсора в момент клика

Слайд 77Объект события
Как получить доступ к событию, если обработчик навешивается через атрибут?


Слайд 78Объект события
Как получить доступ к событию, если обработчик навешивается через атрибут?

onclick=“alert(event.clientX)”>...


Слайд 79Объект события
Как получить доступ к событию, если обработчик навешивается через атрибут?

onclick=“alert(event.clientX)”>...


Это эквивалентно ...

div.onclick = function(event) {
alert(event.clientX);
}

Слайд 80Всплытие события

Слайд 81Всплытие

Первый
параграф


Слайд 82Всплытие

Первый
параграф


Слайд 83Всплытие

Первый
параграф


Слайд 84Всплытие

Первый
параграф


Слайд 85Всплытие
event.target – элемент, на котором изначально случилось событие
event.currentTarget – элемент, на

котором событие было поймано

Слайд 86Всплытие
Всплытие можно заблокировать



....


Слайд 87Всплытие
Всплытие можно заблокировать



....



В этом примере мы не увидим alert();

Слайд 88Всплытие
Что если обработчиков несколько?


....


var p = document.getElementsByTagName(‘p’)[0];
p.addEventListener(‘click’, stopsPropagation);
p.addEventListener(‘click’, showsAlert);

Слайд 89Всплытие
function stopsPropagation(event) {
event.stopPropagation();
}

function showAlert(event) {
alert(event.target.tagName); // SPAN
}

Слайд 90
Всплытие





....





Слайд 91
Всплытие





....






Слайд 92
Всплытие





....





Слайд 93Всплытие
function stopsPropagation(event) {
event.stopImmediatePropagation();
}

function showAlert(event) {
alert(event.target.tagName); // SPAN
}

Слайд 94
Всплытие





....






Слайд 95
Всплытие





....





Слайд 96Всплытие
Не все события всплывают!

Пример такого события – focus.

Слайд 97Всплытие
На самом деле есть не только всплытие, но и погружение событий!

Слайд 98Всплытие
Фазой, на которой будет обрабатываться событие, управляет третий, необязательный аргумент addEventListener

elt.addEventListener(‘click’,

handler, true);

Для того, чтобы поймать событие на стадии «погружения», нужно передать его == true

Слайд 99Всплытие
Кстати, событие focus...

Оно не всплывает, но погружается.

Слайд 100Всплытие
Кстати, событие focus...

Оно не всплывает, но погружается.

Слайд 101Делегирование

Слайд 102Делегирование
Задача: хотим при нажатии на каждый абзац в документе считать сколько

в нем слов.

Слайд 103Делегирование
Решение 1 (плохое)

var pCol = document.getElementsByTagName(‘p’);
for(var i = 0, l =

pCol.length; i < l; i++) {
pCol.addEventListener(‘click’, countWords);
}

Слайд 104Делегирование
Чем плохо это решение?

Слайд 105Делегирование
Чем плохо это решение?

Если элементов будет много их перебор может занять

время
Навешивается обработчиков по количеству параграфов
Если в документ добавятся новые параграфы для них код работать не будет, ведь они появились позже!

Слайд 106Делегирование
Решение 2 (почти правильное). Делегирование!

document.body.addEventListener(‘click’, function(event) {
if (event.target.nodeName ==

‘P’) {
countWords(event.target);
}
});

Слайд 107Делегирование
Решение 2 (почти правильное). Делегирование!

Если элементов будет много их перебор может

занять время
Навешивается обработчиков по количеству параграфов
Если в документ добавятся новые параграфы для них код работать не будет, ведь они появились позже!

Слайд 108Делегирование
Решение 2 (почти правильное). Делегирование!

Если элементов будет много их перебор может

занять время
Навешивается обработчиков по количеству параграфов
Если в документ добавятся новые параграфы для них код работать не будет, ведь они появились позже!

Слайд 109Делегирование
Решение 2 (почти правильное). Делегирование!

Если элементов будет много их перебор может

занять время
Навешивается обработчиков по количеству параграфов
Если в документ добавятся новые параграфы для них код работать не будет, ведь они появились позже!

Слайд 110Делегирование
Решение 2 (почти правильное). Делегирование!

Слайд 111Делегирование
Решение 2 (почти правильное). Делегирование!


Текст, часть которого
выделена жирным

Слайд 112Делегирование
Решение 3 (правильное)

function (event) {
var target = event.target;

while (target) {
if (target.nodeName == ‘P’) break;
target = target.parentNode
}
if (target) countWords(target);
}

Слайд 113Действие по умолчанию

Слайд 114Действие по умолчанию
У многих событий есть действия по умолчанию:

Click по ссылке

– переход
Mousedown на поле ввода – фокусировка
Keydown – при нажатии клавиши в поле ввода там появляется символ

Слайд 115Действие по умолчанию
Действие по умолчанию можно отменить

elt.addEventListener(‘click’, function(event) {
event.preventDefault();
});

Слайд 116Действие по умолчанию
Действие по умолчанию можно отменить

Если событие навешено через атрибут,

можно короче

elt.onclick = function() {
return false;
};

ВНИМАНИЕ! Это не работает, если обработчик навешен через addEventListener!

Слайд 117Действие по умолчанию
Для чего это может применяться?

Для отмены перехода по ссылке

и выполнения вместо этого какого-либо другого действия.
Для отмены ввода в , например, с целью коррекции ввода

Слайд 118Полезные ссылки

Слайд 119Учебник
http://javascript.ru/
http://learn.javascript.ru/

http://learn.javascript.ru/document
http://learn.javascript.ru/events-and-interfaces




Слайд 120Вопросы есть?

Слайд 121Спасибо за внимание!

Скачать презентацию

Похожие презентации

Общие сведения о структурах данных. (Тема 1) 371
Обучение основам создания коммерческих программных продуктов. (Лекция 1) 251
Центр інформаційних технологій УДППЗ Укрпошта. Стан автоматизації виробничих та бізнес-процесів та управління підприємством 448
Текстовый процесор. Використання стилів. (Урок 16) 573
Передача информации 498
Электронные таблицы Microsoft Excel 323

Обратная связь

Если не удалось найти и скачать презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

Email: Нажмите что бы посмотреть 

Что такое ThePresentation.ru?

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

Для правообладателей

Яндекс.Метрика