JavaScript for WordPress › Forums › Vanilla JavaScript › why use query selector
- This topic has 12 replies, 2 voices, and was last updated 8 years, 4 months ago by Jonathan Shyman.
-
AuthorPosts
-
June 7, 2016 at 11:25 am #6067Jonathan ShymanParticipant
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!
JonathanJune 7, 2016 at 7:51 pm #6109Zac GordonKeymasterSure!
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?
June 8, 2016 at 3:24 pm #6152Jonathan ShymanParticipantSo 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!
June 8, 2016 at 3:41 pm #6162Zac GordonKeymasterYes, 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 🙂
June 8, 2016 at 3:48 pm #6195Zac GordonKeymasterTry 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 of experience teaching in the classroom, leading workshops, giving talks and recording 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
– getElementsByTagNameJune 8, 2016 at 8:24 pm #6270Jonathan ShymanParticipantSo I tried for about 20 minutes or so but didnt get very far, this was as far as I came up with: JSBin
June 9, 2016 at 2:05 pm #6378Zac GordonKeymasterHey 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,
ZacJune 9, 2016 at 7:31 pm #6457Jonathan ShymanParticipantSo 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.
June 13, 2016 at 10:19 pm #7209Jonathan ShymanParticipantOK 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
June 14, 2016 at 12:27 pm #7250Zac GordonKeymasterI 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 🙂
ZacJune 14, 2016 at 1:24 pm #7255Jonathan ShymanParticipantThanks 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);
June 14, 2016 at 1:52 pm #7272Zac GordonKeymasterYup. 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 🙂
June 14, 2016 at 1:54 pm #7274Jonathan ShymanParticipantI see, thanks.
-
AuthorPosts
- You must be logged in to reply to this topic.