Javascript Selectors – Javascript Tutorial for Beginners With Examples




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”

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

  2. 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.

  3. 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 ????

  4. 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.

  5. 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

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

  7. 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 ?

  8. 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?

  9. 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?

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

Leave a Reply