DOM Manipulation – In a nutshell

Before you learn about DOM Manipulation, you need to know about DOM. Here is an easy-to-understand article on DOM.

Now that you know what DOM is, you have a right to know about DOM Manipulation.  :P

Okay, so.. let’s talk about DOM Manipulation.

The name itself defines the definition.

To manipulate HTML elements (i.e. Document Objects) is called DOM Manipulation.

Oh, I see, there a new term ‘manipulate’ pops up.

Well, let this ‘manipulate’ alone.

Generally, DOM Manipulation refers to some basic operations done with HTML elements.

We basically perform five types of operations with HTML elements. Such as –

1.     Get ( access/find/grab/catch)

2.     Set ( Change/Replace )

3.     Add

4.     Delete (Remove)

5.     Create

Like, we can get <h1> element by writing this code:

document.querySelector('h1')

Then we can set/change its text:

document.querySelector('h1') .innerText = 'This is new Heading'

Now, we can create a class attribute and add some attribute values, i.e. class names, to it:

document.querySelector('h1').classList.add('className1', 'className2')

We can also remove any class names:

document.querySelector('h1').classList.remove('className1')

So, these operational exercises as a whole are called DOM Manipulation.

Hope it makes sense to you.

Now you can go over this article titled ‘Essential Code for DOM Manipulation

’ where I tried to populate essential DOM Manipulation code.

In fact, I’m planning on making a video tutorial series about DOM Manipulation. I’ll try my best to cover A to Z of it, inShaAllah. Here is an outline of that upcoming series – An Outline of the Upcoming DOM Manipulation Video Series

If you’re interested in that series, you can keep your eyes on this YouTube channel – anSRThemeAction. You’re invited to subscribe the channel, share the video and let me know how eagerly you’re waiting for the series.