如何将div的所有子元素转换为数组？现有代码输出为空

你的代码问题在哪？ #

1. 拼写错误：JS里获取文档对象是小写的document，你写的Document是构造函数，根本拿不到元素，控制台当然为空。
2. 选择器误用：:scope > div不符合你的需求，你要的是目标div内部的所有子内容，不是找它的子div元素。
3. 逻辑偏离需求：你预期的输出是把整个div的HTML内容转为字符串放进数组，但之前的代码连正确获取目标div都没做到，后续处理自然无法生效。

正确代码实现 #

场景1：把div的所有子节点（文本+元素）转成数组 #

先给目标div加个id方便定位，比如<div id="targetDiv">...</div>，代码如下：

convertToArray() {
  // 获取目标div
  const targetDiv = document.getElementById('targetDiv');
  // 将childNodes（类数组）转为真正的数组，包含所有文本、元素节点
  const childNodesArray = Array.from(targetDiv.childNodes);
  console.log(childNodesArray);
}

场景2：实现你预期的输出格式（数组中包含整个div的HTML字符串） #

同样先定位目标div，直接获取它的HTML内容并塞进数组：

convertToArray() {
  const targetDiv = document.getElementById('targetDiv');
  // 获取整个div的HTML（包括自身标签），若只需内部内容则换成innerHTML
  const divHTML = targetDiv.outerHTML;
  // 放入数组
  const numbers = [divHTML];
  console.log(numbers);
}

注：你给出的预期输出里最后一个div标签未闭合，实际代码会输出正确闭合的</div>。

为啥之前的方法无效？ #

你注释掉的Array.prototype.slice.call(nodes)和Array.from(numbers)本身是正确的类数组转数组方法，但前提是你得先拿到有效的类数组对象（比如childNodes、querySelectorAll的结果）。之前的代码连目标元素都没正确获取到，这些方法自然发挥不了作用。

内容的提问来源于stack exchange，提问作者Marius Gardelli