DEV Community

Cover image for 7 Javascript Methods That Aid DOM Manipulation

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...
Collapse
 
nickytonline profile image
Nick Taylor

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!

Collapse
 
desoga profile image
deji adesoga • 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.

Collapse
 
kysuga profile image
Kyle Masuga

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!

Collapse
 
odddev profile image
Kai • 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.

Collapse
 
lexlohr profile image
Alex Lohr

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

<div id="oneId"></div>
// evil js
oneId = 'haha!';

console.log(oneId);
Collapse
 
odddev profile image
Kai

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

What's the point?

Thread Thread
 
lexlohr profile image
Alex Lohr • 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.

Thread Thread
 
odddev profile image
Kai • 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

Collapse
 
drozerah profile image
Drozerah • Edited

I have recently discovered the Element​.get​Bounding​Client​Rect() , 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 ?

Collapse
 
desoga profile image
deji adesoga

Yes it is and good find too.

Collapse
 
kdraypole profile image
Kobe Raypole

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".

Collapse
 
desoga profile image
deji adesoga • 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.

Collapse
 
gypsydave5 profile image
David Wickes

Ahaha - that Nietzsche quote - the DOM as a Dionysian abyss. That gave me a laugh.

Just a quick one on language - in the title it should be 'Aid' not 'Aids'.

Collapse
 
desoga profile image
deji adesoga

Glad you enjoyed it. And yes, I've changed the title. Thanks for pointing that out.

Collapse
 
muescha profile image
Michael

the slug is still the old title with s

Collapse
 
lexlohr profile image
Alex Lohr

Nice summary. I'm only missing .insertBefore(newChild, referenceElement) and the child-/sibling-/parentNode reference properties in this list.

Collapse
 
desoga profile image
deji adesoga

Maybe I'll add that in part 2.

Collapse
 
motilola profile image
Ola

Thanks Deji. A couple of things became clearer to me after reading this. Saved to be read again and again :)

Collapse
 
desoga profile image
deji adesoga

Glad to know It was of help to you.

Collapse
 
ygorbunkov profile image
ygorbunkov • Edited

How come there's no place for insertAdjacentHTML() in this article?

Collapse
 
lexlohr profile image
Alex Lohr

Because it is a security problem, very much like .innerHTML, when you use it to add arbitrary HTML.

Collapse
 
rafyramy94 profile image
Rafy Ramy

This is awesome, thanks for sharing 😊

Collapse
 
kylegalbraith profile image
Kyle Galbraith

Great post Deji, a lot of great tips in here! Keep up the awesome work.

Collapse
 
desoga profile image
deji adesoga

Thanks very much Kyle. I really appreciate your feedback.