当我 console.log parent 时，为什么 childNodes 在输入元素之前给我文本？

Question

为什么当我 console.log parent 的子节点时它给我这个 'text' 作为他们的子节点之一？

我该如何克服它？

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

预期结果：

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:输入#name
1:输入#年龄
2:输入
3:文字
4:输入
5:正文
6:输入#语言
7:输入#empid
8:输入#工资
9:输入#经验
10:select#employeesType
11:输入#managerName
12:按钮#addPerson
长度:13
原型
: 节点列表

Answer 1

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

如果您只需要 "real elements"，请使用 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>

当我 console.log parent 时，为什么 childNodes 在输入元素之前给我文本？

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

javascript

html

css

dom

nodelist