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!

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


Greg Schudel
Greg Schudel
4,090 Points

Why select that parent element and not the specific element itself?

Here is the HTML of my proj:

<!DOCTYPE html>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>RSVP App</title>
  <link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">

  <div class="wrapper">
      <p>A Treehouse App</p>
      <form id="registrar">
        <input type="text" name="name" placeholder="Invite Someone">
        <button type="submit" name="submit" value="submit">Submit</button>

    <div class="main">  
      <ul id="invitedList"></ul>    

  <script src="app.js"></script>


Here is my JS

const form = document.getElementById('registrar');
const input = form.querySelector('input');

Why don't just select the input element instead of selecting the form element , and then traversing to the input???

2 Answers

Niclas Hilmersson
Niclas Hilmersson
8,296 Points

If you select the Child through the parent element this will make it alot easier to read than making specific id's for every specific thing you want to target. if you only read the code this will tell you that you are accessing the input element inside of the form element. which if you only had an id it could be anywhere on the page. It also opens up an easy way to keep selecting several elements inside the form.

Adam Beer
Adam Beer
11,314 Points

Perhaps it is not essential to choose the parent element. If you use any form / input fields, it will be important to choose a good one. Do not choose the wrong one. Try document.querySelector(input). I think it works in this case.