why use query selector

[Jonathan Shyman]

I was reviewing one of the earlier courses on the DOM and I realized that I don’t get what the point of queryselector and queryselectorall. Can’t you do all the exact same stuff with getelementsbyclassname getelemetbyid and just leave out the period or hash sign? What extra use does it add? Thanks!
Jonathan

[Zac Gordon]

Sure!

With querySelector you can do this:

var el = document.querySelector( '.main-content article h1.post-title' ); 

The name query comes from how you can write basically any query selector you would do in CSS, including chaining multiple selectors together.

With getElementsByClassName, getElementById and getElementsByTagName it would be a lot more typing and selecting to accomplish the same thing.

However, for a long time that was all we had. I really try not to mention jQuery in the course, but jQuery and others became so popular in large part just because querySelector didn’t exist at the time.

Does that answer the question?

[Jonathan Shyman]

So I think I get it. Just to see the contrast, could you code out the same example without querySelector to see the difference? I think it would help to see the advantage with a side by side comparison, thanks!

[Zac Gordon]

Yes, I will! In fact I did 🙂

But before I share it, I want you to take a stab at it 😉

So you share then I’ll share 🙂

Just want to make sure you’re putting in an effort to practice and code it on your own as well 😉

Just post up a link to your JSBin and then I’ll post up mine 🙂

[Zac Gordon]

Try starting with this markup:

  <div id="content">
    <div class="entry-content">
      <h1 class="entry-title">Zac Gordon</h1>
      <p>Zac Gordon is a professional educator with years&nbsp;of experience teaching in the classroom, leading&nbsp;workshops, giving talks and recording&nbsp;online courses.</p>
    </div>  
  </div>

and then try to do the equivalent of this

var header = document.querySelector( '#content .entry-content h1' ); 

using:

– getElementById
– getElementsByClassName
– getElementsByTagName

[Jonathan Shyman]

So I tried for about 20 minutes or so but didnt get very far, this was as far as I came up with: JSBin

[Zac Gordon]

Hey Jonathan!

First: Great job and I’m proud of you for giving this a stab 🙂 As the teacher I appreciate the effort you put in!

So.. with that said, check out this solution: https://jsbin.com/cuqiba/8/edit?js,output

Third: To make sure you really get it, try figuring out this similar example on your own: https://jsbin.com/wayapuf/edit?html,js,output

Let me know how it goes! This should help begin to solidify the benefit of querySelector.

Cheers,
Zac

[Jonathan Shyman]

So when I looked at the answer I realized I was not there since I had not really studied the video on innerHTML. I just started working on it, and on my first try am already having issues. I’ll open a new thread with my error log, and once we sort that out, I’ll come back here and work on your additional example.

[Jonathan Shyman]

OK I’ve moved back to this thread and looked through your jsbin answer and I totally get it now. However, I tried your next question and got an error. I know I’m very close but cannot figure out what I am getting wrong: https://jsbin.com/suqorexele/edit?html,js,console

[Zac Gordon]

I think you may have just misspelled “content” 😉

You’ve got it though!

The one important thing to fix is that you want to define all variables up at the top at once rather than as you go.

var jon1, jon2, jon3;

Also, always try to use variable names that describe what they are storing. So this might be more appropriate:

var content, article, link;

Hope that helps and A+ for effort!!!

Cheers 🙂
Zac

[Jonathan Shyman]

Thanks for your help!

Do you mean that I should just declare them and leave them empty until I assign them later, like this…?

var jon1, jon2, jon3;

var jon1 = document.getElementsByClassName("content")[0];

var jon2 = jon1.getElementsByTagName("article")[0];

var jon3 = jon2.getElementsByTagName("a")[0];

console.log (jon3.innerHTML);

[Zac Gordon]

Yup. Like this:

var jon1, jon2, jon3;

jon1 = document.getElementsByClassName("content")[0];

jon2 = jon1.getElementsByTagName("article")[0];

jon3 = jon2.getElementsByTagName("a")[0];

console.log (jon3.innerHTML);

Notice that var is only used when declaring the variable, not when assigning it in this case.

You will see this method used a lot as you go forward 🙂

[Jonathan Shyman]

I see, thanks.

[Author]

Posts