Main content
Course: Computer programming - JavaScript and the web > Unit 7
Lesson 2: DOM access with jQuery- Finding elements with jQuery
- Challenge: Unicorn-ify a page with jQuery
- Debugging webpages with the browser console
- Getting info on elements with jQuery
- Challenge: Famous discoveries
- Review: DOM access with jQuery
- Project: DOM detective
- History break: How did John build jQuery?
© 2024 Khan AcademyTerms of usePrivacy PolicyCookie Notice
Project: DOM detective
The Khan Academy website includes jQuery, so you can actually open your JavaScript console right now and successfully run this line of code to show you the inner text of all the
<h1> elements on this page:$("h1").text();Want to know how many
<h1> elements there are? Run this line of code:$("h1").length;Now, try to use CSS selectors to find more elements of this Khan Academy page, like:
- All the links.
- This article.
- Every image.
- The sidebar navigation.
- Your name in the upper right corner.
- The text that says 'Home'.
- ...keep going!
You're welcome to share your selectors in the discussion below, but keep in mind that our HTML constantly changes, so the selectors that once worked might not keep working forever. Also, there are often multiple CSS selectors that can find the same element, so there are lots of right answers out there.
Now get on your detective hat and start sleuthing around our DOM!
Want to join the conversation?
I'm having trouble with the assignment of looking for "The text that says 'Home'." Would it be this code below?
$(".home-link ellipsis").text();
or either on of these:
$("href").text();
$("Home").text();(5 votes)
The HTML for the home button is "<a href="/" class="home-link ellipsis">Home</a>". You tried to use the class to find it, but this element has two classes, ".home-link" is one and ".ellipsis" is another. You tried to use both, but you only need one or the other. You would type:
"$('.home-link').text();"
or
"$('.ellipsis').text();"
or, if you want to use both you would type:
"$('.home-link.ellipsis').text();" with no space and a dot before each one.
You might remember from the css course that a space in a selector means a child element.(9 votes)
I can use and edit the CSS of KhanAcademy with a JS project? Like the jQuery to find how many element's there are in the page...etc(5 votes)
I noticed you can't do regular stuff you do in Intro to JS if you used a <script></script> tag.(0 votes)
How do I "run" a line of code in the browser console? Is the same as searching for specific lines of code?(5 votes)
Just type in the line of code you want to run and press enter.(4 votes)
- Is there a console to enter: $("h1").text(); in firefox?(3 votes)
Hit ctrl + shift + i on your keyboard and the developer window will appear. First, find the tab on top labeled> Console. There should be a bar on the very bottom with an icon that looks like this >> on the left-hand side. You can type JavaScript and jQuery functions in this bar and press enter to run them.(5 votes)
How should I find every image of this Khan Academy page? "$("img").text();" is surely the wrong answer. Thanks!(3 votes)- Type
$("img");in the console and you'll see a list of all the images on the page.(3 votes)
- Perhaps a silly question, but when I look in the elements, why is the code so complex, I mean to find a piece of text in the navigation bar, I have to expand through so much code. Are all these values generated automatically or what?(2 votes)
Yes. I believe KA uses the React.js (https://facebook.github.io/react/) library to generate all of those HTML elements.(3 votes)
- Amazing result : When I run this code ($("h1").text();) to find the number of links on this very webpage it showed 189!
But is it correct like how do I confirm how many links actually go to a different website and how many link back to the same website?(1 vote)
Hi.
You counted all the<H1>headers, not the links.
To get the links, you would do$("a").
You want to filter the links based on theirhrefattribute. If they don't go to Khan Academy, you want to count them, otherwise you don't, am I right?
You can use the following code to get the number of links that don't go back to Khan Academy$("a").get()
.map(x => x.href)
.filter(x => !x.startsWith("https://www.khanacademy.org"))
.length$("a")finds all the link tags..get()turns the result into a JavaScript array.
On the array you can callmapto turn the values into something else..map(x => x.href)Here I turn the<a>elements into the strings stored in thehrefattribute..filter(x => !x.startsWith("https://www.khanacademy.org"))Here I filter all elements that don't start with "https://www.khanacademy.org". Everything else is removed..lengthhere I get the number of elements that are left in the array.
I should add another filter to remove internal links..filter(x -> !x.startsWith("#"))
And you might find other links that you might want to remove.
To list all the URLs that are linked to, you can do$("a").get()
.map(x => x.href)
.filter(x => !x.startsWith("https://www.khanacademy.org"))
.join("\n")(4 votes)
- did jquery developed using
javascript codes(2 votes) 
how do I open my Javascript console?(1 vote)- Why does
$("img").src();returns error !
how to get the source of an image then ??(1 vote)