Download
1 / 20
200 likes | 434 Views
DOM. Photo from http://www.flickr.com/photos/emraya/2861149369/. Documents as Objects. DOM. When a browser reads an HTML file, it must interpret the file and render it onscreen. This process is sophisticated.
E N D
DOM Photo from http://www.flickr.com/photos/emraya/2861149369/ Documents as Objects
DOM • When a browser reads an HTML file, it must interpret the file and render it onscreen. This process is sophisticated. • The DOM is an abstract model that defines the interface between HTML text and applications that need to process HTML . The Tree is a DOM instance. graphics from Yahoos Douglas Crockford.
DOM • The DOM is a model of the HTML document. • Standardized by w3c • A definition of the objects and supported methods • Standards • DOM 0 is supported by all JavaScript enabled browsers but has no specification. • DOM 1 was released in 1998 • DOM 2 was released in 2000 • DOM 3 is the latest approved standard
DOM • From W3C: • The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page. • "Dynamic HTML" is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated. graphics from Yahoos Douglas Crockford.
DOM Data Types • I recommend checking out. Some of the API descriptors in this presentation are taken from that site. • https://developer.mozilla.org/en/DOM/document#Introduction
Overview document document. documentElement document.body The DOM specifies that a variable named "document" is globally accessible. This variable has certain attributes. graphics from Yahoos Douglas Crockford.
Document • The document variable is the HTML document. This variable has a number of convenience properties. Here are some of them: • document.anchors • document.applets • document.embeds • document.forms • document.frames • document.images • document.plugins • document.scripts • document.stylesheets • These are all collections of things. They are either deprecated or are generally viewed as poor alternatives.
Finding an ELement • By the id of the element • var node = document.getElementById('x13'); • By the class name • var node = document.getElementsByClassName('well'); • By the tag name • var node = document.getElementsByTagName('div'); • By the name • var node = document.getElementsByName('movies');
Element Properties • Elements have properties with values that can be programmatically changed. • node.setAttribute('propName', propValue); • Examples • node.setAttribute('style', 'background-color:red;'); • node.setAttribute('id', 'x83');
Creating Nodes in the DOM • You must go through a document (i.e. the root element) in order to create nodes that can be used in that document. • document.createElement(tagName) • document.createTextNode(text)
Creating/Deleting Nodes in the DOM • The new nodes are not part of the document. They have simply been created. • node.appendChild(newNode) • node.insertBefore(newNode, newNodesSibling) • How to replace a child node on a node? • node.parentNode.replaceChild(newNode, node) • How to delete a node in the DOM • node.removeNode(childNodeToRemove) • It is often helpful to take a chunk of HTML and replace it by some other chunk of HTML. This can be done by • node.innerHTML = newHTMLtext.
HTML Form Events http://en.wikipedia.org/wiki/DOM_events
Registering Handlers • The supported attributes of a DOM element determine what events the element can respond to • The attribute can be directly set to a script (using a script). <head> <script type="text/javascript"> function helloWorld() { window.alert( "Hello World" ); } window.onload = helloWorld; // register a handler document.onclick = helloWorld; // register a handler document.onclick = null; // remove a handler </script> </head> <body> <p>Hello World!</p> </body>
Registering Handlers • Elements can also have the handler specified via HTML • <element onclick=“dothis()” /> • Write an HTML page that contains text elements. Whenever the user clicks on a text element, the background color of that element changes to a randomly determined value. As an added feature – have some text elements jump around on the screen when clicked in addition to changing their color
DOM Events Example • Develop an HTML page that allows users to order a pizza. Use ‘onclick’ handling for the radio buttons • Users must select one topping • Sardines • Anchovies • Lemons • Pumpernickel • Users must select one cheese • Provolone • American • Blue • Cheddar • Some combinations of topping/cheese are so repugnant that it would be unethical to sell them. Users receive a warning if selecting unethical combinations. The selection is nonetheless allowed on the page. • Sardines and Cheddar • Pumpernickel and Blue • Lemons and Blue • Alternately, warn and disallow unethical combinations
JavaScript Dom Methods • User interaction (these functions block) • alert( text ) • confirm( text ) • prompt( text, default ) • Timed function calls • delayed = setTimeout( func, msec ) • executes func after msec milliseconds • repeating = setInterval( func, msec ) • executes func every msec milliseconds • clearTimeout( delayed ) • stops the timeout • clearInterval( repeating ) • stops the interval
