最直接可靠的方式是使用 array.from(parent.children).indexof(el)，它返回元素在父节点同级元素中的索引（从0开始），忽略文本和注释节点；手动遍历 parent.children 也可行，适用于兼容老旧环境。

在 JavaScript 中，获取元素在其父节点中的索引位置，本质是计算该元素是父节点的第几个子元素（从 0 开始计数）。最直接可靠的方式是遍历父节点的 childNodes 或 children，但要注意两者的区别：前者包含所有节点（含文本、注释），后者只包含元素节点（Element 类型）。

使用 Array.prototype.indexOf() 配合 parent.children

这是最常用、语义最清晰的方法，适用于只想知道「同级元素中的顺序」（忽略文本节点）：

• 调用 element.parentElement.children 获取所有同级元素节点的 HTMLCollection
• 将其转为数组（或直接用 Array.from()），再用 indexOf(element)

示例：

  A
  文本内容
  B
  C

JavaScript：

const el = document.querySelector('strong');
const parent = el.parentElement;
const index = Array.from(parent.children).indexOf(el); // 返回 2

手动遍历 parent.children 计数

适合需要兼容老旧环境（如 IE8+），或想避免创建新数组时：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

• 用 for 循环遍历 parent.children
• 逐个比对是否等于目标元素，匹配即返回当前索引

示例：

function getElementIndex(el) {
  const parent = el.parentElement;
  if (!parent) return -1;
  const children = parent.children;
  for (let i = 0; i 

<h3>注意：<code>childNodes</code> 与 <code>children</code> 的区别</h3>
<p>如果父节点中存在空白文本节点（换行、缩进、空格），<code>childNodes</code> 会把它们算进去，而 <code>children</code> 不会：</p>

• 用 parent.childNodes.indexOf(el) 可能返回意外结果（比如本该是第 1 个元素，却因前面有文本节点而变成第 2 个）
• 除非你明确需要包含所有节点类型的索引（极少见），否则优先用 children

一行简洁写法（现代浏览器）

利用扩展运算符和 indexOf：

const index = [...el.parentElement.children].indexOf(el);

简洁且可读性好，ES6+ 环境推荐使用。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南