Почему дочерние узлы дают мне текст перед элементом ввода, когда я console.log родитель? - PullRequest
Новая
       10

Почему дочерние узлы дают мне текст перед элементом ввода, когда я console.log родитель?

0 голосов
/ 03 января 2019

Почему, когда я утешаю.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) [текст, имя # ввода, текст, ввод # возраст, текст, ввод, текст, ввод,текст, ввод # язык, текст, ввод # empid, текст, ввод # зарплата, текст, ввод # опыт, текст, выбор # сотрудникиТип, текст, ввод # менеджерName, текст, кнопка # addPerson, текст]

  • 0: текст
  • 1: ввод № имени
  • 2: текст
  • 3: ввод № возраста
  • 4: текст
  • 5: ввод
  • 6: текст
  • 7: ввод
  • 8: текст
  • 9: ввод # язык
  • 10: текст
  • 11: ввод # empid
  • 12: текст
  • 13: ввод # зарплата
  • 14: текст
  • 15: ввод # опыта
  • 16: текст
  • 17: выберите # employeeType
  • 18: текст
  • 19: введите # managerName
  • 20: текст
  • 21: кнопка # addPerson
  • 22: текст
  • длина: 23
  • proto
  • : NodeList

Ожидаемый результат:

NodeList (23) [text, input # name, text, input # age, text, input, text, input, text, input # language, text, введите # empid, текст, введите # зарплата, текст, введите # опыт, текст, выберите # employeeType, текст, введите # managerName, текст, кнопка # addPerson, текст]

  • 0: ввод № имени
  • 1: ввод № возраста
  • 2: ввод
  • 3: текст
  • 4: ввод
  • 5:текст
  • 6: ввод # язык
  • 7: ввод # empid
  • 8: ввод # зарплата
  • 9: ввод # опыт
  • 10: выберите # employeeType
  • 11: введите # managerName
  • 12: button # addPerson
  • длина: 13
  • proto
  • : NodeList

1 Ответ

0 голосов
/ 03 января 2019

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