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

Question

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???

Answer 1 · 2018-06-21T17:49:34Z

June 21, 2018 5:49pm

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.

Answer 2 · 2018-06-21T17:59:10Z

June 21, 2018 5:59pm

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.

Welcome to the Treehouse Community

Looking to learn something new?

Greg Schudel

Greg Schudel

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

2 Answers

Niclas Hilmersson

Niclas Hilmersson

Adam Beer

Adam Beer