• Monday , 25 March 2019

Javascript Selectors – Javascript Tutorial for Beginners With Examples

Code Canyon



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

3d Ocean

Related Posts

33 Comments

  1. Dániel Nagy
    February 21, 2019 at 03:05

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

  2. Van Tran
    February 21, 2019 at 03:05

    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!

  3. Emad El Sammad
    February 21, 2019 at 03:05

    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.

  4. Thanadilok Panyafuang
    February 21, 2019 at 03:05

    thank a lot

  5. David Gingerich
    February 21, 2019 at 03:05

    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.

  6. Jason Newquist
    February 21, 2019 at 03:05

    It's pronounced "varr", not "vair".

  7. arashaad daavidson
    February 21, 2019 at 03:05

    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

  8. Universal Link
    February 21, 2019 at 03:05

    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.

  9. William James Rapp
    February 21, 2019 at 03:05

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

  10. Nicole Brady
    February 21, 2019 at 03:05

    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.

  11. Shachar Har-Shuv
    February 21, 2019 at 03:05

    Who uses internet explorer anyway…

  12. Dimitri Dehouck
    February 21, 2019 at 03:05

    Did something changed in javascript? When I acces my var pTags I get "HTMLCollection(4) [p, p, p, p]"

  13. Adam Kemish
    February 21, 2019 at 03:05

    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

  14. Chang Yue sin
    February 21, 2019 at 03:05

    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?

  15. Ashish Gupta
    February 21, 2019 at 03:05

    contetn 5:10

  16. Gerald Foushee
    February 21, 2019 at 03:05

    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?

  17. Nicolas Cuccuru
    February 21, 2019 at 03:05

    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 !

  18. Dusty Ford
    February 21, 2019 at 03:05

    I was likely failing my JavaScript midterm until I spent a hour with your tutorials! Thank you, Sir!

  19. Mr and Mrs Sun
    February 21, 2019 at 03:05

    So what does this do? So it actually does nothing to the page but picking up specific HTML codes? Correct?

  20. Mohmed Karmy
    February 21, 2019 at 03:05

    Where can I get all the commands for JavaScript

  21. Seyit Zerey
    February 21, 2019 at 03:05

    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 ?

  22. Giuseppe Montanaro
    February 21, 2019 at 03:05

    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.

  23. Stef Pieper
    February 21, 2019 at 03:05

    The innerHTML does not work anymore what to uese now

  24. Punnawit Tokhem
    February 21, 2019 at 03:05

    LETS LOOK AT MY p HE SAIDS hehe

  25. Abhishek Muley
    February 21, 2019 at 03:05

    This is by far the best tutorial for beginners out there. You sir, are awesome!

  26. Stephen White
    February 21, 2019 at 03:05

    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?

  27. 4D_X
    February 21, 2019 at 03:05

    anyone else get the wix ad?

  28. Dilshad Marikar
    February 21, 2019 at 03:05

    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?

  29. Lucas Hoffmann
    February 21, 2019 at 03:05

    is it ok to try to learn JQuery without learning JavaScript?

  30. Advait Khaire
    February 21, 2019 at 03:05

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

  31. Serg G
    February 21, 2019 at 03:05

    You do best tutorials ever, thank you a lot for this! 🙂

  32. Shane Walsh
    February 21, 2019 at 03:05

    can you send me the link

Leave A Comment

You must be logged in to post a comment.