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

JavaScript JavaScript and the DOM (Retiring) Getting a Handle on the DOM Using CSS Queries to Select Page Elements

Posted by ja5on
ja5on
10,338 Points

1.23 minutes into video selector problem

The tutor selects an id using document.querySelector("#myHeading")
which returns <h1 id="myHeading">JavaScript and the DOM</h1>

however is this right?
my way is document.getElementById("#myHeading");
which returns <h1 id="myHeading">JavaScript and the DOM</h1>
I feel my way is more accurate as I'm selecting an ID with getElementById which is easy to associate the two together (better readability).

3 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there, jasonj7! I think the readability of either is fine, but it is largely dependent on how familiar you are with CSS selectors. In CSS if we're picking something with an id to style, we use #. If we're picking a class, we use ..

/* This picks the element with the id="myHeading" */
#myHeading {
    background-color: orange;
}

/* This picks any element that has class="myHeading" */
.myHeading {
   background-color: indigo;
}

Some people find picking by a CSS selector easier. It's a matter of personal preference. A querySelector('.myHeading') would pick the first element where class="myHeading" exists in the class list. While querySelector('#myHeading') picks the element with id="myHeading". The . and # are directly related to CSS.

But imagine for a moment that you wanted to pick the first paragraph that exists within a div with the id="myHeading". Your getElementById would get more complicated. The corresponding code would need to look like this:

document.getElementById("myHeading").getElementsByTagName("p")[0];

But the corresponding querySelector is much simpler in terms of readability:

document.querySelector("#myHeading p");

Corresponding HTML:

<div id="myHeading">
   <h1>Hi Jason!</h1>
   <p>First paragraph</p>  <!-- this is what we're picking -->
   <p>Second paragraph</p>
   <p>Third paragraph</p>
</div>

Hope this helps! :sparkles:

ja5on
ja5on
10,338 Points

Are querySelector only used with CSS? and get elementById etc only used for html?

I'm confused as to which to sometimes, I guess it depends on what's in my html page, I will research further... thank you for your replies they make me think..

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

jasonj7 No. You can use querySelector with tags. Like I just showed. getElementsByTagName('p'). The point that I'm trying to get across to us is that the getElement(s)By... methods are the way JS has traditionally selected HTML elements. CSS has traditionally selected elements using # and .. The querySelector() is a way to use a CSS selector with JavaScript. They both select HTML elements.

Here's a link to information on CSS selectors

Hope this helps! :sparkles:

ja5on
ja5on
10,338 Points
ja5on
ja5on
10,338 Points

I find I am struggling to know which to use either document.getElement.... or querySelector... for any given situation. I have no confidence and am at present using both and then run the program to see which works... (a shot in the dark really) I understand the meaning behind CSS . or # for selection but I'm still at a loss I'm afraid

ja5on
ja5on
10,338 Points
ja5on
ja5on
10,338 Points

Yeah I'm not getting it sorry. I was gonna write a long explanation as to why but it'll take too long. seems like to me getElement is just for html elements and querySelector is just for css selectors. If it is then that makes sense to me, but if not i'm well confused of the "crossing over" and i wouldnt know what to use. but that is me at the moment, I will learn more later I'm sure.

It sometimes takes me a while to mull it over and then the penny drops.

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

jasonj7 Can we agree that you can use classes to style your page? :smiley: So if you getElementsByClassName() you are getting all elements that match that class, which is what we use in CSS to do our styling. So yes, the querySelector uses a selector. Namely, a CSS selector. But there's at least one point in which CSS and JS are essentially the same. In CSS to select an HTML element by its tag name it doesn't require a . or a #. So to get all <h1> elements with CSS you could do:

h1 {

}

And the JS would be:

document.getElementsByTagName('h1');

which is roughly (but not quite) equivalent to 

document.querySelectorAll('h1');

But using CSS selectors you can make much more sophisticated queries in a shorter amount of code than you can by chaining a large amount of getElementsBy :smiley: