NetNinja either made a mistake or JS changed some of its rules. Because as of now, you can run a .forEach(); on a document.querySelectorAll(); without having to turn it into an array with Array.from();.
@@Human_Evolution- Excatly you are right now we donot need to change that to an array when using querySelectorAll cux it gives us nodelist, but using classname instead of querySelectorAll,it need to change into array cause here we get htmlCollection Nd he has expalined this point in next video
Your teaching style is great everything is very clear i under stood css animations from your videos and now javascript thumps up love yr tutorials better then paid ones out there which i have but still watching yours ☺️☺️☺️☺️😊😊
If you want to be REALLY fancy you can also convert the nodeList (which is what querySelectorAll returns) to an array by doing const books = [...document.querySelectorAll('#book-list li .name')]
This works so nicely, especially when you can't find or dont have immediate access where the original code in linux and need a quick fix like changing an href attribute.
I think, it is very impotrant to add differences between querySelectorAll and other methods. querySelectorAll return a static collection, while getElementsByClassNmae return dynamic one. If some element was dunamiclly added to a page, variable, which contain collection, would dynamicly changes
Just going through this set of learning in 2022 (One of the best teachers around) and found that .name (well for me anyways) should be span.name in order to get the same result.
My consloe is displaying null and i have no errors: const wmf = document.querySelector('#book-list li:nth-child(2).name'); console.log(wmf); var books = document.querySelector('#book-list li.name'); console.log(books);
You don't need to turn the books node list into an array, If you check the __proto__ it has a built in forEach method. Thanks for everything else though!!
I sort of get it all, except for where you get the "book" in ...forEach(function(book)... part. As I see it is colour coded the same way as document I assume it is something along the line of document. Sorry just starting to learn JS, if anyone could answer me I'd appreciate it! :D
Hello.. At first ..Thanks for your Video .. But if i use const wmf= document.querySelector('#book-list li:nth-child(2).name'); console.log(wmf); , as u did ... i get NULL. ( im using Chrome).
Is this outdated? It seems .querySelector() only grabs HTML tags rather than classes/ids. If you want classes/Ids we use .getElementById() Or am I doing it wrong?
ninja why if i use keyword const it give me error and show Uncaught SyntaxError: Identifier 'wrap' has already been declared, but with keyword var its work ?
i actually enjoy the video on this.. pls send the link with the form you design using htlm and css pls... i just check you github repo now but i cant find it... it will help me while i practice thank you very much
I highly appreciate your tutorials; they are concise, to the point and super helpful. Thanks a lot, subscribed! I’ve already worked through some of your JavaScript tutorials, especially through your complete ES6 tutorial. Therefore, I have a kind request: Could you please stick from now on to ES6? For someone like me to whom JavaScript/ES6 is still fairly new, it would simplify things, as I don’t have to double check whether there is an ES6 way of writing that code. Thanks!
Why querySelector(#book-list li.name) returned the FIRST element and not the last ? Im kind of use to in other languages that the last element that is equal to your statment is returned. JS stops at first element ?
thank you for your great effort for helping us. I wanna ask you ask you a question. which is better, watching the all video then applying, watching a rule then applying then returning back to the video?
Great tuts. So, given the greater control that querySelector offers, do you still find yourself using jQuery often? If so, is the primary reason for ease of cross browser compatibility? Maybe for Ajax?
Put a space after “(2)“ The .name is a css class not a function/method. Hope you’ve become a great developer since I’m seeing this comment is from a year ago haha
@@yonk-oh7227 I hade the same null in console but I made another mistake- I've put tags abowe code not at the bottom of at index.html - maybe someone will be looking for the same Problem as mine :) (I had this mistake because Ninja did it in 1st video in this series: ruclips.net/video/FIORjGvT0kk/видео.html )
You can also do […document.querySelectorAll(‘.divy’)] with ES6 supporting browsers which ... are the same browsers that support nodelist.forEach. Anyways I disagree with writing ugly code to support old browsers. In my opinion just use polyfill.io/ and forget about old browsers. All functions neccessary will be pollyfilled. I think this is the best practice than just saying f*ck it, I'll just use jquery.
Damn. The polyfill is tiny if (window.NodeList && !NodeList.prototype.forEach) { NodeList.prototype.forEach = function (callback, thisArg) { thisArg = thisArg || window; for (var i = 0; i < this.length; i++) { callback.call(thisArg, this[i], i, this); } }; }
Really like your tuts! A quick question about the developer tools in Chrome. When I query the DOM I get back a ton of info in the console under 'span.name'. I just want the basic tags displayed like you showed in your video. Does anyone know how to do that?
Hi dude, I want to suggest something from this u can earn money but it needs need some effort. Why don't you create udemy course on web development by creating one awesome project. There are lot of courses which teaches the htnl css js but many don't like those course because they wanted to learn a real time project. So if time permits go for it.
This is infuriating. Everywhere I go the tutorials about the querySelectors are the same. How do I use querySelector to loop through all my array objects and return the specific one? You have a list of books, can you turn it into an array and with an onclick method return that specific one? It's easy when you use nth-child(2) but when you have 11 elements this gets tedious.
You've probably solved this already but for anyone else who needs to know, you can loop through all the elements with a for loop and grab each iteration and add a click event to it.
document.querySelector("#element") will return single element
document.querySelectorAll(".name") will return collection of elements
Thank You !!
but there's a difference between A HTML collection and a NodeList
NetNinja either made a mistake or JS changed some of its rules. Because as of now, you can run a .forEach(); on a document.querySelectorAll(); without having to turn it into an array with Array.from();.
@@Human_Evolution- Excatly you are right now we donot need to change that to an array when using querySelectorAll cux it gives us nodelist,
but using classname instead of querySelectorAll,it need to change into array cause here we get htmlCollection
Nd he has expalined this point in next video
querySelectorAll returns a NodeList in which we can apply a forEach() method directly!
No need to convert it into an array!
Your student from Udemy :)
But he convert it into an array so I didn't see a difference between querySelector and getElementsBy ..
Your teaching style is great everything is very clear i under stood css animations from your videos and now javascript thumps up love yr tutorials better then paid ones out there which i have but still watching yours
☺️☺️☺️☺️😊😊
Thanks so much :D
after watching your first 4 videos of javascript, I started loving it after I decided to quit learning. you are the best :)))))
3 years later and this tutorial is still a Gold...
So how is that different from getElementByID method? Don't they do the same thing?
It's great for you to connect 'querySelector' to jQuery selector. I got it now. Thanks a lot!
If you want to be REALLY fancy you can also convert the nodeList (which is what querySelectorAll returns) to an array by doing const books = [...document.querySelectorAll('#book-list li .name')]
Thank you for this comment! It helped me solve an issue in my code :-)
"this class has a span of name"...that made me smile and chuckle a little. so cute. 4:15
This works so nicely, especially when you can't find or dont have immediate access where the original code in linux and need a quick fix like changing an href attribute.
4:16 - This class has a span of name. 😜 Great tutorial btw.
HA, oops.
I think, it is very impotrant to add differences between querySelectorAll and other methods. querySelectorAll return a static collection, while getElementsByClassNmae return dynamic one. If some element was dunamiclly added to a page, variable, which contain collection, would dynamicly changes
Love your tutorials. Keep it up
Thanks :)
I know this is a long time ago but thank you for the help. I finally understand how to use querySelectors now
At least in modern browsers .querySelectorAll() returns a NodeList, which has the .forEach() method
I like vanilla javascript because I always wanted a challenge
This video is doubly amazing because of the nod to Patrick Rothfuss!
I don't know why this video has fewer views, this could help tons of people who want to know more about JavaScript.
Just going through this set of learning in 2022 (One of the best teachers around) and found that .name (well for me anyways) should be span.name in order to get the same result.
Ooohhh I get it, so that's why they called it "jQuery" 😃
query selecetor??
Thanks so much. That forEach trick is so useful!
My consloe is displaying null and i have no errors:
const wmf = document.querySelector('#book-list li:nth-child(2).name');
console.log(wmf);
var books = document.querySelector('#book-list li.name');
console.log(books);
Thanks man. Helped me (y)
u need to add space before .name
you made understanding so simple. Thank you very much!
cool tutorial it's easy to understand :)
Thank you so much. You provide very useful information and you know how to teach.
An easier way of doing this -
const wmf = document.querySelectorAll('#book-list .name')[1];
wmf.style.color='red'
You don't have to convert books to array to use forEach method when you use querySelectorAll
You don't need to turn the books node list into an array, If you check the __proto__ it has a built in forEach method. Thanks for everything else though!!
Thanks for making such video and I appreciate the time and efforts you've taken to share your knowledge with us..!!
Dope Video.. About to say Goodbye to jquery before ending of this playlist
I sort of get it all, except for where you get the "book" in ...forEach(function(book)... part. As I see it is colour coded the same way as document I assume it is something along the line of document. Sorry just starting to learn JS, if anyone could answer me I'd appreciate it! :D
Hello.. At first ..Thanks for your Video .. But if i use
const wmf= document.querySelector('#book-list li:nth-child(2).name');
console.log(wmf); , as u did ... i get NULL. ( im using Chrome).
ok i see my mistake now.. i have to make a space between ...child(2) .name'); tricky...
@@klausklemper5987 thanks a lot for pointing out the 'space' thing!!
@@klausklemper5987 thanks man
Is this outdated? It seems .querySelector() only grabs HTML tags rather than classes/ids.
If you want classes/Ids we use .getElementById()
Or am I doing it wrong?
Super Duper
Love your tutorials
for me the query is not selecting and shows null on console.log
its the same with me ...
const wmf = document.querySelector('#book-list li:nth-child(2).name')
console.log(wmf)
It's showing null at the console. Can anyone help me with this?
As usual, amazing tut
The querySelector() method returns the first element that matches a CSS selector.
Hi! I have a problem to use querySelector with pseudo class before. Is there some way to choose element with it?
ninja why if i use keyword const it give me error and show Uncaught SyntaxError: Identifier 'wrap' has already been declared, but with keyword var its work ?
Maybe you used it in the browser console
i actually enjoy the video on this.. pls send the link with the form you design using htlm and css pls... i just check you github repo now but i cant find it... it will help me while i practice thank you very much
thanks bro, good lessons, nodeList has own forEach
I highly appreciate your tutorials; they are concise, to the point and super helpful. Thanks a lot, subscribed!
I’ve already worked through some of your JavaScript tutorials, especially through your complete ES6 tutorial. Therefore, I have a kind request: Could you please stick from now on to ES6? For someone like me to whom JavaScript/ES6 is still fairly new, it would simplify things, as I don’t have to double check whether there is an ES6 way of writing that code. Thanks!
is it bad practice to use for(x = 0; x < books.length;x++){
console.log(books[x]);
}; beside using Array.from
Hello.I download file on your github is empty. Anyone can help?
Why querySelector(#book-list li.name) returned the FIRST element and not the last ? Im kind of use to in other languages that the last element that is equal to your statment is returned. JS stops at first element ?
thank you for your great effort for helping us. I wanna ask you ask you a question. which is better, watching the all video then applying, watching a rule then applying then returning back to the video?
How would I select certain elements.. example: I want to select only the first and third or second and last element
Great tutorial, as always.
Pretty cool :-) thank you for this video
Great tuts. So, given the greater control that querySelector offers, do you still find yourself using jQuery often? If so, is the primary reason for ease of cross browser compatibility? Maybe for Ajax?
I hope, after finishing this course I can totally ignore jquery
King Rayhan feels tempting to master jQuery but id rather master js itself first. Specifically the DOM.
I love it
Waiting for the next video.
Thanks.
7:10 how to get the value inside the span tag
const wmf = document.querySelector('#book-list li:nth-child(2).name');
console.log(wmf);
The above statement logs null value in the console...idk why
Put a space after “(2)“
The .name is a css class not a function/method. Hope you’ve become a great developer since I’m seeing this comment is from a year ago haha
@@yonk-oh7227 I hade the same null in console but I made another mistake- I've put tags abowe code not at the bottom of at index.html - maybe someone will be looking for the same Problem as mine :) (I had this mistake because Ninja did it in 1st video in this series: ruclips.net/video/FIORjGvT0kk/видео.html )
I hope you make php or ruby tutorials
books.forEach should work in all modern browsers.
Thanks, you're correct, of course :). I've added a little edit to the next video (coming up soon) to explain.
You can also do […document.querySelectorAll(‘.divy’)] with ES6 supporting browsers which ... are the same browsers that support nodelist.forEach. Anyways I disagree with writing ugly code to support old browsers. In my opinion just use polyfill.io/ and forget about old browsers. All functions neccessary will be pollyfilled. I think this is the best practice than just saying f*ck it, I'll just use jquery.
Damn. The polyfill is tiny
if (window.NodeList && !NodeList.prototype.forEach) {
NodeList.prototype.forEach = function (callback, thisArg) {
thisArg = thisArg || window;
for (var i = 0; i < this.length; i++) {
callback.call(thisArg, this[i], i, this);
}
};
}
4:15 "This class has a span of name" 😭
Really like your tuts! A quick question about the developer tools in Chrome. When I query the DOM I get back a ton of info in the console under 'span.name'. I just want the basic tags displayed like you showed in your video. Does anyone know how to do that?
do you already know why this happening?
Everything I'm doing not working
querySelector vs getElementById ?
Awesome channel thank you for what you do. Just found this channel through a post by Brad Traversy. Do you have any udemy courses?
Merci :)
What is the theme being used in Atom?
Hey, it's called Atom Monokai :)
remember everyone that there is a difference between HTML collection and a NodeList. so don't be confused when he is saying "a collection".
First like than watching.
Thanks :)
"This class has a span of name" xD
Hi dude,
I want to suggest something from this u can earn money but it needs need some effort.
Why don't you create udemy course on web development by creating one awesome project.
There are lot of courses which teaches the htnl css js but many don't like those course because they wanted to learn a real time project.
So if time permits go for it.
not everyone has worked on jquery .
moving too fast can't of hard to see what your grabbing i know i should pause the video
This is infuriating. Everywhere I go the tutorials about the querySelectors are the same.
How do I use querySelector to loop through all my array objects and return the specific one?
You have a list of books, can you turn it into an array and with an onclick method return that specific one?
It's easy when you use nth-child(2) but when you have 11 elements this gets tedious.
You've probably solved this already but for anyone else who needs to know, you can loop through all the elements with a for loop and grab each iteration and add a click event to it.