1/8
JavaScript
DOM Manipulation
Mastering DOM Manipulation with JavaScript 🚀💡
Jimmy Ramani
@jimmyramani
2/8
Selecting Elements
document.documentElement :
Represents the root element (<html>) of the document.
document.head :
Represents the <head> element of the document.
document.body :
Represents the <body> element of the document.
p l e :
Ex am
Jimmy Ramani
@jimmyramani
3/8
document.querySelector :
Selects the first element that matches the given CSS selector.
p l e :
Ex am
document.querySelectorAll :
Selects all elements that match the given CSS selector.
p l e :
Ex am
Jimmy Ramani
@jimmyramani
4/8
document.getElementById :
Selects an element by its unique ID.
p l e :
Ex am
document.getElementsByTagName :
returns a live HTMLCollection that directly
reflects changes made to the DOM.
other not automatically update
Selects all elements that match the given CSS selector.
p l e :
Ex am
Jimmy Ramani
@jimmyramani
5/8
document..getElementsByClassName :
Selects elements by their class name.
p l e :
Ex am
document..getElementsByName :
Selects elements by their name attribute.
p l e :
Ex am
Jimmy Ramani
@jimmyramani
6/8
Creating and Inserting Elements
Jimmy Ramani
@jimmyramani
7/8
Deleting Elements
remove() :
parentElement.removeChild() :
we've added an event listener to the .btn element that removes the
message element when the button is clicked. You can also achieve the
same result using the parentElement.removeChild() method ...
Jimmy Ramani
@jimmyramani
8/8
Playing all above
with UI
just click on
https://codepen.io/jimmyramani
Go to
View Source Code
Go
to
Js File
Uncommenting the code
last
& start practising
to
Go
Jimmy Ramani
@jimmyramani
WAS THIS
HELPFUL?
Share with a friend who needs it!
Jimmy Ramani
@jimmyramani
