JavaScript for WordPress Forums Vanilla JavaScript why use query selector

This topic contains 12 replies, has 2 voices, and was last updated by  Jonathan Shyman 3 years, 5 months ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #6067

    Jonathan Shyman
    Participant

    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

    #6109

    Zac Gordon
    Keymaster

    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?

    #6152

    Jonathan Shyman
    Participant

    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!

    #6162

    Zac Gordon
    Keymaster

    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 🙂

    #6195

    Zac Gordon
    Keymaster

    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

    #6270

    Jonathan Shyman
    Participant

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

    #6378

    Zac Gordon
    Keymaster

    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

    #6457

    Jonathan Shyman
    Participant

    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.

    #7209

    Jonathan Shyman
    Participant

    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

    #7250

    Zac Gordon
    Keymaster

    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

    #7255

    Jonathan Shyman
    Participant

    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);
    #7272

    Zac Gordon
    Keymaster

    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 🙂

    #7274

    Jonathan Shyman
    Participant

    I see, thanks.

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.