Why is the childNodes giving me text before input element when I console.log the parent?

Question

Why when I console.log the parent's childNodes it gives me this 'text' as one of their childNode?

How can I overcome it?

 <div id="inputDiv">
        <input type="text" id="name" placeholder="Enter the name">
        <input type="text" id="age" placeholder="Enter the age" >
        <input type="radio" name="gender" value="male" checked> Male
        <input type="radio" name="gender" value="female">Female
        <input type="text" id="language" placeholder="Enter the language" >
        <input type="text" id="empid" placeholder="Enter a employeeId" disabled>
        <input type="text" id="salary" placeholder="Enter the salary" >
        <input type="text" id="experience" placeholder="Enter experience" >
        <select id="employeesType" onchange="ChangeEmployeeType()">
            <option value="manager">Manager</option>
            <option value="staff">Staff</option>
        </select>
        <input type="text" id="managerName" placeholder="Enter the manager name">
        <button id="addPerson" onclick="addPerson()">Person</button>
    </div>

When I console.log(getElementById("inputDiv").childNodes); it produces:

Actual Result :

NodeList(23) [text, input#name, text, input#age, text, input, text, input, text, input#language, text, input#empid, text, input#salary, text, input#experience, text, select#employeesType, text, input#managerName, text, button#addPerson, text]

• 0:text
• 1:input#name
• 2:text
• 3:input#age
• 4:text
• 5:input
• 6:text
• 7:input
• 8:text
• 9:input#language
• 10:text
• 11:input#empid
• 12:text
• 13:input#salary
• 14:text
• 15:input#experience
• 16:text
• 17:select#employeesType
• 18:text
• 19:input#managerName
• 20:text
• 21:button#addPerson
• 22:text
• length:23
• proto
• : NodeList

Expected Result :

NodeList(23) [text, input#name, text, input#age, text, input, text, input, text, input#language, text, input#empid, text, input#salary, text, input#experience, text, select#employeesType, text, input#managerName, text, button#addPerson, text]

• 0:input#name
• 1:input#age
• 2:input
• 3:text
• 4:input
• 5:text
• 6:input#language
• 7:input#empid
• 8:input#salary
• 9:input#experience
• 10:select#employeesType
• 11:input#managerName
• 12:button#addPerson
• length:13
• proto
• : NodeList

Answer 1

In HTML text elements are actually node elements.

Use children if you want only the "real elements" and create an array from them if you need an array of these elements:

console.log(Array.from(document.getElementById("inputDiv").children));

<div id="inputDiv">
  <input type="text" id="name" placeholder="Enter the name">
  <input type="text" id="age" placeholder="Enter the age">
  <input type="radio" name="gender" value="male" checked> Male
  <input type="radio" name="gender" value="female">Female
  <input type="text" id="language" placeholder="Enter the language">
  <input type="text" id="empid" placeholder="Enter a employeeId" disabled>
  <input type="text" id="salary" placeholder="Enter the salary">
  <input type="text" id="experience" placeholder="Enter experience">
  <select id="employeesType" onchange="ChangeEmployeeType()">
    <option value="manager">Manager</option>
    <option value="staff">Staff</option>
  </select>
  <input type="text" id="managerName" placeholder="Enter the manager name">
  <button id="addPerson" onclick="addPerson()">Person</button>
</div>