DEV Community

7 Javascript Methods That Aid DOM Manipulation

deji adesoga on May 06, 2019

There are no beautiful surfaces without a terrible depth. -Friedrich Nietzsche Introduction The HTML Document Object Model(DOM) is t...

Read full post

Nick Taylor • May 7 '19

Always good to demonstrate some of the basics. Another good one is HTMLElement.dataset, which allows you to access/set data-* attributes. Looking forward to your next post Deji!

deji adesoga • May 7 '19 • Edited

Thanks Nick, I appreciate your response. The foundation is very important. I wasn't aware about HTMLElement.dataset, i'll take a good look at it.

Kyle Masuga • Feb 14 '20

Deji, I just wanted to give a shout out to you and thank you for writing this post.

I came across it by chance, after reading through @fossheim's article on how she recreated a Polaroid camera with CSS (also amazing) and saw the link to your post in the footer. Your post had exactly the answer I was looking for, for my project, which was #4, so thank you!

Kai • May 7 '19 • Edited

Just a quick hint. Every DOM ID is available as a global variable out of the box.

Don't use that in actual code obviously. Just for show-casing/fiddling.

Alex Lohr • May 7 '19

Yes, but only as long as no script overwrites the global reference.

<div id="oneId"></div>

// evil js
oneId = 'haha!';

console.log(oneId);

Kai • May 7 '19

That comment is so ridiculous, you can even post it as a general reply to any JS code-including article.

What's the point?

Alex Lohr • May 7 '19 • Edited

The point here is that you probably shouldn't rely on global variables and better use the DOM methods. It is also much more probable that your IDs are overwritten by another script accidentially than DOM methods.

Kai • May 7 '19 • Edited

That's absolutely true! Never use that for actual productive code.
Just a quick tip for fiddling purposes.

Edit: Added this to my initial comment

Drozerah • May 7 '19 • Edited

I have recently discovered the Element.getBoundingClientRect() , the method give the left, top, right, bottom, x, y, width, and height of DOM element :

function myFunction() {
  var div = document.getElementById("myDiv");
  var rect = div.getBoundingClientRect();
  x = rect.left;
  y = rect.top;
  w = rect.width;
  h = rect.height;
  alert ("Left: " + x + ", Top: " + y + ", Width: " + w + ", Height: " + h);
}

`
pretty neat ! isn't it ?

deji adesoga • May 7 '19

Yes it is and good find too.

Kobe Raypole • May 7 '19

Great article! Just curious, do you have any thoughts on using plain old javascript for DOM manipulation over something like jQuery?

I've always preferred jQuery as it offers browser compatibility, simplified operations, and lots of cool features. But I have met developers who prefer to do it the "old fashion way".

deji adesoga • May 7 '19 • Edited

Thanks a lot Kobe. When it comes to DOM manipulation, I prefer using old javascript. However, it all depends on the size of the application.

If it's an application that has the potential to scale over time, then I would want to use a framework like Angular 6 or jQuery just like you've said, so as to avoid some complications over time.

The "old fashion way" could lead to a world complexity in terms of code-maintenance in the long run.