JavaScript DOM Crash Course – Part 1




This crash course focuses on the DOM WITHOUT JQUERY. In this part we will talk about what the JavaScript DOM (Document Object Model) is and we will look at the different selectors like

document.getElementById()
document.getElementsByClassName()
document.getElementsByTagName()
document.querySelector()
document.querySelectorAll()

We will also look at how to change content and styles via these selectors

CODE: Code for this video
http://www.traversymedia.com/downloads/domcrashcourse1.zip

JAVASCRIPT FUNDAMENTALS VIDEO:

BECOME A PATRON: Show support & get perks!
http://www.patreon.com/traversymedia

ONE TIME DONATIONS:
http://www.paypal.me/traversymedia

COURSES & MORE INFO:
http://www.traversymedia.com

FOLLOW TRAVERSY MEDIA:
http://www.facebook.com/traversymedia

http://www.instagram.com/traversymedia

NEW DISCORD CHAT SERVER:
https://discord.gg/traversymedia

Original source


28 responses to “JavaScript DOM Crash Course – Part 1”

  1. 1) querySelector returns the first single element in the document that matches the CSS-type selector
    2) querySelectorAll returns a collection of all elements in the document that match the selector
    3) getElementsByClassName returns a collection of elements that have the specified class (not a selector)
    4) getElementById*returns the single element in the document that has the specified ID (there can only be one)
    5) getElementsbyTagName returns a collection of elements that have the specified tag name (type)

  2. This is awesome! Started my JavaScript journey a few days ago and now learning about Functions, Objects, Arrays, and Variables, then this popped up on my recommendation list so I decided to check it out. After the first 10 minutes of the video, I was just in awe after you used JavaScript to pull up all the information in the HTML… It was like magic!

  3. I am working on an Event Lister thing with vanilla js. The drift is whenever i click the Submit btn it should log it in the console(for testing) btw before even clicking it it says cant get click of null but when i use it on codepen it works why doesn't it work on my pc?

  4. It pleased me to see document.all mentioned here. An IE era invention that is shunned today but was once indispensable. It's more than a mere indexed collection by the way. It can also access elements by ID or name. It has superpowers.

  5. If I had seen this two months ago, I might still have a job!

    This is one of the best tutorials I have seen on javascript taking me right back to the basics that I really could have used a long time ago. In the future, I will definitely have a lot better progress on my endeavors…

Leave a Reply