Document Object Model. Лекция 3 презентация

Содержание

1. Document Object Model. Лекция 3
4. Свойства и методы для доступа к структуре
6. Свойства, позволяющие перемещаться по структуре документа: childNodes firstChild lastChild parentNode nextSibling previousSibling
8. Поле nodeType: Node.ELEMENT_NODE Node.TEXT_NODE Node.DOCUMENT_NODE Node.ATTRIBUTE_NODE Node.COMMENT_NODE
9. function nextTag(obj) { do
10. Свойства: tagName className id innerHTML style
11. var color = elem.currentStyle[‘color’]; getComputedStyle(объект[,“:псевдокласс”]);
12. Манипуляции с параметрами тегов: obj.setAttribute(‘параметр’, ‘значение’) obj.getAttribute(‘параметр’) obj.hasAttribute(‘параметр’) obj.removeAttribute(‘параметр’)
13. Манипуляции с узлами структуры документа: document.createElement(‘тег’); родитель.appendChild(объект);
14. Пример добавление ссылки в меню: var newLink
15. Объект window Методы: alert(значение); confirm(вопрос);
16. prompt(вопрос[, начальное значение]); var x = prompt(‘Представьтесь!’);
17. Объект window Методы: moveTo(x,y) moveBy(dx, dy) resizeTo(x,
18. Свойства: width = ширина height = высота
19. Пример: x= window.open(‘http://google.com.ua’, ‘google’, ‘width= 600, height=400,

Заголовок Шапка

Слайд 1Лекция 3. Объект document
Document Object Model

Слайд 2

Заголовок

Слайд 4Свойства и методы для доступа к структуре документа:
document.documentElement
document.body
document.getElementById('идентификатор')
document.getElementsByTagName('имя')
document.getElementsByName('имя')
document.getElementsByClassName('класс')

Пример.
var elems

= document.getElementsByTagName('div');
// elems[0] - div #header
// elems[1] - div #menu
// elems[2] - div #footer

Слайд 6Свойства, позволяющие перемещаться по структуре документа:
childNodes
firstChild
lastChild
parentNode
nextSibling
previousSibling

Слайд 8Поле nodeType:
Node.ELEMENT_NODE
Node.TEXT_NODE
Node.DOCUMENT_NODE
Node.ATTRIBUTE_NODE
Node.COMMENT_NODE

Слайд 9function nextTag(obj)
{
do
obj = obj.nextSibling;

while (obj && obj.nodeType !=
Node.ELEMENT_NODE);
return obj;
}

Слайд 10Свойства:
tagName
className
id
innerHTML
style
Пример.
var elem =

document.getElementById(‘menu’);
elem.style[‘backgroundColor’] = ‘red’;
elem.style[‘borderLeftRadius’] = ‘10px’;

Слайд 11var color = elem.currentStyle[‘color’];

getComputedStyle(объект[,“:псевдокласс”]);

var color = getComputedStyle(elem)[‘color’]; // rgb(0,0,0) или #000000

Слайд 12Манипуляции с параметрами тегов:
obj.setAttribute(‘параметр’, ‘значение’)
obj.getAttribute(‘параметр’)
obj.hasAttribute(‘параметр’)
obj.removeAttribute(‘параметр’)

Слайд 13Манипуляции с узлами структуры документа:
document.createElement(‘тег’);
родитель.appendChild(объект);
родитель.insertBefore(объект, DOM-узел);
родитель.removeChild(объект);
родитель.replaceChild(старый объект, новый объект);
старый объект.replaceNode(новый объект);

Слайд 14Пример добавление ссылки в меню:
var newLink = document.createElement(‘a’);
newLink.innerHTML= “Перейти в Google”;
newLink.setAttribute(‘href’,

‘http://google.com.ua’);
newLink.style.color = ‘green’;
newLink.setAttribute(‘target’, ‘_blank’);
var newItem = document.createElement(‘li’);
newItem.appendChild(newLink);
var menu = document.getElementById(‘menu’);
var ul = menu.getElementsByTagName(‘ul’)[0];
ul.appendChild(newItem);

Слайд 15Объект window
Методы:
alert(значение);

confirm(вопрос);

if(confirm(‘Удалить?’))
{
location.href = ‘/news/delete’;
/// …
}

Слайд 16prompt(вопрос[, начальное значение]);
var x = prompt(‘Представьтесь!’);
if(x!= null)
{
alert(‘Привет’, + x);
}

Слайд 17Объект window
Методы:
moveTo(x,y)
moveBy(dx, dy)
resizeTo(x, y)
resizeBy(dx, dy)
print()

open(‘адрес’, ‘имя_окна’,
‘свойство1= значение1, свойство2= значение2,

…’ );

Слайд 18Свойства:
width = ширина
height = высота
left = левая координата
right = правая координата
top

Слайд 19Пример:
x= window.open(‘http://google.com.ua’, ‘google’, ‘width= 600, height=400, location= no, menubar= no’);
x. resizeTo(700,

500);

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

Document Object Model. Лекция 3 презентация

Содержание

Слайд 1Лекция 3. Объект document
Document Object Model

Слайд 2

Заголовок

Слайд 3

Слайд 5

Слайд 6Свойства, позволяющие перемещаться по структуре документа:
childNodes
firstChild
lastChild
parentNode
nextSibling
previousSibling

Слайд 7

Слайд 8Поле nodeType:
Node.ELEMENT_NODE
Node.TEXT_NODE
Node.DOCUMENT_NODE
Node.ATTRIBUTE_NODE
Node.COMMENT_NODE

Слайд 9function nextTag(obj)
{
do
obj = obj.nextSibling;

Слайд 10Свойства:
tagName
className
id
innerHTML
style
Пример.
var elem =

Слайд 11var color = elem.currentStyle[‘color’];

getComputedStyle(объект[,“:псевдокласс”]);

var color = getComputedStyle(elem)[‘color’]; // rgb(0,0,0) или #000000

Слайд 12Манипуляции с параметрами тегов:
obj.setAttribute(‘параметр’, ‘значение’)
obj.getAttribute(‘параметр’)
obj.hasAttribute(‘параметр’)
obj.removeAttribute(‘параметр’)

Слайд 14Пример добавление ссылки в меню:
var newLink = document.createElement(‘a’);
newLink.innerHTML= “Перейти в Google”;
newLink.setAttribute(‘href’,

Слайд 15Объект window
Методы:
alert(значение);

confirm(вопрос);

if(confirm(‘Удалить?’))
{
location.href = ‘/news/delete’;
/// …
}

Слайд 16prompt(вопрос[, начальное значение]);
var x = prompt(‘Представьтесь!’);
if(x!= null)
{
alert(‘Привет’, + x);
}

Слайд 17Объект window
Методы:
moveTo(x,y)
moveBy(dx, dy)
resizeTo(x, y)
resizeBy(dx, dy)
print()

open(‘адрес’, ‘имя_окна’,
‘свойство1= значение1, свойство2= значение2,

Слайд 18Свойства:
width = ширина
height = высота
left = левая координата
right = правая координата
top

Слайд 19Пример:
x= window.open(‘http://google.com.ua’, ‘google’, ‘width= 600, height=400, location= no, menubar= no’);
x. resizeTo(700,

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

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

Document Object Model. Лекция 3 презентация

Содержание

Слайд 1Лекция 3. Объект documentDocument Object Model

Слайд 2 Заголовок

Слайд 3

Слайд 5

Слайд 6Свойства, позволяющие перемещаться по структуре документа:childNodesfirstChildlastChildparentNode nextSiblingpreviousSibling

Слайд 7

Слайд 8Поле nodeType:Node.ELEMENT_NODE Node.TEXT_NODE Node.DOCUMENT_NODE Node.ATTRIBUTE_NODE Node.COMMENT_NODE

Слайд 9function nextTag(obj){ do obj = obj.nextSibling;

Слайд 10Свойства:tagNameclassNameidinnerHTMLstyle Пример. var elem =

Слайд 11var color = elem.currentStyle[‘color’];getComputedStyle(объект[,“:псевдокласс”]);var color = getComputedStyle(elem)[‘color’]; // rgb(0,0,0) или #000000

Слайд 12Манипуляции с параметрами тегов:obj.setAttribute(‘параметр’, ‘значение’)obj.getAttribute(‘параметр’)obj.hasAttribute(‘параметр’)obj.removeAttribute(‘параметр’)

Слайд 14Пример добавление ссылки в меню:var newLink = document.createElement(‘a’);newLink.innerHTML= “Перейти в Google”;newLink.setAttribute(‘href’,

Слайд 15Объект windowМетоды:alert(значение);confirm(вопрос);if(confirm(‘Удалить?’)){ location.href = ‘/news/delete’; /// …}

Слайд 16prompt(вопрос[, начальное значение]);var x = prompt(‘Представьтесь!’);if(x!= null){ alert(‘Привет’, + x);}

Слайд 17Объект windowМетоды:moveTo(x,y)moveBy(dx, dy)resizeTo(x, y)resizeBy(dx, dy)print()open(‘адрес’, ‘имя_окна’, ‘свойство1= значение1, свойство2= значение2,

Слайд 18Свойства:width = ширинаheight = высотаleft = левая координатаright = правая координатаtop

Слайд 19Пример:x= window.open(‘http://google.com.ua’, ‘google’, ‘width= 600, height=400, location= no, menubar= no’);x. resizeTo(700,

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

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

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

Слайд 1Лекция 3. Объект document
Document Object Model

Слайд 2

Заголовок

Слайд 6Свойства, позволяющие перемещаться по структуре документа:
childNodes
firstChild
lastChild
parentNode
nextSibling
previousSibling

Слайд 8Поле nodeType:
Node.ELEMENT_NODE
Node.TEXT_NODE
Node.DOCUMENT_NODE
Node.ATTRIBUTE_NODE
Node.COMMENT_NODE

Слайд 9function nextTag(obj)
{
do
obj = obj.nextSibling;

Слайд 10Свойства:
tagName
className
id
innerHTML
style
Пример.
var elem =

Слайд 11var color = elem.currentStyle[‘color’];

getComputedStyle(объект[,“:псевдокласс”]);

var color = getComputedStyle(elem)[‘color’]; // rgb(0,0,0) или #000000

Слайд 12Манипуляции с параметрами тегов:
obj.setAttribute(‘параметр’, ‘значение’)
obj.getAttribute(‘параметр’)
obj.hasAttribute(‘параметр’)
obj.removeAttribute(‘параметр’)

Слайд 14Пример добавление ссылки в меню:
var newLink = document.createElement(‘a’);
newLink.innerHTML= “Перейти в Google”;
newLink.setAttribute(‘href’,

Слайд 15Объект window
Методы:
alert(значение);

confirm(вопрос);

if(confirm(‘Удалить?’))
{
location.href = ‘/news/delete’;
/// …
}

Слайд 16prompt(вопрос[, начальное значение]);
var x = prompt(‘Представьтесь!’);
if(x!= null)
{
alert(‘Привет’, + x);
}

Слайд 17Объект window
Методы:
moveTo(x,y)
moveBy(dx, dy)
resizeTo(x, y)
resizeBy(dx, dy)
print()

open(‘адрес’, ‘имя_окна’,
‘свойство1= значение1, свойство2= значение2,

Слайд 18Свойства:
width = ширина
height = высота
left = левая координата
right = правая координата
top

Слайд 19Пример:
x= window.open(‘http://google.com.ua’, ‘google’, ‘width= 600, height=400, location= no, menubar= no’);
x. resizeTo(700,