DM2 Week 4 Javascript DOM.Pptx

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) <!DOCTYPE HTML> <html> <head> <title>A web page</title> </head> <body class="home"> <h1 id="header">A headline</h1> <p>Some <strong>important</strong> text</p> </body> </html> 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 <script> </script> 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. .

DM2 Week 4 Javascript DOM.Pptx

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support