- This topic has 12 replies, 2 voices, and was last updated 6 years, 11 months ago by Jonathan Shyman.
June 7, 2016 at 11:25 am #6067
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 #6109
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 #6152
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!June 8, 2016 at 3:41 pm #6162
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 🙂June 8, 2016 at 3:48 pm #6195
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 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' );
– getElementsByTagNameJune 8, 2016 at 8:24 pm #6270
So I tried for about 20 minutes or so but didnt get very far, this was as far as I came up with: JSBinJune 9, 2016 at 2:05 pm #6378
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.
ZacJune 9, 2016 at 7:31 pm #6457
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.June 13, 2016 at 10:19 pm #7209
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,consoleJune 14, 2016 at 12:27 pm #7250
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!!!
ZacJune 14, 2016 at 1:24 pm #7255
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"); var jon2 = jon1.getElementsByTagName("article"); var jon3 = jon2.getElementsByTagName("a"); console.log (jon3.innerHTML);June 14, 2016 at 1:52 pm #7272
Yup. Like this:
var jon1, jon2, jon3; jon1 = document.getElementsByClassName("content"); jon2 = jon1.getElementsByTagName("article"); jon3 = jon2.getElementsByTagName("a"); 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 #7274
I see, thanks.
- You must be logged in to reply to this topic.