DOM Manipulation: Manipulating HTML Elements using Javascript

Published in

HTML Beginners

3 min readDec 12, 2021

In our previous chapter: DOM Manipulation: Intro to DOM, we learned how to access HTML Elements using Javascript. In this chapter we will access these elements and manipulate them to our needs.

First Thing First: Getting to know your HTML Element Object

Each HTML Element Object has lots of properties and methods attached to them which can be overwhelming at first. We can change the style, the text content, nodes etc. In our case, we will find the properties we need and use them as desired. A complete list of can be found in MDN Web APIs Docs. I will update this chapter as we go along and practice on various properties and methods.

Starting Strong

To get started with our DOM Manipulation first we need to create an index.html and main.js file and link the. The code can look like like this:

index.html

<body>  <h1>DOM Manipulation using JS</h1>
  <p class="description">DOM Manipulation makes everything imagined possible</p>
  <p id="contact">Javascript</p>  <script src="./main.js"></script></body>

and in main.js

window.addEventListener('load', () => {  // target our elements
  const header = document.querySelector('h1')
  const description = document.querySelector('.description')
  const contact = document.querySelector('#contact')
  // and querySelectorAll targets all elements of the same target
  // we have two p tags in out html
  const paragraphs = document.querySelectorAll('p')})

NOTE: It is better to wrap our JS codes in window.addEventListener(‘load’, handler) so that our JS does not execute untill our HTML Document is ready.

Reading and Changing The Contents

in our main.js if we console log our header we will find something like this:

now if we log header.textContent then:

as we can see, it is just as the content inside our heading tag. Now to change the element’s content we can simply re-assign the text content. In our main.js file:

header.textContent = 'Updating the heading using JS'

if we open our HTML file in browser we can see the text content of our heading is updated.

Updating The Style of an Element

In the above example we figured how to update the content of our HTML Document. In this example we will change the style of our element.
Each element have a property called style which can be used to update the look of an element. First start with an example, we will change the font size of our heading to 3rem. It is as easy as this:

header.style.fontSize = '3rem'

and we can see the HTML Document style is updated:

let’s change a few other properties.

header.textContent = 'Updating the heading using JS'
header.style.fontSize = '4rem'
header.style.color = '#ff0000'
header.style.textAlign = 'center'
header.style.fontVariant = 'small-caps'

and for the result: