Review of the DOM Node properties and methods Some ways of accessing nodes Appending, copying and removing nodes Event handling – Inline – Scripting – DOM2 Topic 4b: Event Handling and the DOM By the end of this lecture you should : - understand the benefits of the DOM -- know the node properties and methods -- be able to manipulate HTML content by accessing and changing the content of nodes -- Understand the basis of event handling -- be able to implement basic event handlers and listeners.

Topic 4: The DOM and event handling Review of the DOM Node properties and methods Some ways of accessing nodes Appending, copying and removing nodes Event handling Inline Scripting DOM2 Review: What is the DOM? What are the two key concepts behind the DOM?

Topic 4: The DOM and event handling Review of the DOM Node properties and methods Some ways of accessing nodes Appending, copying and removing nodes Event handling Inline Scripting DOM2 Recall the DOM treats all HTML pages as a collection of objects arranged in a hierarchy

Topic 4: The DOM and event handling Review of the DOM Node properties and methods Some ways of accessing nodes Appending, copying and removing nodes Event handling Inline Scripting DOM2 The HTML document from the perspective of the DOM

Topic 4: The DOM and event handling Review of the DOM Node properties and methods Some ways of accessing nodes Appending, copying and removing nodes Event handling Inline Scripting DOM2 Node properties

Topic 4: The DOM and event handling Review of the DOM Node properties and methods Some ways of accessing nodes Appending, copying and removing nodes Event handling Inline Scripting DOM2 Node methods

Topic 4: The DOM and event handling Review of the DOM Node properties and methods Some ways of accessing nodes Appending, copying and removing nodes Event handling Inline Scripting DOM2 So why do we bother with the properties and methods of nodes?

Topic 4: The DOM and event handling Review of the DOM Node properties and methods Some ways of accessing nodes Appending, copying and removing nodes Event handling Inline Scripting DOM2 EXAMPLE – walking the DOM. Link to the HTML file which shows the code of the Example Example –click the link to run it in a browser and choose view source (in Firefox) or Open the example file in notepad to see the code

Topic 4: The DOM and event handling Review of the DOM Node properties and methods Some ways of accessing nodes Appending, copying and removing nodes Event handling Inline Scripting DOM2 Accessing nodes on the tree: The document.getElementById() Method Link to the HTML file which shows the code of the Example Link to the HTML file which shows the code of the Example – click the link to run it in a browser and choose view source (in Firefox) or Open the example file in notepad to see the code

Topic 4: The DOM and event handling Review of the DOM Node properties and methods Some ways of accessing nodes Appending, copying and removing nodes Event handling Inline Scripting DOM2 Accessing nodes on the tree: Link to the HTML file which shows the code of the Example Link to the HTML file which shows the code of the Example – click the link to run it in a browser and choose view source (in Firefox) or Open the example file in notepad to see the code The document.getElementsByTagName() Method

Topic 4: The DOM and event handling Review of the DOM Node properties and methods Some ways of accessing nodes Appending, copying and removing nodes Event handling Inline Scripting DOM2 To modify the DOM (i.e. append, copy or remove elements) it is useful to know the DOM methods below:

Topic 4: The DOM and event handling Review of the DOM Node properties and methods Some ways of accessing nodes Appending, copying and removing nodes Event handling Inline Scripting DOM2 Easy way to modify the contents of an element: Example 1: Retrieving the contents of two paragraphs on an HTML page Example 1: Retrieving the contents of two paragraphs on an HTML page – the script grabs the content of two paragraphs and displays them in upper case at the bottom of the original paragraphs. Example 2: Changing the text after user interaction - click the links to run examples in a browser and choose view source (in Firefox) or Open the example file in notepad to see the code The innerHTML Property and the Element’s Content

Topic 4: The DOM and event handling Review of the DOM Node properties and methods Some ways of accessing nodes Appending, copying and removing nodes Event handling Inline Scripting DOM2 Creating new elements on the fly: ExampleExample– the element is created first and then appended to the document The createElement() method and createTextNode() method The insertBefore() method allows you to insert a child node before a specific node (called a reference node). If the reference node is null, this will insert the node at the end of a list of child nodes. The format is insertBefore(newElement, targetElement) Example

Topic 4: The DOM and event handling Review of the DOM Node properties and methods Some ways of accessing nodes Appending, copying and removing nodes Event handling Inline Scripting DOM2 Creating new elements on the fly: Example setAttribute() method creates a new attribute for an element. If an attribute with that name (nodeName) already exists in the element, it is replaced by the new one.

Topic 4: The DOM and event handling Review of the DOM Node properties and methods Some ways of accessing nodes Appending, copying and removing nodes Event handling Inline Scripting DOM2 Recall: What is an event? Consider: What are the main methods by which a user makes input?

Topic 4: The DOM and event handling Review of the DOM Node properties and methods Some ways of accessing nodes Appending, copying and removing nodes Event handling Inline Scripting DOM2 Recall: What is an event? Consider: What are the main methods by which a user makes input? What does the user interact with? A list of standard events in javascript can be found here: asp See also ExampleExample of inline and scripting

Topic 4: The DOM and event handling Review of the DOM Node properties and methods Some ways of accessing nodes Appending, copying and removing nodes Event handling Inline Scripting DOM2 DOM 2 – the flow of events

Topic 4: The DOM and event handling Review of the DOM Node properties and methods Some ways of accessing nodes Appending, copying and removing nodes Event handling Inline Scripting DOM2 DOM 2 – the flow of events- how bubbling works

Topic 4: The DOM and event handling Review of the DOM Node properties and methods Some ways of accessing nodes Appending, copying and removing nodes Event handling Inline Scripting DOM2 DOM 2 – how capturing works Example

Topic 4: The DOM and event handling Review of the DOM Node properties and methods Some ways of accessing nodes Appending, copying and removing nodes Event handling Inline Scripting DOM2 DOM 2 – Stopping or cancelling event flow Example Event methods

Topic 4: The DOM and event handling Review of the DOM Node properties and methods Some ways of accessing nodes Appending, copying and removing nodes Event handling Inline Scripting DOM2 DOM 2 – Event listeners ExampleExample of event listener The addEventListener Method This method takes three arguments: 1. The event type to listen for (mouseover, click, etc.). 2. A function to be executed when the event is fired. 3. A Boolean (called useCapture) of true or false to specify the event propagation type: true to turn on event capturing and false to turn on event bubbling (the most cross-browser-compliant way is false). The addEventListener Method This method takes three arguments: 1. The event type to listen for (mouseover, click, etc.). 2. A function to be executed when the event is fired. 3. A Boolean (called useCapture) of true or false to specify the event propagation type: true to turn on event capturing and false to turn on event bubbling (the most cross-browser-compliant way is false). Using this within the Handler the this keyword, when used with W3C event handlers, is a reference to the HTML element from which the event handler was fired, giving you easy access to the element. ExampleExample of multiple events ExampleExample of removing listeners

Review of the DOM Node properties and methods Some ways of accessing nodes Appending, copying and removing nodes Event handling – Inline – Scripting – DOM2 Topic 4b: Event Handling and the DOM By the end of this lecture you should : - understand the benefits of the DOM -- know the node properties and methods -- be able to manipulate HTML content by accessing and changing the content of nodes -- Understand the basis of event handling -- be able to implement basic event handlers and listeners.