In this Javascript tutorial for beginners, we’re going to be using Javascript selectors to access the DOM (document object model) and interact with our webpage in realtime. Selectors allow us to search for elements in the web page, get those html elements, and do things with them.
Selector methods are:
document.getElementsByTagName(‘div’)
document.getElementsByClassName(‘done’)
document.getElementById(‘my-id’)
document.querySelector(‘#my-id’)
document.querySelectorAll(‘.classname’)
Once you have selected an html element, you can modify it:
document.getElementById(‘my-id’).innerHTML = “new html”
document.getElementById(‘my-id’).className = “newclass otherclass”
Hopefully you liked this javascript tutorial for beginners with examples (hopefully you like every web development tutorial I crank out)
As you can see, selectors are powerful in Javascript and even if you’re a javascript beginner, you can make any and every change to your web page.
-~-~~-~~~-~~-~-
Learning Web Development? Watch the FREE COURSE:
“Web Development for Absolute Beginners”!
-~-~~-~~~-~~-~-
Original source
33 responses to “Javascript Selectors – Javascript Tutorial for Beginners With Examples”
If you write li.className.replace("also-done ", "") with space after also-done, you can get rid of easily from the extra space (8:45).
Thank you 🙂 much appreciated your time and generosity. your videos are awesome. I’m sure I will watch all your videos. Please keep up the good work. Spreading the knowledge. Merry Christmas!
The past videos were great, but unfortunately this lesson you lost your sense of teaching and started showing what you know as if you're talking to other experienced developers or coworkers. I wish you were a little slower and more teaching the details. At this point I'm going to find another youtube channel that gives more details. Thank you though.
thank a lot
Why is it always IE that's causing the problems? You'd think it wouldn't be a horrid browser considering that a big company like Microsoft developed it, but nope.
It's pronounced "varr", not "vair".
I wish i could give people like my tuition fees because you guys deserve it completely. Thank you very much for your time and effort
Javascript is good and all, but if someone had an unfiltered input such as a comment or something,
they could literally redesign the entire site.
William James Rapp
1 second ago
I am working on a WIX project ( because I can not afford to pay anyone to create my business web site — and I can not get code to work ) — so I am working with WIX and I need to learn JS to make 1 single function work in my WIX site to make my site function the way I need it to.
I have watched 10 hours of JS videos for Beginners from various YOUTUBER DEVELOPERS and I still have NO IDEA where to even start with writing my one single function to complete my web site.
I was hoping JAVASCRIPT could be used to MANIPULATE A FUNCTION PROCESS ? ( with the way web development has its own languages I have no idea if I am using the right terminology in trying to describe what it is I need ) .
What I am trying to do is create a function that when a person enters data into my database they press ENTER — Before the data is submitted into the data base the ENTER KEY takes them to a PAYMENT PROCESSING via a link key — When the person enters the payment method and they press SUBMIT the payment is sent for processing *HERE IS THE FUNCTION I NEED HERE* — > when the PAYMENT is ACCEPTED – THEN THE DATA IS SUBMITTED INTO THE DATABASE STORAGE – < —
I know I am not CODE SAVY and I really may have read over the code and may not have known it — All the videos I have watched do not seem to equal what I am trying to do.
CAN ANYONE HELP ME FIGURE THIS OUT ????
I've been trying to learn javascript for a while and I can't get past the beginning tutorials because all that goes through my mind is "BUT WHY?????" Why would you need to do these things? What is all of this for? I think javascript tutorials might be easier to grasp at the beginning if some real world examples could be mentioned like "in the future you would use this to.." or whatever. I feel like I might just start jumping ahead to tutorials where stuff is actually being created and then try to work backwards.
Who uses internet explorer anyway…
Did something changed in javascript? When I acces my var pTags I get "HTMLCollection(4) [p, p, p, p]"
li.className = li.className.replace(" also-done", "") //if their is a space before also-done in the replace it will take out the extra space
or you could use
li.className = li.className.replace("also-done", "")
li.className = li.className.replace(" ", " ") //chancging double space to single
Hey great one there. But i am thinking why would someone want to change the Html content in such a complicated way through javascript when they can do it directly on the HTML file?
contetn 5:10
Do you really think a person learning JS for the first time can follow you as fast as you're going and speaking. I mean this is class 5 and you're already on the DOM?
Hi,
I've been successfully learning all previous episodes but I'm starting to struggle since this one. I have no knowledge about CSS and HTML but I've red that it depends if I want to specialise in back end or front end. Should I continue learning JS or should I pause this and get some basics on HTLM and CSS ?
Incredible explanations btw, your tutorials are a success !
I was likely failing my JavaScript midterm until I spent a hour with your tutorials! Thank you, Sir!
https://youtu.be/rkNUOAUDb6g
So what does this do? So it actually does nothing to the page but picking up specific HTML codes? Correct?
Where can I get all the commands for JavaScript
I don't understand the advantage of typing code into the console to change the website. you can do it anyway in your html file and its even not a temporary visual change, if you understand…. or is there maybe an advantage by doing this ?
Great work man, but You should upload the html file too, so we can put hands on code. It would be much much better for us.
The innerHTML does not work anymore what to uese now
LETS LOOK AT MY p HE SAIDS hehe
This is by far the best tutorial for beginners out there. You sir, are awesome!
I really struggle to understand this. I learnt how to write JS but have no idea to apply to my website. If I wanted to edit my webpage, it's easier to do it through HTML. Why would anyone want to learn this?
anyone else get the wix ad?
Thanks for this useful video, I understand selectors to access the DOM much better. I'm trying to get my head around accessing attributes and accessing custom data attributes, any plans to do a video in this area?
is it ok to try to learn JQuery without learning JavaScript?
Thank you so much sir! I've watched all of your web development and Javascript tutorials! It was very fun learning Javascript with you!! Hope you do such tutorials in the future because I'll be very excited to watch them!!!!!
You do best tutorials ever, thank you a lot for this! 🙂
can you send me the link