在JavaScript / HTML中，在html的元素中寻找第X个某元素

举例：获取如下html中的第3个span元素：

<div class="sectionproducts_divnav">
    <span class="sectionproducts_divnav_item">111</span>
    <span class="sectionproducts_divnav_item">222</span>
    <span class="sectionproducts_divnav_item">333</span>
    <span class="sectionproducts_divnav_item">444</span>
</div>

要获取 HTML 中第 3 个 <span> 元素，最直接的方法是使用 CSS 选择器 搭配 querySelector / querySelectorAll，或者使用 getElementsByClassName 等集合方法。以下是几种常用且可靠的写法：

---

✅ 方法一：:nth-child 选择器（最推荐）

const thirdSpan = document.querySelector('.sectionproducts_divnav span:nth-child(3)');

• :nth-child(3) 选中父元素下的第三个子元素，无论其标签类型。
• 此 HTML 结构中第 1、2、3、4 个子元素都是 <span>，所以能准确选中。

---

✅ 方法二：querySelectorAll + 索引（通用性强）

const spans = document.querySelectorAll('.sectionproducts_divnav span');
const thirdSpan = spans[2];  // 索引从 0 开始，所以 2 对应第 3 个

• 如果父元素下还有其他标签（例如混入 <a>），该方法依然能正确按文档顺序获取所有 <span>。

---

✅ 方法三：按类名获取所有元素再索引

const items = document.getElementsByClassName('sectionproducts_divnav_item');
const thirdSpan = items[2];

• 本例中所有 <span> 都有该类名，可以直接获取，性能较好。

---

✅ 方法四：:nth-of-type 选择器

const thirdSpan = document.querySelector('.sectionproducts_divnav span:nth-of-type(3)');

• 选中父元素下第三个 <span> 类型的子元素。

---

⚠️ 注意

• 索引都是从 0 开始，第 3 个元素对应索引 2。
• 如果页面中有多个 sectionproducts_divnav，上述选择器默认只匹配第一个。如需匹配所有，请使用 querySelectorAll 并遍历。

---

只需选用其中一种方法，即可精准获取第三个 <span> 元素。