Javascript Dom Manipulation | Javascript Tutorial For Beginners

Поділитися
Вставка
  • Опубліковано 29 лис 2024

КОМЕНТАРІ • 236

  • @developedbyed
    @developedbyed  5 років тому +135

    Thank you everybody! Hopefully I covered some of the basics for you well enough!
    I will strive to do better on my next series for sure!
    Exciting things are on the way!

    • @i27tony29
      @i27tony29 5 років тому +2

      I enjoyed this series a lot, please make more content like this but maybe do other frameworks (react) or libraries(bootstrap)! Thanks!

    • @apriljoyaltiche3298
      @apriljoyaltiche3298 5 років тому

      Super duper helpful sir Ed! All are clear. Hope you make more video tuts. Thanks a lot!

    • @CreativeSequence
      @CreativeSequence 5 років тому

      Sir i am waiting for more indepth videos

    • @subbu2677
      @subbu2677 4 роки тому

      I should say thanks to you for covering essential concept in less time

    • @ahmedabbas_forweb5774
      @ahmedabbas_forweb5774 4 роки тому

      Ok, your explain is very goooooooooooooooooooooooooooood...

  • @seanspence2289
    @seanspence2289 4 роки тому +25

    Man, I've been searching a long time now for someone to explain with CLARITY. This was EXACTLY what I was looking for. I'm so excited I've FINALLY got the FOUNDATION to javascript. Looking forward to those projects. The Best! Keep doing what you doing. Your approach is right, Dev Ed!

  • @harryjamesdesign
    @harryjamesdesign 2 роки тому +6

    Ed your energy and ability to explain JS simply is beyond anything I have found on YT so far! Thank you for this amazing content!

  • @thekizmerr6827
    @thekizmerr6827 3 роки тому +7

    This man deserves a beer. Finally got the hang of it! Thanks :)

  • @martinmclean5985
    @martinmclean5985 4 роки тому +7

    Great series. Love the way you tie it all together with "..and this is how you use it." examples. I have been studying for a few months but this is the first time i understand how it all works. Well played, Ed for the Win.

  • @tannerbarcelos6880
    @tannerbarcelos6880 5 років тому +3

    already knowing python and c++ i was able to breeze this whole series in like an hour (since a lot of the things you perfectly explained were review of course (just a little new syntax only) and by far, you are better than any professor i have had. I am learning front end development on the side so that i can gett an internship soon so that when i graduate cs next year, i can actually go into a roll where i want to be all my life! Thank you for everything and i look forward to reviewing your other tutorials and playlists!

  • @readingplaylists495
    @readingplaylists495 3 роки тому +1

    I love how you explain everything slowly and don't leave anything out. Great!

  • @aimanjaafar457
    @aimanjaafar457 5 років тому +1

    Ed, thank you very much. I finished the Node.js videos and now I am here because I want to start with the front-end of the website I am building. Thank you again

  • @erdemoz2187
    @erdemoz2187 4 роки тому +18

    You're so good! You've made JS so easy and fun to learn!

  • @afolabimojeed
    @afolabimojeed Рік тому

    I have been learning JavaScript for a while now without a proper understanding, Your videos give me hope. thanks

  • @julesbarryjohnson9789
    @julesbarryjohnson9789 3 роки тому

    Wow thanks, I have looking for this for such a long time.
    All I've been seeing is just people making "tutorials" whene really it was just a copy
    and paste process. Thanks for the help, very much appreciated.

  • @anjaliaron5749
    @anjaliaron5749 4 роки тому

    The best way to learn JS. These are the only videos that made me understand JS. Thank you so much.

  • @wadeatamim3230
    @wadeatamim3230 5 років тому +2

    Watched the video => Like => subscribed . You have high teaching skills, thanks.

  • @guardianguardian7133
    @guardianguardian7133 4 роки тому +4

    Perfect way to learn what you really will need, this course is awesome

  • @Ninja-cn6kj
    @Ninja-cn6kj 3 роки тому +2

    ur voice is so soothing we feel relaxed while studying

  • @defi-fundscryptoandtech2024

    it was an amazing ride with you ser, more of the projecct based tutorial all the way

  • @HatersMakeMeFAMAS
    @HatersMakeMeFAMAS 4 роки тому

    The add before this video literally told me that I'm learning the wrong way online to try to sell me his online course people are such acam artists these days good video keep it up

  • @jvin10
    @jvin10 5 років тому +2

    Thank you very very much bro this helped me a "LOT" cause very confuse about Dom manipulation that's why I can create any dom manipulation this helps me to answer the question in my mind. I hope you may upload more videos bro.

  • @alejandromedina1019
    @alejandromedina1019 2 роки тому

    Anybody else wanna give this man a hug?

  • @n.dclothing8529
    @n.dclothing8529 3 роки тому

    Yo dude the way you explain things is amazing don't stop your videos!
    I'm going to refer your page to all of my dev friends !!

  • @gloriareyes6556
    @gloriareyes6556 4 роки тому +32

    Very helpful but Woo! gets confusing towards the end. Tho, you are a great teacher!

    • @ti-jesuadeleke5563
      @ti-jesuadeleke5563 2 роки тому

      Yeah, he kind of rushed the end but the other parts were ok.

  • @HammerBummer-ro9ik
    @HammerBummer-ro9ik 4 місяці тому +1

    Useful Course Developedbyed

  • @mzDododeejay
    @mzDododeejay 5 років тому +27

    Oh you are so cute! Helping me learn JS much quicker!!

    • @tomisinergy4963
      @tomisinergy4963 4 роки тому

      You are cute too

    • @johncena-li1bl
      @johncena-li1bl 4 роки тому

      @@spike2565 this is comment section not your whatsapp group

    • @ahmdm2036
      @ahmdm2036 4 роки тому +1

      @@johncena-li1bl man. he is literally commenting.

  • @joshuajoshua334
    @joshuajoshua334 2 роки тому

    You are the best teacher in the world.

  • @lakshyachopra_
    @lakshyachopra_ 4 роки тому +1

    Best Javascript Tutorial👏👏

  • @dikshayadav921
    @dikshayadav921 3 роки тому

    I must say that you teach incredibly well.... I love this video and your way to teaching as well... Thanks a tonn.

  • @juicy9592
    @juicy9592 3 роки тому

    Dude i just love to see you doing these video's so "au natural" its so funny and i actually learn from you. Im doinmg a ucademy fullstack course and i hate it. next course im buying of you. thank you so much

  • @abhinayganu
    @abhinayganu 2 роки тому

    I am crazy in js dom tutorail problems I have understood that Developedbyed is very easy way...

  • @GauthamKrishnan99
    @GauthamKrishnan99 2 роки тому

    Stuff went from 0-100 real fast with this video! xD

  • @alakdam3970
    @alakdam3970 5 років тому

    You are far far better than my teacher.

  • @mubasharahmad8628
    @mubasharahmad8628 4 роки тому +1

    Thanks Dev Sir; you really clreared my all concept about JS,thnaks alot sir.

  • @bhavikakapadia2462
    @bhavikakapadia2462 5 років тому +1

    Thank you for making javascript tutorial. Learing a lot

  • @louie_sevilla
    @louie_sevilla 5 років тому +1

    I laughed at 2:27... Who's Butt did you like to change? haha
    I love your content. I started self-learning web development in May and your tutorials are very clear and fun. Please don't stop making videos.

  • @yogenderpanwar846
    @yogenderpanwar846 3 роки тому

    Thanks Dev for awesome series.. Learn a lot from this series. One more thing your starting music is so amazing. Feeling so much excitement and energy when listen.

  • @BobcatSchneidermann
    @BobcatSchneidermann 3 роки тому

    Hi Ed, thank you so much for making this series. If you ever find yourself in Copenhagen, Denmark I would be delighted to buy you a beer!

  • @josefino401
    @josefino401 4 роки тому

    thanks men I dont speak english but you explain very clearly

  • @priyanshugupta7904
    @priyanshugupta7904 4 роки тому

    I don't have words... Great video
    ..i can't do much but atleast watch full ads on your video that might help me contribute little bit 😉

  • @frankc.astle214
    @frankc.astle214 4 роки тому +2

    Thank you, I really needed this!!!! You rock!!!!

  • @aminozuur
    @aminozuur 3 роки тому

    Thank You! Holy cow, you made me feel powerful making a simple to do list :). Keep it up brother.

  • @reinaogo7161
    @reinaogo7161 4 роки тому

    Wow You are just an amazing teacher!
    Simple and precise!!

  • @kayan_dev
    @kayan_dev 5 років тому

    the best developer on youtube ever :)

  • @matheusyamasato5662
    @matheusyamasato5662 4 роки тому

    Thanks!! Your videos are awesome! I've been learning a lot with u! Greetings from Brazil

  • @sythe263
    @sythe263 3 роки тому

    You delivered things as I wanted. Thanks.

  • @nagasesanagasesa7026
    @nagasesanagasesa7026 4 роки тому +1

    you have being my new idol
    i also just see your "unhappy confession" video, but i think u r just in problem of "searching problem" (which mean u in condition of u thinking "not have a problem" is "a problem", which not good and will make u always have problem)
    just want to saying u r great, so take it easy

  • @tnl8758
    @tnl8758 5 років тому

    Ugh...the ending is tricky, but I'll rewatch it till it becomes natural. Great teaching, regardless!

  • @saandesh32
    @saandesh32 5 років тому

    It's easier to use querySelector but get getElementsByClassName maybe faster in terms of compilation ... maybe useful :)

  • @zg1370
    @zg1370 4 роки тому +1

    thank you so so much! great video and your explanation is clear and easy to understand :)

  • @nethmiwelgamvila
    @nethmiwelgamvila 4 роки тому

    Youre the most funny guy I ever see in this youtube 😎 and also a good youtuber good teacher ❤️

  • @chamnil8666
    @chamnil8666 4 роки тому

    Thank you so much Sir,you are a great teacher.I learnt a lot from this video as well as from your other videos.Keep up the good work.

  • @Me-og5iy
    @Me-og5iy 4 роки тому +4

    7:22 next tutorial: how can you land ur mouse on the button so fast?

  • @Co0lGwindolyn
    @Co0lGwindolyn 3 роки тому

    Thank you.. this is so helpful for me as a beginner, you explained it well!

  • @shashankp5236
    @shashankp5236 2 роки тому

    Bro struggles with variable and class names. That's how you know he's legit

  • @julivanespi
    @julivanespi 4 роки тому

    Thanks for the tutorial so for Ed! Loving the content!

  •  2 роки тому

    Awesome videos. Made me get your course to learn more and more. Thanks a lot for the great work.

  • @hodakhosravi946
    @hodakhosravi946 3 роки тому

    you are a great teacher. I learned and enjoyed it a lot.

  • @codevalley9511
    @codevalley9511 4 роки тому

    Thank you for explaining in easiest way

  • @zoltankarpati9828
    @zoltankarpati9828 5 років тому

    Hi Ed! Thank you, your video series. It helps a lot for me , so please make more like this. Just keep going! I want to learn more tricks :)

  • @tienlythanh9615
    @tienlythanh9615 4 роки тому

    Awesome. This serie is very helpful. Thank guy 😍😍😍

  • @aliabukahil
    @aliabukahil 3 роки тому

    Thank you for spreading your knowledge.

  • @samnax316
    @samnax316 4 роки тому

    I cried for couple of minutes, because you didnt put the link in discription for the collection of events as you mentioned in the video

  • @tamiriscristine4604
    @tamiriscristine4604 4 роки тому +1

    thank you friend, it was very helpful for me :)

  • @k3tna
    @k3tna 5 років тому

    Proper one on DOM, thanks.

  • @ashfepranto3759
    @ashfepranto3759 3 роки тому

    Thanks Ed.This video was very helpful..😍

  • @baka_1887
    @baka_1887 4 роки тому

    we want more tricks+i like it it"s just so cool

  • @samoh6084
    @samoh6084 3 роки тому

    I really like this dude.

  • @mukkuvaninthesea771
    @mukkuvaninthesea771 5 років тому

    I follow your each and every vdos... tq

  • @Me-og5iy
    @Me-og5iy 4 роки тому +1

    7:22 idk anything but that needs talent!

  • @LilyEvans1996
    @LilyEvans1996 5 років тому

    Love this. Very helpful! Thanks for sharing :)

  • @ulysseslindblad3069
    @ulysseslindblad3069 4 роки тому

    Great tutorial!
    Really enjoyed it!

  • @guerrierekang5694
    @guerrierekang5694 5 років тому

    Thanks Dev you are amazing!

  • @ss_GOAT
    @ss_GOAT 5 років тому +1

    Last part adding new lines didn't worked for me.. I have tripple checked my code, but can't find anything different to your code.

  • @akritiyadav3873
    @akritiyadav3873 3 роки тому

    I really need this.

  • @jasonhensley7762
    @jasonhensley7762 3 роки тому

    This was a really good lesson!

  • @shaik_mohammedimran
    @shaik_mohammedimran 5 років тому +1

    Hi, thanks for this video,
    May I know, which theme & font family r u using in ur vscode?

  • @dianao.moremissd
    @dianao.moremissd 3 роки тому

    Thank you for this video!!

  • @GeekBastion
    @GeekBastion 3 роки тому

    hit two stones with one? i thought it was hit two birds with one stone XD
    anyways great video, you are to me the best teacher when it comes to this subject :)

  • @khalidharraz3250
    @khalidharraz3250 5 років тому

    Thank you so much for that great explanation

  • @adityarai9146
    @adityarai9146 4 роки тому +1

    Uncaught TypeError: itemList.appendChild is not a function
    at HTMLButtonElement. (app.js:18)
    (anonymous) @ app.js:18 plz correct this one

  • @dontbeafraid5313
    @dontbeafraid5313 5 років тому

    Beautiful stuff out here

  • @hieuchu7115
    @hieuchu7115 Рік тому

    Good video! Can you please tell me the name of the vscode theme? I love

  • @Allformyequine
    @Allformyequine 3 роки тому

    This is super! YAY!

  • @gheemail
    @gheemail 3 роки тому

    Im trying to add an element to the li, but also apply some mouseover and mouseout events to the same list. The mouse events are not getting applied to the newly added element. Please help
    const newName = document.querySelector(".my-name");
    const magicButton = document.querySelector(".magic-button");
    magicButton.addEventListener("click", function () {
    newName.classList.add("magicCSS");
    });
    const userListObj = document.querySelector(".names-list");
    const newUserText = document.querySelector(".add-user");
    const addUserBtn = document.querySelector(".add-user-btn");
    addUserBtn.addEventListener("click", function () {
    const newUserLi = document.createElement("li");
    const newUserVal = document.createTextNode(newUserText.value);
    newUserLi.appendChild(newUserVal);
    userListObj.appendChild(newUserLi);
    newUserText.value = "";
    });
    const userList = document.querySelectorAll(".names-list li");
    for (user of userList) {
    user.addEventListener("mouseover", function () {
    this.style.color = "red";
    });
    user.addEventListener("mouseout", function () {
    this.style.color = "black";
    });
    }

  • @manoj34498
    @manoj34498 5 років тому

    Awesome explanation 👌👌👌👌👌

  • @manchesterutd7518
    @manchesterutd7518 2 роки тому

    Great teaching!

  • @calvinebun-amu5397
    @calvinebun-amu5397 4 роки тому

    Awesome content. Thank you so much!

  • @alessandrospiridigliozzi7943
    @alessandrospiridigliozzi7943 3 роки тому

    at 14:02 is there a specific reason why LI was written all uppercase? Will it not work if written in lowercase?

  • @TheNamesJT
    @TheNamesJT 4 роки тому

    Umm, at 10:00 i had to add do console.log(this.textContent); because in Firefox it was showing so much stuff that made an Li element and not the value in between the html brackets.

  • @gulzatkoshbaeva2162
    @gulzatkoshbaeva2162 2 роки тому

    Super helpful !

  • @anil_kapse
    @anil_kapse 3 роки тому

    What about dom manipulation before rendering or dom parsing or dom loading.
    Is it possible?

  • @l2ob1222
    @l2ob1222 5 років тому

    These have helped me so much thank you very much

    • @l2ob1222
      @l2ob1222 5 років тому

      Can't wait for the project based tutorials

  • @maksymyankivskyy2419
    @maksymyankivskyy2419 5 років тому

    Seriously thank you very much your tutorial is very clear and helpful +1 subscrib !!!!!!!

    • @developedbyed
      @developedbyed  5 років тому

      Thank youuu! Hope you enjoy the series.

    • @CreativeSequence
      @CreativeSequence 5 років тому

      @@developedbyed sir i haved coverd this series whats the next step where can i learn more in depth

  • @bumbledex
    @bumbledex 5 років тому

    Still looking the link you said you were going to put in the description below for all the actions you can do with addEventListener

  • @MrBaysah
    @MrBaysah 5 років тому +2

    Hey Ed Thanks for these Tutorial. I was following the tutorial, but I am getting an error "userlist.appendChild is not a function" Below is my js code.
    const userlist = document.querySelectorAll('.userList');
    const listInput = document.querySelector('.list-input');
    const addList = document.querySelector('.addListBtn');
    //get value from inputs
    addList.addEventListener('click', function(){
    //create Li
    const newLi = document.createElement('LI');
    const liContent = document.createTextNode(listInput.value);
    //Add the input value inside the li
    newLi.appendChild(liContent);
    //Attached the li to the ul
    userlist.appendChild(newLi);
    });
    What am I doing wrong?

    • @developedbyed
      @developedbyed  5 років тому +1

      Just use document.querySelector no queryAll on user list. Should work!

    • @mgxm2217
      @mgxm2217 4 роки тому

      @@developedbyed oh god thank you i was driving crazy

    • @adityarai9146
      @adityarai9146 4 роки тому

      @@developedbyed thank you man i was stuck on this for around 3 hr thank you for saving my day

    • @hieuchu7115
      @hieuchu7115 Рік тому

      @@developedbyed Good video! Can you please tell me the name of the vscode theme? I love

  • @red1io
    @red1io 4 роки тому

    thank u bro. great tutorial

  • @Skfitnessgarage
    @Skfitnessgarage 4 роки тому

    Hey Dev Ed i have completed the last videos but I m facing the problem in this as I am not getting the output as you got .
    the console says there is problem with code and it in the if loop, says that there is problem when I begin with if(user of userList)
    it say you have error from of userList but I have tried the code as it is . so help with this if you can and thanks for the superb content on Javascript.

  • @aminkoolivand2790
    @aminkoolivand2790 5 років тому

    you are so fantastic!!!!

  • @two-zero
    @two-zero 5 років тому

    Thanks for this tutorial :D

  • @fredrick2017
    @fredrick2017 3 роки тому

    Idk if its just me or someone else as well. I am getting this error: 127.0.0.1/:1 Refused to apply style from '127.0.0.1:5500/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
    I have copied everything letter by letter in both the files by Ed. Still no idea why this would be happening. I looked around the internet and it seems to be a pathing issue. But I might also have skipped something while installing Js. Please help.

    • @fredrick2017
      @fredrick2017 3 роки тому

      nvm figured it out. I didnt have the script attached im a fool.

  • @spieces7497
    @spieces7497 4 роки тому

    Which tutorial covers the 'this' keyboard?

  • @mujtabamujeeb786
    @mujtabamujeeb786 5 років тому +2

    text.classList.add("change); return an error saying app.js:4 Uncaught TypeError: Cannot read property 'classList' of null
    at app.js:4
    (anonymous) @ app.js:4

    • @niskarshaghimire2176
      @niskarshaghimire2176 4 роки тому

      trying to learn in quarantine.. i am facing the same problem

    • @bibushsinghgc
      @bibushsinghgc 4 роки тому

      @@niskarshaghimire2176 add. => above =>