DEV Community

A Beginners Guide To DOM Manipulation

Iqra Masroor on February 21, 2020

DOM or Document Object Model is a representation of the web page or document, which can be modified with a scripting language such as JavaScript ac...
Read full post
Collapse
 
mkenzo_8 profile image
mkenzo_8 • • Edited

Just a little fix in:

document.getElementByClass("className")
//This method only returns the child element of the specified Class.
Enter fullscreen mode Exit fullscreen mode

Fixed:

document.getElementsByClassName("className")
//This method returns all elements inside the whole document by the class you specified.

document.getElementById("someElement").getElementsByClassName("className")
//It works in all elements of the DOM, this will return all elements by the class you specify inside the element you want
Enter fullscreen mode Exit fullscreen mode

Good job 😄

Collapse
 
iqramqra profile image
Iqra Masroor •

Thanks, just updated it.

Collapse
 
studmuffin30 profile image
studmuffin30 •

good one

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt • • Edited 
document.body.append(element)
//this method gets the element to appear on the page.

This one is quite special method, and is harder explain than

document.querySelector('body').append(element)

Well, document.body is a special DOM object traversal.

Collapse
 
pris_stratton profile image
pris stratton •

Does anyone know of a book that focuses solely on the DOM and methods associated with the Document object? MDN is a great resource but I don’t find the guides on the DOM that helpful.

Collapse
 
getrich47 profile image
Raymond Idengeli • • Edited

Search for Dom tutorial by Brad Traversy on youtube, he pretty much covered all you need and I hope this is not coming too late.

Collapse
 
pris_stratton profile image
pris stratton • • Edited

Thanks man. I will take a look! 😎

By the way, his name feels very appropriate: traversing the DOM with Brad Traversy.

Thread Thread
 
getrich47 profile image
Raymond Idengeli •

Haha!.... You welcome

Collapse
 
07harish profile image
Harish Kulkarni •

Good article. Also if we have frequent Dom manipulation, good way to manipulate the Dom is by using createDocumentFragment(API) for better performance.

Collapse
 
mrsaeeddev profile image
Saeed Ahmad •

Great Article Iqra!. Keep writing.

Collapse
 
iqramqra profile image
Iqra Masroor •

Thanks!

Collapse
 
zaimazhar profile image
zaimazhar •

I've seen videos covering this topic, I can't keep up with them but this one is just simple and direct to the point. Now I can go and re-watch those videos with a better fundamental of this subject.

Thank you. 🤘

Collapse
 
rcarrasquillo19 profile image
Roberto Carrasquillo •

Clear and brief 👍🏼

Collapse
 
gormelof profile image
Ömer Faruk Görmel •

Thanks for this simple article!

Collapse
 
greatadams01 profile image
Great Adams •

thanks for the reminder