javascript - 当我 console.log 父节点时，为什么子节点在输入元素之前给我文本？

Question

为什么当我 console.log 父级的子节点时，它会将此“文本”作为其子节点之一？

我该如何克服它？

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

当我 console.log(getElementById("inputDiv").childNodes); 时，它会产生:

实际结果:

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:文本
• 1:输入#名称
• 2:文本
• 3:输入#年龄
• 4:文本
• 5:输入
• 6:文本
• 7:输入
• 8:文本
• 9:输入#语言
• 10:文字
• 11:输入#empid
• 12:文本
• 13:输入#工资
• 14:文字
• 15:输入#经验
• 16:文本
• 17:选择#employeesType
• 18:文本
• 19:input#managerName
• 20:文本
• 21:按钮#addPerson
• 22:文本
• 长度:23
• 原型(prototype)
• :节点列表

预期结果:

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:输入#名称
• 1:输入#年龄
• 2:输入
• 3:文本
• 4:输入
• 5:文本
• 6:输入#语言
• 7:输入#empid
• 8:输入#工资
• 9:输入#经验
• 10:选择#employeesType
• 11:input#managerName
• 12:按钮#addPerson
• 长度:13
• 原型(prototype)
• :节点列表

Answer 1

在 HTML 中，文本元素实际上是节点元素。

如果您只需要“真实元素”，请使用children；如果您需要这些元素的数组，则使用它们创建一个数组:

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>