Objectives:
Maniputating the DOM
Event handling:
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.
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.
The main interface that all elements implement.
Element.querySelector()Document.getElementById()Document.createElement()Node.parentNode, Node.nextSibling, Node.previousSiblingNode.textContentNode.appendChild(), Node.removeChild(), Node.replaceChild()A collection of nodes. Typically useful for iterating over individual elements within the collection.
Element.querySelectorAll()Document.getElementsByTagName()Document.getElementsByClassName()The main interface for manipulating elements in a web page.
Common properties and methods:
Element.attributes, Element.classList, Element.className, Element.innerHTMLElement.querySelector(), Element.querySelectorAll(), Element.matches()Element.getAttribute(), Element.setAttribute(), Element.toggleAttribute(), Element.removeAttribute()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 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:
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.Example:
<button>Click Me</button>
<script>
const btn = document.querySelector('button');
btn.addEventListener('click', function(event) {
alert(event.target.tagName);
});
</script>
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>