JAVASCRIPT QUESTION | Sololearn: Learn to code for FREE!

+30

JAVASCRIPT QUESTION

Hi guys! What exactly does document.querySelector() and document.querySelectorAll() do? I've checked online but I'm yet to find a `dumbed-down` explanation of them. Can someone please explain with examples?

8/13/2020 10:16:22 AM

๐Ÿ‘‘ Tchybooxuur!

56 Answers

New Answer

+48

There is no document.querySelectors it is querySelectorAll. querySelector selects the first element that matches a CSS selector. querySelectorAll returns a collection of all elements that matches a CSS selector. EDIT: Wow. I never expected this much upvotes. ๐Ÿ˜„ Thanks everyone

+20

If you are known to css then it is a very easy task! document.querySelector("#haha") Is same as document.getElementById("haha") And document.querySelectorAll(".haha")[0] Is same aa document.getElementsByClassName("haha")[0]

+14

Hey ๐Ÿ‘‘Tchybooxuur! I created this small code to demonstrate the difference. https://code.sololearn.com/W0Gjy3PZbM6X

+11

Ore It would help a great deal if you could explain what each line of your JS code does. Perhaps by way of commenting or by any other way you deem fit. You could totally do it whenever you are chanced.

+7

Ore Thanks. Let me edit accordingly ๐Ÿ‘๐Ÿผ

+7

Namit Jain Whoa! Thanks men ๐Ÿ‘๐Ÿผ

+7

Thanks Ore Checking it out right away!

+7

๐Ÿ‘‘Tchybooxuur! Sorry about that. I did not write it with the intention that it will be read. I expected you to just check the output and see what is returned by the two functions. Anyway, I will try to simplify the code. Pardon me.

+7

๐Ÿ‘‘Tchybooxuur! You can check it now

+7

Ore maybe due to many friends ๐Ÿ˜‚๐Ÿ˜…๐Ÿ‘ฆ Cuz he is a very friendly guy

+7

That's what's up Ore I'm a very friendly guy! โ˜บ๏ธโ˜บ๏ธโ˜บ๏ธ Thanks Namit Jain ๐Ÿ‘Œ

+6

Namit Jain Yeah. Maybe

+6

Kode Krasher Haha. A champion for writing an unreadable code that the OP could not even understand? I feel ashamed rn

+6

Ore ๐Ÿ˜‚ That's entirely the fault of the OP. You did noble... ๐Ÿ‘๐Ÿผ

+6

Kode Krasher I checked his profile and he's helped virtually everyone on sololearn with a web related question. He's that hot ๐Ÿ”ฅ upstairs! ๐Ÿ˜…๐Ÿ˜…๐Ÿ˜…

+6

Kode Krasher: Very well said... ๐Ÿ‘๐Ÿผ

+6

Kode Krasher and ๐Ÿ‘‘Tchybooxuur! Thanks ๐Ÿ˜Š

+6

Jorat For the most part you are right except that `querySelectorAll` returns a NodeList not an array. A NodeList is also iterable like an array but does not have the array methods like reduce, filter.

+6

https://www.sololearn.com/post/122356/?ref=app

+6

junayeDโ€Š โ—_° Thanks a lot. You did a great job simplifying things. I have a further question not necessarily related to the above question. How would you write your function so that on clicking the button multiple times, it toggles between the new value and the initial value? Like if I press the button once, background turns red and when I press again, it goes back to white like so.