JavaScript DOM Manipulation: How to DOMinate the DOM with JavaScript

Do you want to learn how to use JavaScript to create dynamic and interactive web pages? Do you want to know how to access and modify the elements of the document object model (DOM) with ease? Do you want to DOMinate the DOM with JavaScript? If you answered yes to any of these questions, then this video is for you! In this video, you will learn everything you need to know about the DOM and how to manipulate it with JavaScript. You will learn what the DOM is, how it works, how to select and change elements, how to create and remove elements, how to handle events, and much more. By the end of this video, you will have a solid understanding of the DOM and how to use JavaScript to make your web pages more dynamic and interactive. So what are you waiting for? Watch this video now and start DOMinating the DOM with JavaScript!
Instructor in this video: Sarthak Sharma
Visit our website: sheryians.com/
Socials:
Instagram: / sheryians_coding_school
Facebook: / sheryians.community
Telegram: t.me/sheryiansCommunity
LinkedIn: / the-sheryians-coding-s...
Discord: / discord
Peace ✌️
#javascript #javascriptdom #advancedjavascript #programming #javascripttutorials #webdevelopment #coding #frontenddevelopment #javascripttraining #webdevelopment #javascriptmastery #handsonlearning #codingjourney #javascriptbasics #javascripttutorial #programming #webdevelopment #javascriptcode #learnjavascript #codingjourney

[@abhirajcode3829]

-->😎Dom->Document Object Model
---Represent structure of web page (Using Tree like structure)
----Each element - node in tree
---These nodes can be accessed, modified, and manipulated using programming languages like JavaScript
-->Pillers Of DOM (4)
----1.Selection of the elements
-----querySelector
------document.querySelector("#id_name/.class_name/element") ; //select only fist
------document.querySelectorAll("#id_name/.class_name/element") ; //select many element and return nodeList
-------we need to use forEach method get access of each element of nodeList(set Of Many Element) ;
--------elem.forEach(function(e){ //logic }) ;
-----idSelector
------document.getElementById("id_name") ; // don't use (#)
-----classSelector
------document.getElementsByClassName("class_name") ; // don't use (.)
----2.Changing HTML
------elem.innerHTML = "kuchh bhi" ; // will change original content
----3.Changing CSS
------elem.style.property = "value" ; // use camelCase for property -(backgroundColor , color )
----4. Event Listener
-----elem.addEventListener("event" ,function(){ // changing css/HTML }) ;
-----events -> Mouse Events:click, dblclick, mousedown, mouseup, contextmenu,mouseout, mousewheel, mouseover
Touch Events:touchstart, touchend, touchmove, touchcancel
Keyboard Events:keydown, keyup, keypress
Form Events: focus, blur, change, submit
Window Events: resize, scroll, load, unload, hashchange

[@nishantchoudhary8301]

Thanks 😊

[@Ratikant]

thanks abhiraj

[@harleenkaurmakhija9935]

Thankyou abhiraj :)

[@hackarmy4875]

Lage raho bhai tarraki pe.... contect info please

[@sachinandanprasad7618]

thank YOu

[@someknow9099]

only 40 min
this guys explain basic of dom in simple way ,, Thanks Bro

[@HeySkidee]

bhai ye literally bhai mai kya bolu itna sahi channel h
i wish ye channel mujhe pehle mil jaata
boht time bach jaata mera. web dev itni sahi chiz h aur mai bhaagta tha isse btao
yaha aake sahi me chize samjhi, bnana sikhra hu

[@user-mm1zu3dr9l]

masha allah kya baat hai.
doms bhout difficult tha per ab " ayaa hai itna sukoon".

[@HarshVardhan-tk3ej]

Everyone on youtube talks of DOM, but first time someone made it understandable. Thanks!

[@Cosin69_]

The best teacher in the world

[@lokeshguru1980]

You are right bro.

[@codewithsunil6981]

Yes bro

[@digitaltrainer7240]

very true!!

[@shortflicks2]

True

[@TechSaaz12]

Bro mana YT pr 10 videos watch ki but jasa Topics ko ap na Cover kia hai Kamal hai Yr . Best Way of teaching

[@sushilsoni2460]

i saw your channel first time and u are really an amazing teacher u just clear my doubts in a single video thankyou so much for making this video i will suggest your channel to all of my friends
😄😄

[@gamerz7307]

Thank you for the most awaited topics covered including DOM and Async JavaScript. Thank you!

[@xen0076]

This guy teaches what needs to be taught, no more extra gyan nothing straight to the point, keep it up brother enjoying the videos

[@desimastiinbihar6070]

Thank you for the most awaited topics covered including " DOM" and Async JavaScript. Thank you bro

[@mahmudkhan3972]

There was a small logic in this video, this logic was taught very well by this brother. Thanks to him, Love from Bangladesh.❤

[@shaileshwakpaijan9303]

async function(){
let nextVideo = await fetch('sheryians next video')
console.log(nextVideo)
}
Thanks for teaching us❤😊

[@CoderBro-gj5nu]

You people are just wow I mean how easily can you teach us. All the efforts you guys are putting in the filed of Web Development is just incredible. I would love to see you guys reaching at the top. Take a ❤

[@sumankashyap156]

The Javascript content is the best out there. i really learned a lot. Thank you so much for your hardwork

[@AtmaramTrivedi-fo1qt]

I have seen so many videos but you explained the concepts in very simplest form .Thanks you to clear my concepts. 🎉

[@vkmuffins]

#4pillarsDestroyed
This channel is like a blessing to me! The way they teach by breaking each and every topic into it's simplest form...wow! This guy taught how to write logic in js to a dumbo like me! He's a GENIUS! I can't thank enough to you and all other teachers! I know this channel will grow a lot in the future!
LOVE U ALL!

[@abhishekcode]

Great teacher in IT field..Just present the topic in a easy way..Apko dekh kr hi padhne ka confidence aa jata ase hote hai teacher..Thanks for helping us all of you..Keep posting learning videos.. Please come with full stack project using React and node❤❤❤❤❤🎉🎉🎉

[@Journeybegin]

Concept clear of DOM in best way... Thank you 😊

[@anshgupta7213]

Easy and point to point explaination i love your videos. This channel is so underrated.Thank you for clear my all concepts.

[@Vkk456]

Thank you very much sir for your efforts ❤ This is the best channel for learning web development. Your lectures really help us 🙏

[@its_anshu9398]

Marvellous videos !! Please maintain this simplicity in your every video . We like your content bcoz of your simple explaining nature , so always keep the content simple and in depth ✨✨

[@jahanzaibiftikhar5971]

next video kidr hai
?

[@deborshi2644]

your videos are amazing i wasnt able to learn anywhere but you guys made it soo easy

[@carnivalking8824]

Although I know Js DOM , but I need to revise and This is the best video which cover a lot of topics of JS in Less than 40 minutes ... Thank you Guyss

[@Abhishekh1516techboy]

Thank you for the most awaited topics covered including " DOM" and Async JavaScript. Thank you bro 💕

[@aim-frontend]

Bro please also start react js playlist 😊

[@pramodkumar-km7lk]

yes

[@aksh2902]

Yes pls

[@hrishikrajsahu4272]

Yess

[@mudasirmehdi8234]

Yes

[@ArshadAli-tp1or]

34:58 34:59 35:00 35:00 35:01

[@artistyogeshkumar]

never imagined coding this interesting, amazing teaching

[@namansinghpatel9958]

Thanks a lot man, you are saving a lot of my time during internship preparation

[@maazshaikh7905]

Woah! I requested for this in the previous video of advanced JS and here it is. Thank you so much!

[@ankitaggarwal8556]

Thank you very much for such a informative and valuable video. From the bottom of my heart I respect the level of your knowledge.

[@nabajyotikarmakar3287]

Have to tell ki bande m dam to hai bhai thnks dil s ....meh aksar cmnt nhi krta but aj kra hu mujhe sahi m acha lga vdeo samjh m a gya bohot ache s thnx ❤

[@devilslord1864]

After watching your video it became easy..... Thanks for teaching it.

[@2ameridiem]

Just completed the video. It's perfect for beginners. I understood everything so thanks a bunch..! Please bring the intermediate Dom course. I'm eager to learn more from you.

[@ajaydevgan24]

I am currently learning dom and here your video comes I am super excited to learn Dom by the sheriyans coding school

[@vishalkumar-rq3qo]

Accha samjhe tu bhai, we want this kind of teacher in our life.

[@salmanimon4114]

you guys make everything looks so easy. Thank you

[@sahilpatoliya8306]

Indepth concept and easiest method of teaching thanks sheriyans 💯❣️👍

[@sachinnarwade1359]

❤❤bhaiya and Sheryians team..
Dilse respect for your consistency...
Love your way of teaching..
Simplifying complex concepts in Desi style ❤
Asynchronous javascript toh bhai 🔥🔥🔥🔥 hai...

[@chinmayshete8575]

Best teacher's in the UA-cam ❤ history

[@SANIYAKHAN-hf6dk]

Great teacher I'll never seen tbis tutorial at UA-cam god bless you shreyans team 🎉❤

[@lyf_struggler_]

Mtlb i haven't words for uhh ... You all the guys are amazing and wht the content you are giving to us ... Thanks a lot 🙏🙏
And love sheriyans codings school...❤❤

[@wondermovies6768]

CodeWithHarry se yahan pe convert huwa hun bohart hi badiya samjha ya great channel ❤️

[@Aishnayak21]

gzzb video bnate ho aap bawa❤‍🔥❤‍🔥❤‍🔥❤‍🔥❤‍🔥❤‍🔥

[@sarthak.kamblebtech2021]

Sir it would be great if you add time stamps in videos. By the way thank you for the great content. ❤❤

[@amitgorai1202]

Good content ❤ brother. And teaching style 😂👌. One question when will you launch React js series??

[@MELODY_music_MASTER_pop]

bahut barya and lovely+

[@nirmalakharel5858]

wow!!bhai clear ho gaya DOM❤

[@shadowgamingultimate4159]

Love your work ❤❤❤

[@user-rh1nn5qj7t]

"Wow, this video is truly amazing! I couldn't stop watching from beginning to end. Great job!"
"I've been looking for content like this for ages. Thank you for sharing such valuable information!"
"Your editing skills are on point! The transitions and visuals are so captivating."
"This video is so inspiring! I feel motivated to [insert action or goal inspired by the video]."
"The humor in this video had me in stitches. You're a natural comedian!"
"The way you explained [specific topic] was so clear and easy to understand. You're an excellent teacher."
"I can't get enough of your channel. Every video is a treat!"
"The music choice in this video is spot-on. It really enhances the overall experience."
"I appreciate how you tackled such an important issue in this video. It's crucial that more people see this."
"Your enthusiasm is infectious! Watching your videos always brightens my day."

[@unknowntuber1550]

I'm missing this harsh bhaiya in recent videos 😢

[@gursaveksingh3457]

05:11 DOM manipulation is the name of the whole thing.
10:22 JavaScript DOM Manipulation: How to Select Elements in JavaScript
15:33 Changing CSS properties using JavaScript DOM manipulation.
20:44 Learn about JavaScript DOM Manipulation
25:55 Learn JavaScript DOM manipulation and the importance of understanding frontend development
31:06 Learn how to change the background color and use conditional logic with JavaScript
36:17 Understanding DOM manipulation using JavaScript
41:22 DOM manipulation with JavaScript: Selecting elements by id and class and changing inner HTML and text content.

[@meena4261]

Only watch your videos daily and learn frontend development 😊

[@aim-frontend]

As always great explanation bro ❤

[@Vinay_Kumar_Sahani]

Best bhaiya

[@Vinay_Kumar_Sahani]

Best 😅

[@avadheshojha2150]

Feeling positive about the channel, actually it removes my unnecessary worrying that things are hard in life!

[@Abhishek-eb8qs]

This channel is one of the best channels for studying

[@ashishkabirpanthi5540]

I don't know who is lovbabbar who is codewithharry.i only know harsh bhaiya❤❤❤❤

[@Allgaming_rebvu]

But you now her name 😂😂😂😂😂

[@ashwani4760]

This series is completely next level🔥🔥🔥

[@NeerajYadav-zj5zh]

keep doing guys
It will take time but you will rock according to this attitude, keep doing, love to support you

[@cristiancamilogiraldoriver6355]

"Hola! Me gusta mucho el contenido de su canal pero noté que este video está en otro idioma. Sería genial si pudieran agregar subtítulos en español o una traducción al español del audio. Hay muchos hispanohablantes como yo que estamos interesados en este tema pero que lamentablemente no entendemos. Agregar subtítulos nos permitiría disfrutar plenamente de sus excelentes videos. ¡Muchas gracias por considerar agregar traducción para que su gran contenido pueda llegar a más personas!"

[@anuragsarkar8773]

los subtítulos estarán allí pronto

[@exexex_tension7630]

A ella le gusta la gasolina
(Dame más gasolina)
Cómo le encanta la gasolina
(Dame más gasolina)
A ella le gusta la gasolina
(Dame más gasolina)

[@harshwardhanpatil813]

Gracias por tus comentarios, ya estamos trabajando en ello.

[@pavankewlani-jp9tl]

Helloooooo bachoooooooo

[@babulhoque3190]

Great bhaiya,I was searching such a good content from many days....... finally I got.Thank you......

[@niyamatalimallick7158]

#4 Pillars Destroyed

[@OfiicialDravin]

The way of teaching is AWESOME

[@shubhamrathod9249]

no one explained me this good, I've watched 3 videos before this Dom tutorial and all of them were around 1 hour long

[@Vaibhav.7786]

Innovative way of teaching , loved it bro 🙌🙌🔥🔥💖💖

[@D-ream101]

Han Han bhai gaya. Keep uploading lecture like this. very helpful.

[@NandaYKSalunkhe]

Very well explained! Thanks!🙏

[@omkargurav9849]

Thanks for explaining with such a ease and understandable way

[@sajangautam6216]

excellent video bhaiya

[@user-in3nf4uv3u]

Thanks for your simplicity towards teaching

[@ganeshbajureli4995]

best teaching techniques . i can learn coding enjoying it ..thanks
Sheryians Coding School

[@SonaBeau_13]

Here is a brief overview of what I understand about the 4 Pillars of DOM from this lecture : -
// Four Pillar Of DOM
var x = document.querySelector("h1");
// Selection of an Element
var x = document.querySelector("h1");
// Changing HTML
var x = document.querySelector("h1");
x.innerHTML = "Selection of an Element";
// Changing CSS
var x = document.querySelector("h1");
x.style.color = "blue";
x.style.backgroundColor = "black";
// Event Listner
var x = document.querySelector("h1");
x.addEventListener("click", function () {
x.innerHTML = "Changed HTML and CSS with the help of Event Listner";
x.style.color = "pink";
x.style.backgroundColor = "black";
});

[@abishpradhan6973]

Love your teaching style and concept you have teacher Sir thank you❤❤❤

[@anjulrahangdale879]

Bhai yar 4 din se samj nhi rha tha thanks yar video banane k lie ❤

[@entirethings7095]

Ome of the greatest video of all time for dom beginners ❤❤❤

[@khushalShingala]

Aapka video dekhne ke baad DOM manipulation esay lag ne laga.

[@pratikmahadik4493]

Amazing video, simple explanation, Thanks!

[@memewala490]

helpfull video for my starting dom manupulation study

[@kaushiksen2190]

Wonderful explanation. Thank you so much

[@faizanbeg7921]

Thank you so much your teaching method is too good.❤

[@ayushdixit4036]

#4PillarsDestroyed best vedio bhaiya❤

[@radhekrishnastatus.1]

sir apki jitni bhi video dekhi har video se kuch na kuch seekhta hun sachme sir bas ek baat bht bekaar lagi voh hai ki mene video dekhne ke baad jab apka channel dekha toh subs bht kam dikhe aur par itna mast content hai ekdum premium jaise sir jldi se 1million ho jaaye bbs me toh yahi chta hun ❣💝

[@shiladityabanerjee2683]

thank you very much sir for helping us like your child to learn these precious thing

[@suhana8468]

The only best video on Dom ❤

[@sayandeepsadhukhan5016]

Maja ageya.....Lots Of Love😍😍😍😍😍😍😍

[@tafizurrahman7342]

Thank you so much for valuable information about DOM 🙂

[@malwaredev33]

Nice Video, brother, very helpful content about Javascript DOM.

[@priyanshumahur2656]

You teach DOM in a good manner❤❤.

[@mrBohhotBada]

you people just rocked thanks guys for giving us a good funny and learning enviroment

[@shoaibakhter5448]

Achcha padaya. Sarthak bhai apka bahut bahut shukriya

[@abhishekchoudhary303]

Sir we want all web development course you are a genius

[@nirmalakharel5858]

Aapfka teaching method bhuthi achha hai bhai

[@hayyan9087]

shartak your way of explaing is very good

[@_NAUGHTY.EDITOR]

Best teacher on UA-cam for sure ❤️🚀🫂

[@user-gg2oy1vz3w]

thank for this video...this video is very useful me and all public

[@pint1-ed7mz]

bhai bhot acha lecture tha ,next b esy hi

[@itz_Lovepreett]

Thank you very much sir for your efforts ❤

[@MohdTahirMajid-ym5uf]

Bahut Tagda!!!

[@SecondaryOk]

Great Video Easy To Understand...

[@maheh360]

Thank you so so so much bhaiya bohot easy and acchese samjh aya😍😍🤩❤👑you are best