Let's start by explaining what is DOM
Here is W3C definition
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
In simple terms, DOM is representation of all objects on web that are subjected to changes - content or structure change.
DOM manipulation
Most of us can agree on this,
- Document Object Model plays very important role for web developers out there.
- There is never ending debate which library does better job at it, but that is a topic for another post
Regardless of which library you use it is important to know where it all comes from. JavaScript is more then capable to do DOM manipulation without any libraries.
Well then, let's go over some examples
Manipulating DOM using JavaScript can be done with few methods out there. I will go over few basic ones.
Selecting element
1. getElementById()
document.getElementById('elementID');
returns element with the specified ID
2. getElementsByClassName()
document.getElementsByClassName('elementClass');
returns a collection of all elements in the document with the specified class name, as an HTMLCollection object. The HTMLCollection object represents a collection of nodes. The nodes can be accessed by index numbers.
3. document.querySelector()
document.querySelector('#elementID');
//or
document.querySelector('.elementClass');
Both return element with the specified id or class
Similar to this method is this one,
document.querySelectorAll('.elementClass');
returns a collection of all elements in document with the specified class name, as an HTMLCollection object.
Basic DOM/Element manipulation
Now when we have our element selected, let's see what we can do with it
1. removeChild()
element.removeChild(childElement)
Removes child of targeted element
2. remove()
element.remove()
Removes targeted element
3. appendChild()
element.appendChild(elementToAppend)
Adds new element to targeted element ( it can be anything, image, text, whole div etc... )
4. addEventListener()
element.addEventListener('click', function doThings(){ ... });
Assigns event listener to element ( click, mouseenter, mouseleave etc ... )
5. Styling - adding css
element.style.color = 'red'
Sets font color of element to 'red', you can also use this to set other css properties
There is a lot more to it, maybe I will follow it up and expand in another post.