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
Chris Feltus
3,970 PointsManipulating the DOM using .querySelector Question
This is a question using .querySelector in javascript to manipulate the DOM. This is under the course 'build interactive pages with javascript', as the name implies JS only no Jquery. There is a specific segment in the following code the author is using that is confusing me.
editInput = listItem.querySelector('input[type=text]');
And he is using it to target this section of the html
<input type="text"
My question is why are the brackets [ ] needed in the javascript querySelector? I read through the documentation and I can't seem to find any explanation as to why the brackets are needed.
Here is the full code pen if needed: http://codepen.io/bluehabit/pen/adBEjr
2 Answers
Chris Feltus
3,970 PointsIt seems the javascript MDN did not have it in the documentation but W3 schools does.
"Get the first <a> element in the document that has a "target" attribute:"
document.querySelector("a[target]");
This seems to be the answer I was looking for.
Chyno Deluxe
16,936 PointsHey Chris,
You are correct. The querySelector is targeting the input element but not ALL input elements. It's specifically targeting all input elements that are of the type "Text". Meaning, submit buttons, radio and checkbox inputs will not be targeted.
Mark Miller
45,831 PointsMark Miller
45,831 PointsThere is a course called CSS Selectors. One of the videos is Attribute Selectors. This CSS course precedes Interactive Pages with JavaScript in the Track: Front-End Web Development, which I am near completion. I had the same difficulty as you on this .querySelector() quiz question. But upon review of the CSS course, I think that is the source of the syntax here. This same syntax is taught throughout the CSS Selectors course, which is only 2 hours long.