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.
Original source
22 responses to “Javascript Selectors – Javascript Tutorial for Beginners With Examples”
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
I like how the Wix ad says you should make your own website, and the only reason people learn JavaScript is to make a website
whats with the orange? why put the line through it in first place?..i seriously didnt have any fun watching this lesson lol. what does java do apart from repeat itself 17 times to get rid of a line in the orange…..i am off to wix …
This stuff is amazing! Helped me a lot, thank you!
for some odd reason. whenever I try to use classList or parentElement I get undefined. Everything has been working perfect besides this. I'm using the latest version of chrome.
I guess I am doing some stupid mistake. For some reason I don't get the array when I use the commando document.getElementsByTagName('p'). If I add which element I want afterwards, [0] for example, it will return the correct paragraph. Any way of fixing this? It's the same for h1, h2 etc.
great video
Could you link a video or guide for setting up localhost on mac? I feel not having that capability is holding me back at this point in the lessons. Thank you again for the help with these videos.
Super tutorial, it gives me confidence to use pure JavaScript instead of jQuery.
Hey Dude, i really appreciate your effort. it was a simple and helpful tutorial, REALLY thanks especially for the "command memo" in description.
why cant i use the classList method to just add my classes the following way: li.classList = ["class1", "class2", "class3"] when I add the classes like this, by making my own array, the classes print out as: class1, class2, class3 without the spaces needed to render correctly on the html. but if add them by using .className they work just fine, even after I modify them using .classList… please help.
On minute 7:59 is there a way . so that you dont have to re-type the variable again? like the same way we use += when we wanna add something to the variable without having to re-type the variable a gain. thanks.
this lession is only used to do modification on browser ,can we save it on ide ???
Deepest Thanks to you. You are really awesome teacher your way of teaching is great.Once again thank you so much for giving us free and awesome JVS tutorial.
great man!!! do you have any thing in OOJS and advance javascript concept tutorial in practical way ???
very nice tutorial.
How would you create a checkbox that marks the list item as done when it is clicked?