Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Interactive Web Pages with JavaScript Traversing and Manipulating the DOM with JavaScript Perform: Traversing Elements with querySelector

Posted by john larson
john larson
16,594 Points

var editButton = taskListItem.querySelector("button.edit"); is this the same dot syntax we used on objects?

This was kinda slipped in there w/out much discussion, so I hate to belabor what might be painfully obvious to some...but I'm going to anyway. 

var editButton = taskListItem.querySelector("button.edit");

we are accessing specifically the button that is an edit button. As I mentioned I recognize the syntax from working w/objects. Understanding that everything is an object is that what we are doing here? And can we access things this way anywhere that something is an object? which if I understand is everywhere?

6 Answers

miikis
miikis
44,957 Points

Hi John,

It's a good question and the answer is no, button.edit is not an object. In fact, it's not even really JavaScript; it's just a string containing CSS. I'm not sure what you already know — or what you don't know — so if that didn't make sense, feel free to ask me a specific question about what you don't understand and I'll try to answer it as clearly as possible.

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

taskListItem is the element you want to traverse. He mentions that this is better than using document as it takes less time for the program to go thru a specific element versus the entire document.

Using querySelector, you are simply traversing to the first instance of what is in the ( );

And as you already mentioned, it is simply a selector of the button tag with a class of edit.

Also, he mentions in the video that using this method is similar to using getElementsByClassName but, this is just another method of doing so.

I found querySelectorAll() to be a very useful method when building my site. Does the same thing but, it grabs all the elements.

john larson
john larson
16,594 Points

right, I get that part. And thank you for that. It's specifically accessing the particular button using the dot syntax from accessing objects that had me curious. Again...maybe painfully obvious, I just wanna here someone say it. And now that I feel like you missed the point of my question...it makes me more curious.

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

tag.class matches all elements with name tag and with the class class, e.g.:

div.foo {} matches <div class="foo">

tag .class matches all .class elements that are descendants of tag elements:

div .foo {} matches the <span> in <div><p><span class="foo">

so <button class="edit"><span class="edit">text here</span></button> for button.edit is specific here and would only get the button

vs

<button class="edit"><span class="edit">text here</span></button> for button .edit would be both and with the querySelector() in this case would still pick up just the button.

I was going by the code in the video but, should have built on my quick answer.

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

No it is not the same, there is not a reason to put the two together as they have it in the code it could simply be

"button .edit"

.edit is just referring to the class

john larson
john larson
16,594 Points

Thanks so much, I'll take a look at it with that in mind.

miikis
miikis
44,957 Points

This is incorrect. button .edit is not the same as button.edit; the former refers to any element with the class edit inside of a button element and the latter refers to any button element that itself has a class of edit. This is an important distinction, by the way; I'm not nitpicking.

john larson
john larson
16,594 Points

Ok, I looked at it and you are exactly right. .edit is the class. This particular series has me all in a bunch. Thanks again.

john larson
john larson
16,594 Points
john larson
john larson
16,594 Points

Mikis, I just noticed your post about button.edit vs button .edit.: button.edit: this refers to a button with the class edit? what would a button look like with a class inside it? < button class="edit">< /button > I'm a little confused. If it's possible to show the code of what you mean by the two, that would be great.

miikis
miikis
44,957 Points

Sure thing. Given this html:

<button class="edit">First Button</button>
<button>
  <span class="edit">Second Button<span>
</button>

button.edit would select the "First Button" with the edit class. And button .edit would select any tag with the class edit inside of a button tag — so in this case, the span tag.

nagamani palamuthi
nagamani palamuthi
6,160 Points
nagamani palamuthi
nagamani palamuthi
6,160 Points

Thanks for the above discussion,. I had the same confusion ...regarding the difference between button.edit and button .edit.