8 Fundamental DOM Operations You Must Know
Learn the basics of DOM and web page interactivity with JavaScript
DOM (Document Object Model) allows you to read and modify HTML documents with the help of JavaScript. In this article, we’ll see how to perform basic DOM operations with JavaScript.
Let’s start with what DOM actually is.
What is DOM
According to MDN Docs,
The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content.
The DOM represents the document as nodes and objects; that way, programming languages can interact with the page. We can access these objects using other languages also, like python.
DOM is not part of the JavaScript language, but is instead a Web API used to build websites.
Now that we know what DOM actually is, let’s see how can we interact with it using JavaScript.
1. Select HTML Elements
There are a number of ways to select/access an HTML element with JavaScript.
We can select an HTML element based on its id.
const element = document.getElementById(‘id’)We can select an element based on its class.
const elements = document.getElementsByClassName(‘class')This selects all the elements with the given class name.
We can also select elements by using CSS selectors with querySelector() .
const element = document.querySelector(‘selector’)This selects the first element which matches the selector.
We can select by id(‘#id’) and class name(‘.class’) using querySelector, too.
const elements = querySelectorAll(‘selector’)This selects all the elements that match the given CSS selector.
2. Create an HTML Element
We can create a new HTML element using JavaScript with createElement().
const p = document.createElement(‘p’)This creates a paragraph element.
We can also set id and classes with,
p.id = idp.classList.add(‘class’)
To write text in between the paragraph element,
p.innerText = ‘This is an example’3. Append the created HTML Element
Although we can create HTML elements in JavaScript, those won’t be reflected inside the HTML document automatically. To add them to the HTML document, we can do
document.body.append(p)or
document.body.appendChild(p)The difference between the both is that append() can add multiple elements at once, but appendChild() can add only one element.
We can append elements to tags like div, section, etc. using a similar method.
4. Attributes
We can read and add attributes to the HTML elements using getAttribute() and setAttribute() .
const img = document.querySelector(‘img’)
img.getAttribute(‘src’)
This will read the src attribute on the img tag.
const img = document.querySelector(‘img’)
img.setAttribute(‘width’, “300”)
This will set the width attribute of the img tag to 300.
We can also access these attributes without using getAttribute() and setAttribute(). Just img.src and img.width = ‘300’ will work the same way as the above.
5. Data attributes
Sometimes, we need to set some custom attributes to the elements. Data attributes are such attributes. Attributes with the syntax data-* are considered data attributes and are easily accessible in JavaScript.
<articleid="electric-cars"data-columns="3"data-index-number="12314"data-parent="cars">...</article>
To read these attributes, we can do
const article = document.querySelector(‘article’)
article.dataset.parent // returns ‘cars’article.dataset.indexNumber // returns ‘12314’
To set the data attributes,
article.dataset.colorName = ‘red’This will result in,
<articleId="electric-cars"data-columns="3"data-index-number="12314"data-parent="cars"data-color-name = “red”>
...</article>
6. Styles
We can change the styles of the element with JavaScript using style.propertyName .
const p = document.querySelector(‘p’)p.style.color = ‘red’
This changes the colour of the text inside the p tag red.
The CSS property names are camel-case, so background-color will become backgroundColor, and so on. And the values are always strings.
7. Event Listener
We can add events on the HTML elements using javaScript with addEventListener() .
const button = document.querySelector(‘button’)
button.addEventListener(‘click’, () => {// do something})
This adds a click event on the button, and when the button is clicked, it executes the code inside of the callback function.
If we want to add the global pre-defined events like click, hover, etc. We don’t need to use addEventListener(). We can just do
button.onclick = () => {// do something}
and it will work the same as using addEventListener().
8. Remove an HTML Element
To do so, we can use remove() and removeChild().
const p = document.querySelector(‘p’)p.remove()
This removes the p tag from the HTML document.
const p = document.querySelector(‘p’)document.removeChild(p)
This also removes the p tag from the HTML document.
The difference in both methods is that in the removeChild() method, we need the reference of the element being removed and the reference of the parent element. But in the case of remove(), we only need a reference of the element being removed.
There are much more that we can do with DOM, and we’ll discuss them in later article.
Until then, keep learning!
