the true power of dynamic web pages learning & development team telerik software academy
Post on 13-Jan-2016
213 views
TRANSCRIPT
![Page 1: The True power of dynamic web pages Learning & Development Team Telerik Software Academy](https://reader035.vdocuments.us/reader035/viewer/2022070410/56649f1c5503460f94c3348c/html5/thumbnails/1.jpg)
Document Object Model
The True power of dynamic web pages
Learning & Development Teamhttp://academy.telerik.com
Telerik Software Academy
![Page 2: The True power of dynamic web pages Learning & Development Team Telerik Software Academy](https://reader035.vdocuments.us/reader035/viewer/2022070410/56649f1c5503460f94c3348c/html5/thumbnails/2.jpg)
Table of Contents Document Object Model (DOM) The DOM API Selecting DOM elements
getElementsByXXX() querySelector()
NodeLists LiveNodeList StaticNodeList
![Page 3: The True power of dynamic web pages Learning & Development Team Telerik Software Academy](https://reader035.vdocuments.us/reader035/viewer/2022070410/56649f1c5503460f94c3348c/html5/thumbnails/3.jpg)
Document Object Model
(DOM)
![Page 4: The True power of dynamic web pages Learning & Development Team Telerik Software Academy](https://reader035.vdocuments.us/reader035/viewer/2022070410/56649f1c5503460f94c3348c/html5/thumbnails/4.jpg)
Document Object Model
The Document Object Model is an API for HTML and XML documents Provides a structural representation
of the document
Enables developers to modify the content and visual presentation of a web page
![Page 5: The True power of dynamic web pages Learning & Development Team Telerik Software Academy](https://reader035.vdocuments.us/reader035/viewer/2022070410/56649f1c5503460f94c3348c/html5/thumbnails/5.jpg)
Document Object Model (2)
The Document Object Model consists of many objects to manipulate a web page All the properties, methods and
events are organized into objects
Those objects are accessible through programming languages and scripts
How to use the DOM of an HTML page? Write JavaScript to interact with the
DOM JavaScript uses the DOM API (native
implementation for each browser)
![Page 6: The True power of dynamic web pages Learning & Development Team Telerik Software Academy](https://reader035.vdocuments.us/reader035/viewer/2022070410/56649f1c5503460f94c3348c/html5/thumbnails/6.jpg)
DOM API
![Page 7: The True power of dynamic web pages Learning & Development Team Telerik Software Academy](https://reader035.vdocuments.us/reader035/viewer/2022070410/56649f1c5503460f94c3348c/html5/thumbnails/7.jpg)
DOM API The DOM API consist of objects and methods to interact with the HTML page Can add or remove HTML elements Can apply styles dynamically Can add and remove HTML
attributes DOM introduces objects that represent HTML elements and their properties document.documentElement is <html> document.body is the body of the
page
![Page 8: The True power of dynamic web pages Learning & Development Team Telerik Software Academy](https://reader035.vdocuments.us/reader035/viewer/2022070410/56649f1c5503460f94c3348c/html5/thumbnails/8.jpg)
DOM Objects Each of the HTML elements have corresponding DOM object types HTMLLIElement represents <li> HTMLAudioElement represents <audio>
Each of these objects have the appropriate properties HTMLAnchorElement has href property HTMLImageElement has src property
The document object is a special object It represents the entry point for the
DOM API
![Page 9: The True power of dynamic web pages Learning & Development Team Telerik Software Academy](https://reader035.vdocuments.us/reader035/viewer/2022070410/56649f1c5503460f94c3348c/html5/thumbnails/9.jpg)
HTML Elements
HTML elements have properties that correspond to the their attributes id, className, draggable, style,
onclick, etc…
Different HTML elements have their
specific attributes HTMLImageElement has property
src
HTMLInputElement has property value
HTMLAnchorElement has property href
![Page 10: The True power of dynamic web pages Learning & Development Team Telerik Software Academy](https://reader035.vdocuments.us/reader035/viewer/2022070410/56649f1c5503460f94c3348c/html5/thumbnails/10.jpg)
HTML Elements (2) HTML elements also have properties corresponding to their content innerHTML
Returns as a string the content of the element, without the element
outerHTML Returns as a string the content of the
element, with the element
innerText / textContent Returns as a string the text content
of the element, without the tags
![Page 11: The True power of dynamic web pages Learning & Development Team Telerik Software Academy](https://reader035.vdocuments.us/reader035/viewer/2022070410/56649f1c5503460f94c3348c/html5/thumbnails/11.jpg)
DOM ObjectsLive Demo
![Page 12: The True power of dynamic web pages Learning & Development Team Telerik Software Academy](https://reader035.vdocuments.us/reader035/viewer/2022070410/56649f1c5503460f94c3348c/html5/thumbnails/12.jpg)
Selecting DOM Elements
![Page 13: The True power of dynamic web pages Learning & Development Team Telerik Software Academy](https://reader035.vdocuments.us/reader035/viewer/2022070410/56649f1c5503460f94c3348c/html5/thumbnails/13.jpg)
Selecting HTML Elements
HTML elements can be found and cached into variables using the DOM API Select single element
Select a collection of elements
Using predefined collections of elements
13
var header = document.getElementById('header');var nav = document.querySelector('#main-nav');
var links = document.links;var forms = document.forms;
var inputs = document.getElementsByTagName('li');var radiosGroup = document.getElementsByName('genders[]');var header = document.querySelectorAll('#main-nav li');
![Page 14: The True power of dynamic web pages Learning & Development Team Telerik Software Academy](https://reader035.vdocuments.us/reader035/viewer/2022070410/56649f1c5503460f94c3348c/html5/thumbnails/14.jpg)
Using getElementsBy Methods
DOM API contains methods for selecting elements based on some characteristic By Id
By Class
By Tag Name
By Name
var header = document.getElementById('header');
var posts = document.getElementsByClassName('post-item');
var gendersGroup = document.getElementsByName('genders[]');
var sidebars =document.getElementsByTagName('sidebar');
![Page 15: The True power of dynamic web pages Learning & Development Team Telerik Software Academy](https://reader035.vdocuments.us/reader035/viewer/2022070410/56649f1c5503460f94c3348c/html5/thumbnails/15.jpg)
document.getElementsBy…Live Demo
![Page 16: The True power of dynamic web pages Learning & Development Team Telerik Software Academy](https://reader035.vdocuments.us/reader035/viewer/2022070410/56649f1c5503460f94c3348c/html5/thumbnails/16.jpg)
QuerySelector The DOM API has methods that use CSS-like selectors to find and select HTML elements querySelector returns the first
element that matches the selector querySelectorAll returns a
collection of all elements that match the selector
Not supported in older browsers (below IE 8)
Both methods take as a string parameter The CSS selector of the element
var header = document.querySelector('#header');//the element with id="header"var navItems = document.querySelectorAll('#main-nav li');//li elements contained in element with id=main-nav
![Page 17: The True power of dynamic web pages Learning & Development Team Telerik Software Academy](https://reader035.vdocuments.us/reader035/viewer/2022070410/56649f1c5503460f94c3348c/html5/thumbnails/17.jpg)
QuerySelectorLive Demo
![Page 18: The True power of dynamic web pages Learning & Development Team Telerik Software Academy](https://reader035.vdocuments.us/reader035/viewer/2022070410/56649f1c5503460f94c3348c/html5/thumbnails/18.jpg)
Selecting Elements Inside Other Elements
All methods can be used on HTML elements Except getElementById()
var wrapper = document.getElementById('wrapper');var divsInWrapper = wrapper.getElementsByTagName('div');
The DOM API can be used to select elements that are inside other elements Select all divs that are inside an
element with id "wrapper"
![Page 19: The True power of dynamic web pages Learning & Development Team Telerik Software Academy](https://reader035.vdocuments.us/reader035/viewer/2022070410/56649f1c5503460f94c3348c/html5/thumbnails/19.jpg)
Selecting Inner Elements
Live Demo
![Page 20: The True power of dynamic web pages Learning & Development Team Telerik Software Academy](https://reader035.vdocuments.us/reader035/viewer/2022070410/56649f1c5503460f94c3348c/html5/thumbnails/20.jpg)
NodeLists
![Page 21: The True power of dynamic web pages Learning & Development Team Telerik Software Academy](https://reader035.vdocuments.us/reader035/viewer/2022070410/56649f1c5503460f94c3348c/html5/thumbnails/21.jpg)
NodeLists A NodeList is a collection returned by the DOM selector methods: getElementsByTagName(tagName)
getElementsByName(name)
getElementsByClassName(className)
querySelectorAll(selector)var divs = document.getElementsByTagName('div');
var queryDivs = document.querySelectorAll('div');
for(var i=0; i< divs.length; i++){
//do stuff with divs[i]…
}
![Page 22: The True power of dynamic web pages Learning & Development Team Telerik Software Academy](https://reader035.vdocuments.us/reader035/viewer/2022070410/56649f1c5503460f94c3348c/html5/thumbnails/22.jpg)
NodeLists (2)
NodeList looks like an array, but is not It's an object with properties similar
to array Has length and indexer
Traversing an array with for-in loop works unexpected:
for (var i in divs) { console.log('divs[' + i + '] = ' + divs[i]);}
//divs[0] = ...//divs[1] = ...//divs[length] = ...//divs[item] = ...
![Page 23: The True power of dynamic web pages Learning & Development Team Telerik Software Academy](https://reader035.vdocuments.us/reader035/viewer/2022070410/56649f1c5503460f94c3348c/html5/thumbnails/23.jpg)
NodeListLive Demo
![Page 24: The True power of dynamic web pages Learning & Development Team Telerik Software Academy](https://reader035.vdocuments.us/reader035/viewer/2022070410/56649f1c5503460f94c3348c/html5/thumbnails/24.jpg)
Static NodeList and Live NodeList
![Page 25: The True power of dynamic web pages Learning & Development Team Telerik Software Academy](https://reader035.vdocuments.us/reader035/viewer/2022070410/56649f1c5503460f94c3348c/html5/thumbnails/25.jpg)
Static and Live NodeLists
There are two kinds of NodeLists getElementsBy…() return a
LiveNodeList querySelectorAll() returns a
StaticNodeList Live lists keep track of the selected elements Even when changes are made to the
DOM While static list contain the
elements as they were at the execution of the method
Keep in mind that LiveNodeList is slower that regular array Need to cache its length for better
performance
![Page 26: The True power of dynamic web pages Learning & Development Team Telerik Software Academy](https://reader035.vdocuments.us/reader035/viewer/2022070410/56649f1c5503460f94c3348c/html5/thumbnails/26.jpg)
Static NodeListand Live
NodeListLive Demo
![Page 27: The True power of dynamic web pages Learning & Development Team Telerik Software Academy](https://reader035.vdocuments.us/reader035/viewer/2022070410/56649f1c5503460f94c3348c/html5/thumbnails/27.jpg)
форум програмиране, форум уеб дизайнкурсове и уроци по програмиране, уеб дизайн – безплатно
програмиране за деца – безплатни курсове и уроцибезплатен SEO курс - оптимизация за търсачки
уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop
уроци по програмиране и уеб дизайн за ученициASP.NET MVC курс – HTML, SQL, C#, .NET, ASP.NET MVC
безплатен курс "Разработка на софтуер в cloud среда"
BG Coder - онлайн състезателна система - online judge
курсове и уроци по програмиране, книги – безплатно от Наков
безплатен курс "Качествен програмен код"
алго академия – състезателно програмиране, състезания
ASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NETкурсове и уроци по програмиране – Телерик академия
курс мобилни приложения с iPhone, Android, WP7, PhoneGap
free C# book, безплатна книга C#, книга Java, книга C#Дончо Минков - сайт за програмиранеНиколай Костов - блог за програмиранеC# курс, програмиране, безплатно
?
? ? ??
?? ?
?
?
?
??
?
?
? ?
Questions?
?
DOM and DOM Manipulation
http://academy.telerik.com
![Page 28: The True power of dynamic web pages Learning & Development Team Telerik Software Academy](https://reader035.vdocuments.us/reader035/viewer/2022070410/56649f1c5503460f94c3348c/html5/thumbnails/28.jpg)
Homework (2)1. Write a script that selects all the div
nodes that are directly inside other div elements
Create a function using querySelectorAll()
Create a function using getElementsByTagName()
2.Create a function that gets the value of <input type="text"> ands prints its value to the console
3.Crеate a function that gets the value of <input type="color"> and sets the background of the body to this value
4.*Write a script that shims querySelector and querySelectorAll in older browsers