举例：获取如下html中的第3个span元素：
html
<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 选择器（最推荐）
javascript
const thirdSpan = document.querySelector('.sectionproducts_divnav span:nth-child(3)');:nth-child(3)选中父元素下的第三个子元素，无论其标签类型。- 此 HTML 结构中第 1、2、3、4 个子元素都是
<span>，所以能准确选中。
✅ 方法二：querySelectorAll + 索引（通用性强）
javascript
const spans = document.querySelectorAll('.sectionproducts_divnav span');
const thirdSpan = spans[2]; // 索引从 0 开始，所以 2 对应第 3 个- 如果父元素下还有其他标签（例如混入
<a>），该方法依然能正确按文档顺序获取所有<span>。
✅ 方法三：按类名获取所有元素再索引
javascript
const items = document.getElementsByClassName('sectionproducts_divnav_item');
const thirdSpan = items[2];- 本例中所有
<span>都有该类名，可以直接获取，性能较好。
✅ 方法四：:nth-of-type 选择器
javascript
const thirdSpan = document.querySelector('.sectionproducts_divnav span:nth-of-type(3)');- 选中父元素下第三个
<span>类型的子元素。
⚠️ 注意
- 索引都是从 0 开始，第 3 个元素对应索引 2。
- 如果页面中有多个
sectionproducts_divnav，上述选择器默认只匹配第一个。如需匹配所有，请使用querySelectorAll并遍历。
只需选用其中一种方法，即可精准获取第三个 <span> 元素。