JavaScript: Document Object Model ATLS 3020 Digital Media 2 Aileen Pierce Document Object Model

¤ The Document Object Model (DOM) is the standard object model for HTML documents ¤ The underlying structure for all web pages ¤ Object-oriented ¤ Enables you to access and update the content, structure, and style of HTML elements ¤ The DOM provides an application programming interface for HTML documents Object-Oriented Programming

¤ In object-oriented programming an object is an entity with 3 defining characteristics: ¤ Properties – attributes or state of an object ¤ Data values ¤ Methods - an operation an object can perform ¤ behavior ¤ Events - a message an object can send ¤ things the object can do ¤ We can have a hierarchy of objects and sub- objects. ¤ Objects inherit their parents’ properties Document Object Model (DOM)

¤ Web browsers create an object model of every web page it loads. This is the Document Object Model (DOM). Document Object Model (DOM)

¤ Web browsers treat a Web page as an organized collection of tags, attributes, and text ¤ In the DOM these are called nodes ¤ Every node is an object

¤ JavaScript can manipulate the contents of a page by accessing its objects Document Object Model (DOM)

A headline

Some important text

Document Object Model (DOM) Properties

¤ objectName.propertyName accesses the value of the property. ¤ document.body.style.backgroundColor ¤ Background color of the body of a document ¤ document.title ¤ Title of the document ¤ document.URL ¤ Some properties are read only and can’t be changed Methods

¤ objectName.methodName (parameter list); calls a method.

¤ document.write(“Hi there”); ¤ We call a method to change a property of its object, or perform some operation.

¤ Parameters allow us to send data to the object that it needs to execute the method. Retrieving DOM Elements

¤ JavaScript can retrieve a node by selecting its id using getElementById() ¤ document.getElementById('header'); ¤ this returns the one element with the id ‘header’

¤ JavaScript can also retrieve tags on a page by selecting a tag using getElementsByTagName( ) ¤ document.getElementsByTagName('a'); ¤ this returns all ‘a’ elements on the page Lab

¤ Create a web page that uses JavaScript to manipulate the DOM Creating DOM Elements

¤ Dynamically create, move, and remove elements from a web page through the DOM

¤ You can create a new element using createElement() ¤ var newp=document.createElement('p'); ¤ You can create a new text node using createTextNode() ¤ var text=document.createTextNode(“Labs”);

Creating DOM Elements

¤ Once a new element is created you need to add it to the document. You can add it as a child to an existing node using appendChild( ) ¤ newp.appendChild(text); ¤ main.appendChild(newp);

Events

¤ A web page event represents some change to a web page ¤ Mouse action ¤ Button click ¤ An event handler represents what happens when an event takes place ¤ Code that is executed when a certain event is detected Events

¤ Window events ¤ load ¤ resize

¤ Mouse events ¤ click ¤ mousedown ¤ mouseup ¤ mouseover ¤ mouseout Quotes

¤ Inside the double quotes of an event handler you don’t need the tags for JavaScript.

¤ Alternate double and single quotes so they can be matched properly.

¤ Apostrophes are seen as quotes so you need to escape them with a backslash (\) ¤ Escaping characters tells JavaScript to print them and not interpret them Lab

¤ Add an event handler to your web page.