本文介绍如何通过元素 id 快速获取其在父容器中子元素列表的 0 基索引（如 `#hjhn` 返回 `0`），提供简洁可靠的原生 js 实现，并涵盖边界处理与现代替代方案。
要实现类似 helo('#hjhn') → 0 的功能，核心思路是：定位目标元素 → 找到其父级容器 → 遍历该父级的所有子元素（仅限元素节点）→ 返回匹配元素的索引位置。
注意：HTML 中 parent.children 返回的是 HTMLCollection（只包含元素节点，不含文本/注释节点），且索引从 0 开始，这正符合题设需求。
以下是推荐的健壮实现：
const helo = (selector) => {
const target = document.querySelector(selector);
if (!target || !target.parentElement) return -1; // 元素不存在或无父节点
const parent = target.parentElement;
// 使用 Array.from + indexOf，语义清晰、兼容性好
const children = Array.from(parent.children);
return children.indexOf(target);
};
// 使用示例
console.log(helo('#hjhn')); // 0
console.log(helo('#uhed')); // 1
console.log(helo('#kdhs')); // 2
console.log(helo('#nonexistent')); // -1（安全兜底）✅ 优势说明：
立即学习“Java免费学习笔记（深入）”；
- 使用 Array.from() 将 HTMLCollection 转为数组，直接调用 indexOf() 获取精确位置，避免手动计数出错；
- 显式检查 target 和 parent，防止 null 或 undefined 导致运行时错误；
- 返回 -1 表示未找到（比 undefined 更符合约定，便于条件判断）。
⚠️ 注意事项：
- children 仅包含元素节点（<span>、<div> 等），不包含空白文本节点——这正是我们所需的，无需额外过滤；
- 若需支持更复杂的查找（如按类名、属性等），可将 selector 作为参数传入 querySelector，但本例聚焦 ID 定位；
- 不建议使用 parentNode.childNodes（含文本节点），否则索引会错乱。
? 进阶提示（ES6+ 简洁写法）：
const helo = (sel) => {
const el = document.querySelector(sel);
return el && el.parentElement
? Array.from(el.parentElement.children).indexOf(el)
: -1;
};该方案简洁、可靠、可读性强，适用于所有现代浏览器及 IE11+（Array.from 可通过 polyfill 支持）。无需依赖框架，开箱即用。
