1/8
JavaScript
DOM Manipulation
Mastering DOM Manipulation with JavaScript 🚀💡
Jimmy Ramani
@jimmyramani
2/8
Selecting Elements
[Link] :
Represents the root element (<html>) of the document.
[Link] :
Represents the <head> element of the document.
[Link] :
Represents the <body> element of the document.
p l e :
Ex am
Jimmy Ramani
@jimmyramani
3/8
[Link] :
Selects the first element that matches the given CSS selector.
p l e :
Ex am
[Link] :
Selects all elements that match the given CSS selector.
p l e :
Ex am
Jimmy Ramani
@jimmyramani
4/8
[Link] :
Selects an element by its unique ID.
p l e :
Ex am
[Link] :
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() :
[Link]() :
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 [Link]() method ...
Jimmy Ramani
@jimmyramani
8/8
Playing all above
with UI
just click on
[Link]
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