DOM and DOM Manipulation

1. DOM and DOM Manipulation Doncho Minkov Telerik Software Academy http://academy.telerik.com Technical Trainer http://minkov.it

2. Table of Contents • Document Object Model (DOM) • Querying the DOM • Traversing • DOM Events • The DOM Event Model • Common DOM Events • Debugging in JavaScript

3. Document Object Model (DOM)

4. 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 • Connects web pages to scripts and programming languages

5. 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? • Write JavaScript to interact with the DOM • JavaScript uses the DOM API (not written in JS)

6. Querying the DOM

7. Querying the DOM • Querying the DOM is simply approaches to interact with DOM objects (HTML elements) • Three general approaches: • Query a specific element • Query a collection of elements • Built in collections • Some methods are applied to document only • Some could be applied to elements

8. Querying the DOM (2) var header = document.getElementById("header"); // => DOMElement or Null if not found var inputs = document.getElementsByName( "choises" ); // => NodeList with 0 or more elements var divs = document.getElementsByTagName( "div" ); // => NodeList with 0 or more elements var popups = document.getElementsByClassName( "popup" ); // => NodeList with 0 or more elements var links = document.links; // => NodeList with 0 or more elements var header1 = document.querySelector( "#header" ); var popups2 = document.querySelectorAll( ".popup" );

9. Querying the DOM (3) • Some methods are applied to document only • Some could be applied to elements var section = document.getElementById("section"); var divs = section.getElementsByTagName("div"); var popups = section.getElementsByClassName("popup"); var header = section.querySelector("#header"); var popups2 = section.querySelectorAll(".popup");

10. Querying the DOM Live Demo

11. Traversing the DOM

12. Traversing the DOM • You are somewhere in the DOM and you need to get elsewhere • Methods for adjacent nodes • Methods for children collection // Going UP node.parentNode // parent node or null if node is document // Going DOWN node.childNodes // collection of all the child nodes node.fistChild// first node or null if none node.lastChild// last node or null if none // Going LEFT node.previousSibling // preceding node or null if none // Going RIGHT node.nextSibling// succeeding node or null if none

13. Accessing Elements through the DOM Tree – Example • Warning: may not return what you expected due to Browser differences var el = document.getElementById('div-tag'); alert (el.childNodes[0].value); alert (el.childNodes[1]. getElementsByTagName('span').id); … <div id="div-tag"> <input type="text" value="test text" /> <div> <span id="test">test span</span> </div> </div> • accessing-elements-demo.html

14. Traversing the DOM Live Demo

15. DOM Manipulation • Once we access an element, we can read and write its attributes function change(state) { var lampImg = document.getElementById("lamp"); lampImg.src = "lamp_" + state + ".png"; var statusDiv = document.getElementById("statusDiv"); statusDiv.innerHTML = "The lamp is " + state; } … <img src="test_on.gif" onmouseover="change('off')" onmouseout="change('on')" /> DOM-manipulation.html

16. Common Element Properties • Most of the properties are derived from the HTML attributes of the tag • E.g. id, name, href, alt, title, src, etc… • style property – allows modifying the CSS styles of the element • Corresponds to the inline style of the element • Not the properties derived from embedded or external CSS rules • Example: style.width, style.marginTop, style.backgroundImage

17. Common Element Properties (2) • className – the class attribute of the tag • innerHTML – holds all the entire HTML code inside the element • Read-only properties with information for the current element and its state • tagName, offsetWidth, offsetHeight, scrollHeight,scrollTop, nodeType, etc…

18. DOM Manipulation Live Demo

19. DOM Events

20. DOM Events • JavaScript can register event handlers • Events are fired by the Browser and are sent to the specified JavaScript event handler function • Can be set with HTML attributes (legacy): • Can be accessed through the DOM (legacy): <img src="test.gif" onclick="imageClicked()" /> var img = document.getElementById("myImage"); img.onclick = imageClicked;

21. DOM Events (2) • Can be accessed through the DOM (standard): • This is also called "attaching an event handler" • addEventListener doesn't work on every browser • The way to make events work everywhere is through Feature detection • Check which methods adds a handle to the event var img = document.getElementById("myImage"); img.addEventListiner("click", imageClicked, false)

22. The HTML DOM Event Model (3) • All event handlers receive one parameter • It brings information about the event • Contains the type of the event (mouse click, key press, etc.) • Data about the location where the event has been fired (e.g. mouse coordinates) • Holds a reference to the event sender • E.g. the button that was clicked

23. The HTML DOM Event Model (4) • Holds information about the state of [Alt], [Ctrl] and [Shift] keys • Some browsers do not send this object, but place it in the document.event • Some of the names of the event’s object properties are browser-specific

24. Common DOM Events • Mouse events: • onclick, onmousedown, onmouseup • onmouseover, onmouseout, onmousemove • Key events: • onkeypress, onkeydown, onkeyup • Only for input fields • Interface events: • onblur, onfocus • onscroll

25. Common DOM Events (2) • Form events • onchange – for input fields • onsubmit • Allows you to cancel a form submission • Useful for form validation • Miscellaneous events • onload, onunload • Allowed only for the <body> element • Fires when all content on the page was loaded / unloaded

26. onload Event – Example • onloadevent <html> <head> <script type="text/javascript"> function greet() {alert("Loaded.");} document.body.addEventListener("load", greet, false) </script> </head> <body> </body> </html>

27. Debugging JavaScript

28. Debugging JavaScript • Modern browsers have JavaScript console where errors in scripts are reported • Errors may differ across browsers • Several tools to debug JavaScript • Microsoft Script Editor • Add-on for Internet Explorer • Supports breakpoints, watches • JavaScript statement debugger; opens the script editor

29. Firebug • Firebug – Firefox add-on for debugging JavaScript, CSS, HTML • Supports breakpoints, watches, JavaScript console editor • Very useful for CSS and HTML too • You can edit all the document real-time: CSS, HTML, etc • Shows how CSS rules apply to element • Shows Ajax requests and responses • Firebug is written mostly in JavaScript

30. Firebug (2)

31. DOM and DOM Manipulation http://academy.telerik.com

32. Homework