如何提取HTML DOM的第一级子元素并按顺序存入数组

嘿，我来帮你搞定这个需求！要把存储的DOM元素的第一级子元素按原顺序提取成数组，用JavaScript原生API就能轻松实现，下面给你两种适配不同场景的方案：

方案一：仅提取元素节点（推荐） #

如果你的目标是只获取HTML元素节点（像示例里的<h1>、<p>这类，自动跳过空格、换行这类文本节点），直接用children属性最方便：

// 假设你的DOM父元素存储在parentElement变量中
const parentElement = document.querySelector('.your-parent-container'); // 替换成你的选择器或直接用已存储的DOM变量

// 将HTMLCollection转换为数组
const firstLevelChildren = Array.from(parentElement.children);

为什么推荐这个？ #

parentElement.children返回的是HTMLCollection，仅包含父元素下的第一级元素节点，完全符合你示例里的需求——运行后数组里会按原顺序依次是<h1>Indice</h1>、第一个<p>元素、第二个<p>元素、第三个<p>元素。

方案二：自定义筛选所有子节点 #

如果你需要更灵活的筛选（比如要包含注释节点，或者自定义过滤规则），可以用childNodes结合过滤：

const parentElement = document.querySelector('.your-parent-container');

// 先把NodeList转成数组，再筛选出元素节点
const firstLevelChildren = Array.from(parentElement.childNodes).filter(node => {
  // Node.ELEMENT_NODE的值是1，代表元素节点
  return node.nodeType === Node.ELEMENT_NODE;
});

这个方法的优势是可以根据需求修改过滤条件，比如如果想保留注释节点，就把条件改成node.nodeType === Node.COMMENT_NODE即可。

内容的提问来源于stack exchange，提问作者Cool Guy