Today was another day of learning about the DOM . I forgot to mention yesterday but as expected HTML DOM elements are objects. This is to be expected because practically everything in JavaScript is an object like classes and even functions. The topics today were about nodes, events, and event listeners.

Everything in the HTML document is a node. The HTML document itself is the root node. Every HTML element is an element node. The text inside HTML elements are text nodes. Every HTML attribute is an attribute node. All comments are comment nodes.

DOM HTML tree

Every node has a hierarchical relationship with each other. The root node is the parent node meaning that it is at the very top. Every node has one parent beside the root node which has none. Nodes can have a number of children. Nodes with the same parent nodes are siblings. When a user clicks the mouse

Here are some examples of events in the DOM. When a web page has loaded, an image has been loaded, mouse moves over an element, the input field is changed, an HTML form is submitted, a user strokes a key.

Growing up playing MMORPG games like Runescape and Guild Wars, the possibilities were endless with event and event listener. Being able to create events and listen to events all of the MMORPG features instantly came to mind. Being able to use skills using certain numbers on the keyboard. Moving your character around using the arrows on your keyboard, targeting the nearest enemy etc. so many different features are possible to do.

Leave a comment

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: