Manipulating the DOM with Javascript series part 1

This is the begining of a series on the DOM in Javascript.

The DOM is one topic that sounds ambiguous and strange to many beginner developers. I was once in that boat some years ago, until my zest to unravel the mystery behind the popular acronym DOM led me to research both on youtube and other useful resources. In this article series, I am going to dive a little deep while discussing the DOM with practical examples based on my research and experience working as a front-end engineer.

Below is what we shall be discussing in this article:

• The meaning of the HTML DOM,
• DOM methods and
• DOM events.

What is the HTML DOM?

The DOM is an acronym which stands for Document Obeject Model.

According to Wikipedia, The DOM (Document Object Model) is a cross-platform and language-independent interface that treats HTML document as a tree structure with branches containing nodes, and each node is an object representing a part of the document.

The DOM contains methods and events which are used together to perform actions on it.

DOM methods

We already know the DOM and what it stands for, one pressing question you might have now is what is a method? A method in programming simply means an action you can do or something that is used to take an action. A good example of an action is “adding or deleting an HTML element”. Since the DOM is a tree, the DOM methods allow programmatic access to that tree.

Moreover, there are several DOM methods, below is a list of the essentials ones you will most likely come across in your day to day development.

1. getElementById.
2. getElementByTagName
3. createElement.
4. appendChild.
5. removeChild.
6. getAttribute.
7. setAttribute
8. querySelector
9. querySelectorAll etc.

DOM events

DOM events are actions that occur as a result of a change in state of the elements of a DOM tree. Since the DOM is a tree, anything that happens as a result of a change or interaction with that tree is refer to as the DOM events.

Basically, there are several DOM events, which are grouped into various categories. Some of them are listed below:

1. Mouse events: A good example of mouse events are: click, double click(dbclick), mousedown, mouseenter, mouseleave, mousemove, mouseover, mouseout, mouseup etc.
2. Drag and drop events: Examples of the drag and drop events are: drag, dragenter, dragstart, dragleave, drop etc.
3. Media events: Examples of the Media events are: canplay, duration-change, complete, pause, play, playing, waiting etc.
4. Keyboard events: Some examples of the keyboard events are: keyup, keydown, keypress. etc.

Inconclusion, part 2 of our DOM series, will involve taking a practical approach, write some code and see how these methods and events come to play each time a user interacts with the DOM.

Below are some reference links:

https://developer.mozilla.org/en-US/docs/Web/Events

https://www.w3schools.com/jsref/met_document_queryselector.asp

Feel free to connect with me on Twitter using this link and follow our official Twitter page using this. Kindly leave a comment below. Thanks and see you in the next article.