Javascript Dom Manipulation | Javascript Tutorial For Beginners 

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!

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!

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

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

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

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

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

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

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

I give up after 4 minutes. You are bad at explaining things. - You did not demonstrate what “transform” does - but you demonstrated “color” and “background-color”. - You said “style.background-color” doesn’t work and “the only thing you need to do” is to capitalize the second word - but that’s *NOT* the only thing. You also need to delete the “-“. 🤦🏻‍♂️ With that lack of attention to detail, I am certain I will be better off watching one of the 50 other videos teaching this stuff. I wasted 4 minutes of my life on this content - plus another 3 minutes to vent in the comments here. It could have been worse and I could have watched the whole video. I’m glad I didn’t - but still annoyed by the first 4 minutes - especially the way you just glossed over “transform” - but felt the need to show us how the “color” property works… 🙄

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

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!

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

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.

You are far far better than my teacher.

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

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

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.

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

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 :)

Thank you for this video!!

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!

Thanks Ed.This video was very helpful..😍

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.

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

Super helpful !

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?

Great tutorial! Really enjoyed it!

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

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

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"; }); }

No doubt you are genius. Its work. Everything is fine. But not clear. const listContent = document.createTextNode(listInput.value); What is this what is that declaration on the end ? I see its value what we put in input text but is it that way to do that? I don't know what to even ask, that .createTextNode it is not clear for me.

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

for (name of nameList) { name.addEventListener("click", function () { console.log(this); }); } console said uncaught error name.addEventListener is not a function how can i solve this?

Uncaught TypeError: userList.appendChild is not a function at HTMLButtonElement. I'm getting this error bro... 😢

ur voice is so soothing we feel relaxed while studying

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.

There is no way i can pay for courses on your Website Ed. I am from Nigeria and would like you to kindly create a debit card-enabled payment.

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.

Thanks Bro!

sir this is not working in windows 7 but why

why classlist.add does not work

Most functions don't work. I tried console log , It works though. Can you please help me?

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

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.

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.

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

My program has an HTML element with class name "trial" and id name "run" I have successfully, linked the javascript with my html document, (I tried it with printing "hello world" in the console) if I am using the following commands, (I have not written any other commands yet, just these to test my script) const trail = document.getElementsByClassName("trial"); console.log (trail); //console is logging the details of our element successfully, but if I use the following commands, instead of the previous.... const label = document.getElementById("run"); console.log (label); //console is logging "null" Why is this happening? Why a javascript can fetch classes but not id's? Please help!

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.

Useful Course Developedbyed

The command text.style.color is not applying neither in notepad nor in visual studio code

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

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

omg it's hard for me!!!!!!!! :(

Javascript Tutorial For Beginners . nop not for beginners

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

This was really usefull. Sub and like straight away for you Sir!

Can you please tell me why I get an error if I change user of userList into name of nameList or something like that???? I'm kinda stuck here.

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!

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

Hi dev my java won't read addEventListener can you help me?

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 😉

More than half of the code just doesnt want to work....

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

Hey Ed, in this for (user of userList) it is giving me an error that I need to declare 'user' with let, var or const. Any idea why this is happening?

Which tutorial covers the 'this' keyboard?

Thank you very much!

How did you make that button? My code didn’t work like that…

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

7:58 Why no female names under the examples?! ;)

Thanks for this tutorial :D

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

I''ll repeat this later, a little bit dizzy hahaha

Hi userlist.appendChild is not function at htmlbutton element

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

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

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

Best Javascript Tutorial👏👏

This video was very fast. in my opinion a little bit to fast.

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

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

Can you give the audio name attached at beginning of video??

You are great !

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

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

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

console.log('you are great');

name of intro song ? also i like all of your vids. always gr8 content

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

which vscode theme and font are you using dude ?

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

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

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 !!

a big thank yoooooooooouuuuuuuuuuuu

the text.style at 3:50 doesn't work for me for some reason :(

Where the hell did Java script come from??

thanks men I dont speak english but you explain very clearly

Thank you for making javascript tutorial. Learing a lot

Why you used function inside the for loop?

Text.style is not working at all for me, what do i need to do to get it working??