Объектная модель документа - tyapk.ru dom.pdf · Терминология...
TRANSCRIPT
![Page 1: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/1.jpg)
Объектная модель документа
DOM – Document Object Model
![Page 2: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/2.jpg)
Модель DOM
• Обеспечивает доступ ко всем элементам документа и их атрибутам посредством древовидной структуры объектов
• Позволяет создавать, удалять и изменять элементы документа и их содержимое
• DOM – представление документа, загруженного в окно браузера, в виде дерева тегов
2
![Page 3: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/3.jpg)
DOM <html> <head> <title>Заголовок</title> </head> <body> Документ </body> </html>
document
html
head
title
“Заголовок”
body
“Документ”
3
![Page 4: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/4.jpg)
Терминология DOM • Каждый документ содержит
элементы, представляемые узлами
• Всего существует 12 типов узлов, основных узлов два: узел-элемент и узел-текст
• Тег представляется узлом-элементом
• Текст представляется узлом-текстом
• Узел-элемент и узел-текст – равноправные узлы дерева
• ELEMENT_NODE = 1 • ATTRIBUTE_NODE = 2 • TEXT_NODE = 3 • CDATA_SECTION_NODE = 4 • ENTITY_REFERENCE_NODE = 5 • ENTITY_NODE = 6 • PROCESSING_INSTRUCTION_NODE
= 7 • COMMENT_NODE = 8 • DOCUMENT_NODE = 9 • DOCUMENT_TYPE_NODE = 10 • DOCUMENT_FRAGMENT_NODE =
11 • NOTATION_NODE = 12
4 http://www.w3.org/TR/DOM-Level-3-Core/idl-definitions.html
![Page 5: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/5.jpg)
DOM
• Доступ к DOM начинается с объекта document. Из него можно добраться до любых узлов.
• Основные ссылки, по которым можно переходить между узлами DOM
5
![Page 6: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/6.jpg)
DOM
6
Существует 6 основных методов получения DOM элементов: • getElementById • getElementsByTagName • getElementsByName • getElementsByClassName (except IE<9) • querySelector (except IE<8 and IE8 in compat
mode) • querySelectorAll
![Page 7: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/7.jpg)
Навигация по дереву
• Начать навигацию по дереву можно с любого узла, для которого известен идентификатор, задаваемый параметром тега id
• Метод getElementById(идентификатор_узла)
7
![Page 8: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/8.jpg)
Навигация по дереву
<body> <ol id=ordlist> <li>Первый</li> <li>Второй</li> <li>Третий</li> </ol>
<script> alert(document.getElementById('ordlist').tagName) </script>
</body>
8
![Page 9: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/9.jpg)
Навигация по дереву
Свойства для чтения – parentNode – childNodes[i] – firstChild
(Node – текущий узел) – lastChild – previousSibling – nextSibling
9
Node.previousSibling Node.nextSibling Node
Node.childNodes[i] Node.firstChild Node.lastChild
Node.parentNode
![Page 10: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/10.jpg)
Навигация по дереву <p>Нумерованный список</p> <ol id=ordlist> <li>Первый</li> <li>Второй</li> <li>Третий</li> </ol> <b>Документ</b>
<script> oList=document.getElementById('ordlist') alert(oList.parentNode.tagName) alert(oList.childNodes[0].tagName) alert(oList.firstChild.tagName) alert(oList.lastChild.tagName) alert(oList.previousSibling.tagName) alert(oList.nextSibling.tagName) </script>
10
![Page 11: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/11.jpg)
11
![Page 12: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/12.jpg)
Проблемы навигации
• Некоторые браузеры трактуют символы пробелов и переходы на новую строку как текстовые узлы
• Это вызывает проблемы при использовании свойств: firstChild, lastChild, nextSibling, previousSibling
12
![Page 13: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/13.jpg)
Свойства узлов
• nodeType – тип узла • nodeName и tagName – имя тега • nodeName определено для многих типов узлов • tagName определено только для элементов-
узлов
13
![Page 14: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/14.jpg)
Свойства узлов
• innerTEXT – текст элемента без тегов HTML • outerTEXT – текст элемента без тегов HTML • innerHTML – содержит текст и HTML-элементы
для данного тега (html-содержимое узла в виде строки)
• outerHTML – содержит текст и HTML-элементы для данного и вложенных тегов (html-узел целиком)
14
![Page 15: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/15.jpg)
innerTEXT и outerTEXT • Чтение • <div id=ext>
<P><B id=int>Березовая</B> роща</P> </div>
15
![Page 16: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/16.jpg)
innerTEXT и outerTEXT • Запись • <div id=ext>
<P><B id=int>Березовая</B> роща</P> </div>
• int.innerText='Липовая' int.outerText='Липовая'
16
![Page 17: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/17.jpg)
innerHTML и outerHTML • <div id=ext>
<P><B id=int>Березовая</B> роща</P> </div>
17
![Page 18: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/18.jpg)
innerHTML и outerHTML <style> .new {border: 3px solid #999999; border-radius: 5px; color:green} </style> <div id=ext><P><B id=int>Березовая</B> роща</P></div> int.innerHTML='Липовая' int.outerHTML='<i id=int>Вербная</i>' ext.innerHTML='<h1><i id=int>Ясеневая</i> роща</h1>' ext.outerHTML='<div id=ext class=new><h1> <i id=int>Буковая</i> роща</h1></div>'
18
![Page 19: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/19.jpg)
Редактирование дерева
• Методы – createElement()
создание нового узла-элемента – createTextNode()
создание нового узла-текста – appendChild()
добавление узла в конец коллекции childNodes узла, для которого метод был вызван
– insertBefore() добавление узла с возможностью указания места, куда вставляется новый узел
19
![Page 20: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/20.jpg)
Редактирование дерева <p>Нумерованный список</p> <ol id=ordlist> <li>Первый</li><li>Второй</li><li>Третий</li> </ol> <b>Документ</b> <script> oList=document.getElementById('ordlist') newItem=document.createElement('LI') newText=document.createTextNode('Четвертый') newItem.appendChild(newText); oList.appendChild(newItem); </script>
20
![Page 21: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/21.jpg)
Редактирование дерева <p>Нумерованный список</p> <ol id=ordlist> <li>Первый</li><li>Второй</li><li>Третий</li> </ol> <b>Документ</b> <script> oList=document.getElementById('ordlist') newItem=document.createElement('LI') newText=document.createTextNode('Четвертый') newItem.appendChild(newText); curItem=oList.firstChild oList.insertBefore(newItem,curItem) </script>
21
![Page 22: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/22.jpg)
Редактирование дерева • <script>
function addtext(text) { mytext=document.createTextNode(text) document.getElementById("example").appendChild(mytext) } </script>
• <p id=example onclick="addtext(' Это новый текст')"> Щелкните здесь, чтобы вставить новый текст</p>
22
![Page 23: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/23.jpg)
Редактирование дерева
• Удаление узла – removeChild()
удаление потомка узла, для которого метод был вызван
– removeNode() удаление узла из документа
23
![Page 24: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/24.jpg)
Редактирование дерева <p>Нумерованный список</p> <ol id=ordlist> <li>Первый</li><li>Второй</li><li>Третий</li> </ol> <b>Документ</b> <script> oList=document.getElementById('ordlist') oList.removeChild(oList.firstChild) </script>
24
![Page 25: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/25.jpg)
Редактирование дерева <p>Нумерованный список</p> <ol id=ordlist> <li>Первый</li><li>Второй</li><li>Третий</li> </ol> <b>Документ</b> <script> oList=document.getElementById('ordlist') oList.removeNode(true) //false </script> true – удаляется узел-элемент и его коллекция childNodes false – удаляется узел-элемент без коллекции
25
![Page 26: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/26.jpg)
Редактирование дерева
• Атрибуты узлов – createAttribute()
создает новый атрибут узла – setAttribute()
присваивает значение атрибуту – removeAttribute()
удаляет атрибут – getAttribute()
возвращает текущее значение атрибута
26
![Page 27: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/27.jpg)
Работа с атрибутами • <script>
function createAtt() {id=document.getElementById('heading'); id.createAttribute('align‘)}
• function setAtt() {id=document.getElementById('heading'); id.setAttribute('align','center‘)}
• function getAtt() {id=document.getElementById('heading'); alert(id.getAttribute('align'))}
• function removeAtt() {id=document.getElementById('heading'); id.removeAttribute('align‘)} </script>
• <body> <p id=heading>Работа с атрибутом узла</p> <button onclick=createAtt()>Создать атрибут</button> <button onclick=setAtt()>Установить атрибут</button> <button onclick=getAtt()>Получить атрибут</button> <button onclick=removeAtt()>Удалить атрибут</button> </body>
![Page 28: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/28.jpg)
ПРИМЕРЫ РАБОТЫ С DOM
![Page 29: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/29.jpg)
Вставка новой ссылки • <script>
function addlink() { mylink=document.createElement('a') mylink.setAttribute('href','http://math.isu.ru') mylink.setAttribute('name','nstu') text=document.createTextNode('Сайт ИГУ') mylink.appendChild(text) document.getElementById('firstlink').appendChild(mylink) } </script>
• <p><a href=http://nsu.ru>Сайт ИГУ</a> <p id=firstlink onclick="addlink()">Щелкните здесь, чтобы вставить новую ссылку</p>
29
![Page 30: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/30.jpg)
Вставка новой ссылки
30
![Page 31: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/31.jpg)
Изменение типа списка • <script>
function changelist() { oldlistitems=mylist.innerHTML newnode=document.createElement('ul') mylist.replaceNode(newnode) newnode.innerHTML=oldlistitems } </script>
• <ol id=mylist> <li>Пункт 1</li> <li>Пункт 2</li> <li>Пункт 3</li> </ol>
• <button onclick=changelist()>Изменить тип списка</button>
31
![Page 32: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/32.jpg)
Изменение типа списка
32
![Page 33: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/33.jpg)
Замена изображения • <img id="img" src="open1.gif" onClick="changeimg()">
Щелкните на папке • <script>
tr=1; function changeimg() { elem=document.all('img') if (tr==1) {elem.outerHTML='<img id="img" src="open2.gif" onClick="changeimg()">' tr=2} else {elem.outerHTML="<img id='img' src='open1.gif' onClick='changeimg()'>" tr=1}} </script>
33
![Page 34: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/34.jpg)
Замена изображения
34
![Page 35: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/35.jpg)
Отображение и скрытие <p id="p1">Это первый абзац.</p><hr> <p id="p2">Это первый абзац.</p><hr> <p id="p3">Это первый абзац.</p> <input type="button" onclick="document.getElementById('p2').style.visibility='hidden'"> <input type="button" onclick="document.getElementById('p2').style.visibility='visible'"> <input type="button" onclick="document.getElementById('p2').style.display='none'"> <input type="button" onclick="document.getElementById('p2').style.display='block'"> 35
![Page 36: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/36.jpg)
Отображение и скрытие
36
![Page 37: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/37.jpg)
ОБРАБОТКА СОБЫТИЙ
![Page 38: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/38.jpg)
38
События
• Для реакции на действия посетителя и внутреннего взаимодействия скриптов существуют события.
• Событие – это сигнал от браузера о том, что что-то произошло.
![Page 39: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/39.jpg)
39
События • Мышь:
– click – происходит, когда кликнули на элемент левой кнопкой мыши – contextmenu – происходит, когда кликнули на элемент правой кнопкой
мыши – mouseover – возникает, когда на элемент наводится мышь – mousedown и mouseup – когда кнопку мыши нажали или отжали – mousemove – при движении мыши
• Элементах управления: – submit – посетитель отправил форму <form> – focus – посетитель фокусируется на элементе, например нажимает на <input>
• Клавиатура: – keydown – когда посетитель нажимает клавишу – keyup – когда посетитель отпускает клавишу
• Документ: – DOMContentLoaded – когда HTML загружен и обработан, DOM документа
полностью построен и доступен.
![Page 40: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/40.jpg)
40
Обработка событий
• Событию можно назначить обработчик, то есть функцию, которая сработает, как только событие произошло.
• Именно благодаря обработчикам JavaScript-код может реагировать на действия посетителя.
1. Через атрибут HTML 2. Через свойства DOM-объекта 3. Через метод addEventListener
![Page 41: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/41.jpg)
41
Через атрибут HTML
<input
value="Нажми меня“
onclick="alert('Клик!')"
type="button">
<input
value="Нажми меня"
onclick="someFunction()"
type="button">
![Page 42: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/42.jpg)
42
Через свойства DOM-объекта
<input id="elem" type="button" value="Нажми меня" />
<script> elem.onclick = function() { alert( 'Спасибо' );
}; </script>
![Page 43: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/43.jpg)
43
Через addEventListener
elem.addEventListener(
"click" ,
function() {
alert('Спасибо!')
}
)
![Page 44: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/44.jpg)
44
Через addEventListener <input id="elem" type="button" value="Нажми меня"/>
<script>
function handler1() { alert('Спасибо!'); };
function handler2() { alert('Спасибо ещё раз!'); }
elem.onclick = function() { alert("Привет"); };
elem.addEventListener("click", handler1);
elem.addEventListener("click", handler2);
</script> // Привет, Спасибо!, Спасибо ещё раз!
![Page 45: Объектная модель документа - tyapk.ru DOM.pdf · Терминология dom • Каждый документ содержит элементы, представляемые](https://reader036.vdocuments.pub/reader036/viewer/2022080720/5f799900da2a445231264ff2/html5/thumbnails/45.jpg)
45
Через addEventListener
function addHandler(obj, msg) {
function say() {
alert(msg)
}
obj.addEventListener(’click’,say);
}