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...
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
 
greatadams01 profile image
Great Adams

thanks for the reminder

Collapse
 
rcarrasquillo19 profile image
Roberto Carrasquillo

Clear and brief 👍🏼

Collapse
 
gormelof profile image
Ömer Faruk Görmel

Thanks for this simple article!