ACIT 1620 Week 11 Notes

# ACIT 1620 ## Week 11 ---  Objectives: - Maniputating the DOM - DOM structure - DOM interfaces - Event handling: - Event target and event object - Handling DOM events ---  # Document Object Model (DOM) The DOM is a representation of a document (e.g. web page) in memory which is exposed to user-authored scripts for direct manipulation. It is a hierarchical tree of nodes, rooted in a single root node which is the document itself. ---- There is also a document element, which for web pages is the `html` element, and is the parent of all other elements in the document. ``` Document.documentElement ``` ---- Each node, with the exception of the root node, has exactly one parent, and one or more ancestor node. Conversely, most nodes can have one or more children and grandchildren. ---- Everything in the document is a node, including elements, attributes, textual content, and comments. The DOM provides multiple interfaces specifying properties and methods used to access and manipulate any node in the document. ---  ## Elements and events The DOM is essentially a collection of interfaces which enable traversal of the DOM tree, access and manipulation of elements as well as the various events which these elements can emit/receive and are available for handling by scripts. ---  ## DOM interfaces ---  ### Node The main interface that all elements implement. - Getting a node: - `Element.querySelector()` - `Document.getElementById()` - `Document.createElement()` ---- - Common properties and methods: - `Node.parentNode`, `Node.nextSibling`, `Node.previousSibling` - `Node.textContent` - `Node.appendChild()`, `Node.removeChild()`, `Node.replaceChild()` ---  ### NodeList A collection of nodes. Typically useful for iterating over individual elements within the collection. - Getting a nodelist: - `Element.querySelectorAll()` - `Document.getElementsByTagName()` - `Document.getElementsByClassName()` ---  ### Element The main interface for manipulating elements in a web page. Common properties and methods: - `Element.attributes`, `Element.classList`, `Element.className`, `Element.innerHTML` ---- - `Element.querySelector()`, `Element.querySelectorAll()`, `Element.matches()` - `Element.getAttribute()`, `Element.setAttribute()`, `Element.toggleAttribute()`, `Element.removeAttribute()` ---  ### DOMTokenList Represents a list of token such as an element's class names or attributes. A few `Element`'s properties such as `Element.classList` and `Element.attributes` implement it. Provides methods for easy manipulation of this list: - `add()`, `remove()`, `replace()`, `toggle()`, `entries()`, `forEach()`, `keys()`, `values()` ---  ## Events Events are the way we describe actions taking place on a page and how these actions are handled. Eg: mouse clicks, key presses, form data entry, mouse drag, form submission, exactly ---- All DOM interfaces descend from the `EventTarget` interface, which means that everything on the page can be a source of events. ---- There are two steps involved in handling DOM events: - Register an even listener - This is how you specify which type of event you want to handle - You can register multiple listeners for different types of events on the same element ---- - Register event handlers - These are functions which will be called when an event for which a listener has been registered is fired - The event handler receive as its first parameter an object encapsulating data about the event - The `target` property of this event object is a reference to the element when the event fired, which is very handy in terms of accessing the element's data. - The function is passed as an argument when registering the event listener ---- Example: ``` <button>Click Me</button> <script> const btn = document.querySelector('button'); btn.addEventListener('click', function(event) { alert(event.target.tagName); }); </script> ``` ---  ### Browser default behaviors It is important to note that browsers have some default behaviors for common types of events: - Loading a new page when a link is clicked - Sending a form to the server when a submit button is clicked It is possible to override these behaviors in many case and provide your own desired behavior. ---- Example: ``` <form> <input type="text" name="name" id="name"> <button>Submit</button> </form> ``` ``` <script> const form = document.querySelector('form'); form.addEventListener('submit', function(event) { // Override default behavior event.preventDefault() alert(form.name.value); // or alert(event.target.name.value) }); </script> ``` ---  ## Next Readings - [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) - [Web Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API)