Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

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>
<html>
<head>
  <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">

</head>
<body>
  <div class="wrapper">
    <header>
      <h1>RSVP</h1>
      <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>
      </form>
    </header>

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

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

</html>

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,313 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.