INFT132 093 07 Document Object Model

INFT11/71-132 Web Applications Document Object Model Dr Michael Rees School of Information Technology mrees@bond.edu.au

HTML Document Object Model • The DOM is an abstract model that defines the interface between HTML documents and application programs—an API • Documents in the DOM have a tree structure (see Firebug/IE8) • A language that supports the DOM must have a binding to the DOM constructs • In the JavaScript binding, HTML elements are represented as objects • Element attributes are represented as properties: – <input type = "text" name = "address"> is represented as an object with two properties, type and name, with the values ―text" and "address" © 2009 Michael Rees Web Applications 2

HTML Document Object Model • A standard object model for HTML • A standard applications programming interface (API) for HTML • Platform- and language-independent • A W3C standard • The HTML DOM defines the objects and properties of all HTML elements, the methods (interface) to access them, and the events generated • In other words: a standard for how to get, change, add, or delete HTML elements © 2009 Michael Rees Web Applications 3

JavaScript Execution Environment • DOM window object represents the browser window which displays documents • All global variables are properties of window • Implicitly defined window properties: – document displays page content – frames: an array of frame object © 2009 Michael Rees Web Applications 4

Document Properties • forms: an array of references to the forms of the document, and each form – elements array, which references the form’s elements • anchors array of named link positions • links array of <a> tags • images array of <img> tags © 2009 Michael Rees Web Applications 5

DOM Nodes <html> • The entire document is a document node <head> • Every HTML element is an element node <title>My title</title> • The text in the HTML elements are text nodes </head> • Every HTML attribute is an attribute node <body> • Comments are comment nodes <h1>My header</h1> <a href="url">My link</a> </body> </html> © 2009 Michael Rees Web Applications 6

Parents, Children, Siblings • In a node tree, the top node is called the root • Every node, except the root, has exactly one parent node • A node can have any number of children • A leaf is a node with no children • Siblings are nodes with the same parent © 2009 Michael Rees Web Applications 7

DOM Node Properties Some of the common properties: • x.innerHTML - the text value of x • x.nodeName - the name of x • x.nodeValue - the value of x • x.parentNode - the parent node of x • x.childNodes - the child nodes of x • x.attributes - the attributes nodes of x © 2009 Michael Rees Web Applications 8

DOM Methods Some DOM methods: • document.getElementById(id) - get the element with a specified id • document.getElementsByTagName(name) - get all elements with a specified tag name • x.appendChild(node) - insert a child node to x • x.removeChild(node) - remove a child node from x © 2009 Michael Rees Web Applications 9

Example <body> <p id="intro">Hello World!</p> <script type="text/javascript"> var introNode = document.getElementById("intro"); document.write(introNode.firstChild.nodeValue); </script> <body> © 2009 Michael Rees Web Applications 10

Functions and Events Example <head> <script type="text/javascript"> function Change () { document.getElementById("p1").innerHTML = "New text!"; document.body.style.backgroundColor = "lavender"; document.getElementById("p1").style.color = ―red"; document.getElementById("p1").style.fontFamily =― Arial"; } </script> </head> <body> <h1 id="p1">Hello world!</h1> <input type="button" onclick="Change()" value="Change" /> </body> © 2009 Michael Rees Web Applications 12

Events and Event Handling • An event is a notification that an action has occurred, either with the browser or performed by the user • When the event occurs an event object is created • An event handler is a script that is executed in response to the appearance of an event • The process of connecting an event handler to an event is called registration • Event examples: – A mouse click – A web page or an image loading completely – Mousing over a hot spot on the web page – Selecting an input box in an HTML form – Submitting an HTML form – A keystroke © 2009 Michael Rees Web Applications 13

Events and Tag Attributes Event Tag Attribute Event Tag Attribute blur onlblur mousedown onmousedown change onchange mousemove onmousemove click onclick mouseout onmouseout dblclick ondblclick mouseover onmouseover focus onfocus reset onreset keydown onkeydown select onselect keypress onkeypress submit onsubmit keyup onkeyup unload onunload load onload W3Schools Event Reference © 2009 Michael Rees Web Applications 14

DOM 2 Event Model • So far the DOM 0 and 1 event models were described • DOM 2 Event Model: – event handlers (listeners) associated with nodes – multiple handlers for same event allowed on single node – event object created at the target node in the DOM – capture phase starts at root and descends to target triggering event handlers on the way – any listener on target node triggered – bubble phase works way up tree to root again triggering handlers on the way – any handler can stop further propagation © 2009 Michael Rees Web Applications 15

INFT132 093 07 Document Object Model

0 comments

Notes on slide 1

Favorites, Groups & Events