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.

Original source


22 responses to “Javascript Selectors – Javascript Tutorial for Beginners With Examples”

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

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

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

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

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

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

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

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

Leave a Reply