Не могу понять, в чем ошибка?

Question

[Анатолий]

В консоли получаю ошибку, что "a.childNodes.reduce is not a function", что не так?

<div class="a">
  <input type="text" value="1">
  <input type="text" value="33">
  <input type="text" value="55">
  <input type="text" value="d">  
</div>
<div class="out"></div>

const a = document.querySelector('.a');
const out = document.querySelector('.out');
out.textContent = a.childNodes.reduce((acc, x) => { return acc + x.value }, '');

Answer 1

[Чипекве]

childNodes возвращает не массив

Comments

[Анатолий]

1. А что возвращает?
2. Как решить эту задачу?

[Чипекве]

https://developer.mozilla.org/ru/docs/Web/API/NodeList (причем со всеми текстовыми элементами, в т.ч. пробелами и переносами)

[...a.querySelectorAll('input')].reduce((acc, x) => acc + x.value, '')

или

Array.from(a.querySelectorAll('input'), (input) => input.value).reduce((acc, val) => acc + val)

[Анатолий]

Чипекве, первый вариант у меня почему-то не сработал, второй сработал, но вопрос, а зачем столько лишнего, вот так тоже работает:

Array.from(a.children).reduce((acc, x) => acc + x.value, '');

[beDenz]

Анатолий, посмотрите, что будет в Array.from(a.children), увидите, что там не только инпуты

[Анатолий]

beDenz, поясните.
https://codepen.io/workcode/pen/GREzpXo