Hey gang, in this JavaScript DOM tutorial, I’ll show youhow we can query the DOM for elements with a certain class name, or tag name. The methods we’ll use are:
– getElementsByTagName()
– getElementsByClassName()
—– COURSE LINKS:
+ Atom editor – https://atom.io/a
+ GitHub Repo – https://github.com/iamshaunjp/JavaScript-DOM-Tutorial
———————————————————————————————
Other tutorials:
—– JAVASCRIPT FOR BEGINNERS:
—– CSS FOR BEGINNERS:
—– NODE.JS TUTORIALS
—– SUBSCRIBE TO CHANNEL – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1
============== The Net Ninja =====================
For more front-end development tutorials & to black-belt your coding skills, head over to – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk
================== Social Links ==================
Twitter – @TheNetNinja – https://twitter.com/thenetninjauk
Original source
20 responses to “JavaScript DOM Tutorial #3 – Get Elements By Class or Tag”
i copied this code but i get nothing in my console?
Great Video, Thank you 😍
please, What is the name of the theme you are using at Atom?
Now there's an even easier way to turn non-arrays into arrays with the spread operator, like so: var myArray = […nonArray];
Finally – a tutorial on DOM that makes sense. Where can we access the repo? Is it still available?
You're my one of fav youtuber !! Keep it up bro 🙂
Please, can you tell me the font name, you are using the atom editor? Please………. !
what package do you use for autocomplete in atom??
Nicee man. Very nice.
why do i need to change it to array first
using class=title for headers next to a list of book titles. aye.
This Ninja rocks
Thanks you dear :"")
Merci 🙂
Really good video, I'm enjoying this series. There are a couple of 'gotchas' I'd like to point out however.
First off, when writing a for loop, always declare your iterator variable ('i' or whatever) with the var keyword (or let if you're using JS6) so it looks like (var i = 0; i < whatever; i++). If you don't do this the iterator variable will be in the global scope and that can cause unexpected, really hard to chase down bugs. I speak from experience with this one.
Second, Array.from() is indeed awesome, but it's also very new. Granted, it has good browser support but it's a JS6 method and if you need to support older browsers either don't use it or employ a pollyfill.
Great video! Thank you
We can use for (title of titles) {…} . The for loop from ES6 loops through HTML collection. I think.
Array.from(), it's awesome! Thanks man!
Not gonna lie, since it's removal, i scream in my head the WOAAHH! after the intro music, everytime 🙁
An alternative way to iterate array-like objects is to use ES6's for..of, which is pretty nice: for (const el of document.getElementsByTagName('p')) { …. }
thanks man !!