diff --git a/interacting_with_the_user/README.md b/interacting_with_the_user/README.md index c955418..8e74e5a 100644 --- a/interacting_with_the_user/README.md +++ b/interacting_with_the_user/README.md @@ -21,3 +21,7 @@ We're going to explore the ways that JavaScript allows for user interaction. * [Command Line Arguments](command_line_arguments) * [STDIN and STDOUT](stdin_and_stdout) + +### Level 2 - Finding and Changing Elements on a Web Page + +* [Querying the DOM](querying_the_dom) diff --git a/interacting_with_the_user/querying_the_dom/README.md b/interacting_with_the_user/querying_the_dom/README.md new file mode 100644 index 0000000..e8f13ad --- /dev/null +++ b/interacting_with_the_user/querying_the_dom/README.md @@ -0,0 +1,303 @@ +# Querying the DOM + +When the browser load an HTML page, it uses the tags of the page to create the +**Document Object Model**, or DOM for short. + +The DOM is a [tree of elements](http://www.computerhope.com/jargon/d/dom.htm) +that contain all of the information about what is on the current web page: the +tags, text, and media. With JavaScript, web developers can change elements on +the DOM. + +For example, we may want to write a script that does the following: + +1. When a user clicks on the "sign up" button +2. Show the sign up form +3. When the form is submitted +4. Send the user's information to the server +5. Hide the sign up form + +In order to accomplish this script, we need to be able to "show" and "hide" the +sign up form. The form is a DOM element. So we can use JavaScript to modify it. +**But**, before we can modify it, we need to know how to find it. + +Finding specific elements on the page is called **querying the DOM**, and that +is precisely what we are going to practice in these exercises. + +If you are still confused about what the DOM is, read +[Chris Coyier's post "What is the DOM?"](http://css-tricks.com/dom/). + +## Exercises + +For the following exercises, we will be querying elements from the DOM. So we +will need a DOM to work with! + +Create a file called `page.html` and paste the following code into it: + +```html + + + +

Smoothie Time

+ +

+ Everyone likes smoothies. My favorite is blueberry. +

+ +

A list of fruits

+ + + +

+ Sign up for our email newsletter. +

+ +
+ + + +
+ + +``` + +**You do not need to change this page**. + +To complete the exercises, open `page.html` in your browser and then open the +[browser's development console](http://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers). +Type your JavaScript code directly into the console. + +### Find a single element + +Start by selecting just one element from the page. Can you find the right method +for the `document` object, which, when you pass it a CSS-like selector, will +return a DOM element? + +You should use +[this page on DOM selection](https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Locating_DOM_elements_using_selectors) +as a primary reference. + +```javascript +var title = document.__("#title"); + +console.log(title); +// should print: +//

Smoothie Time

+``` + +Search suggestion: `select single element from the DOM javascript` + +> There are actually multiple ways to accomplish this. You may stumble into +> `document.getElementById()`, but in this case we want to focus on the new and +> improved +> [`document.querySelector()` method](https://developer.mozilla.org/en-US/docs/Web/API/Element.querySelector). + +### Find multiple elements + +What if you want to retrieve _more_ than just one element? Can you find the +right method to select all of the `
  • ` elements with the class `fruit`? + +```javascript +var fruits = document.__("li.fruit"); + +console.log(fruits); +// should print something like: +// [
  • ​apple
  • ​,
  • ​orange
  • ​,
  • ​papaya​
  • ​,
  • ​durian​
  • ​] +``` + +Search suggestion: `select multiple elements from the DOM` (note: you can +exclude links to jQuery methods by addign `-jquery` to your search) + +> Note the CSS-like selector syntax that is used by both the `querySelector()` +> and `querySelectorAll()` methods. You can pass them strings that follow a +> similar syntax to select elements in the same way you would in CSS. To learn +> more about CSS selectors, check out +> [the wiki](https://github.com/codeunion/fundamentals-of-web-development/wiki/Basics-of-CSS#basics-of-selectors) +> or some +> [documentation on MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors). + +### Search by tag name + +Can you select all of the `

    ` elements on the page? + +```javascript +var paragraphs = document.__(__); + +console.log(paragraphs); +// should print something like: +// [p, p] + +// and then grab the second paragraph from the collection +console.log(paragraphs[__]); +// should print something like: +//

    Sign up for our email newsletter.

    +``` + +Search suggestion: `css selector to find elements by tag name` + +> Which method did you use: `querySelector()` or `querySelectorAll()`? What +> happens if you use the other one? Try it! + +### Search by id + +Can you select the element with id `fruit-list`? + +```javascript +var fruitList = document.__(__); + +console.log(fruitList); +// should print something like: +// +``` + +Search suggestion: `css selector to find elements by id` + +> Don't forget to prepend your id selector with a `#`! + +### Search by class name + +Can you select all elements that have the class name `fruit`? + +```javascript +var allFruit = document.__(__); + +console.log(allFruit); +// should print something like: +// [span.fruit, li.fruit, li.fruit, li.fruit, li.fruit] +``` + +Search suggestion: `css selector to find elements by class` + +> Don't forget to prepend your class selector with a `.`! + +### Search by class name part two + +Hmm... that last query wasn't quite what we were looking for. What we really +wanted was to select all of the elements with class `fruit` that appear in the +`fruit-list`. + +In other words, we don't want that pesky `` tag in the results. + +Can you write a new query which returns _only_ the elements with class `fruit` +that are inside of the `