如何像示例图那样定位h1和h2两个文本元素？
2026-8-6
定位页面中的h1和h2元素的常用方法
一、前端开发原生JS获取元素
- 按标签名批量获取：
- 获取全部h1元素：
document.getElementsByTagName('h1')（返回HTMLCollection，可通过索引取单个，如document.getElementsByTagName('h1')[0]） - 获取全部h2元素：
document.getElementsByTagName('h2')
- 获取全部h1元素：
- 定位单个元素：
- 页面第一个h1：
document.querySelector('h1') - 页面第一个h2：
document.querySelector('h2')
- 页面第一个h1：
- 批量获取并支持遍历：
- 所有h1：
document.querySelectorAll('h1')（返回NodeList，可直接用forEach遍历）
- 所有h1：
- 结合类名/ID精准定位（元素有专属标识时）：
- 带类名
page-header的h1：document.querySelector('h1.page-header') - 带ID
section-intro的h2：document.querySelector('#section-intro')
- 带类名
二、自动化测试场景（以Selenium为例）
Python 示例
- 按标签名定位：
- 单个h1：
driver.find_element(By.TAG_NAME, 'h1') - 所有h1：
driver.find_elements(By.TAG_NAME, 'h1') - 单个h2：
driver.find_element(By.TAG_NAME, 'h2')
- 单个h1：
- CSS选择器精准定位：
- 带类名
main-title的h1：driver.find_element(By.CSS_SELECTOR, 'h1.main-title')
- 带类名
- XPath定位（灵活匹配文本或层级）：
- 页面第一个h1：
driver.find_element(By.XPATH, '//h1[1]') - 包含文本"用户须知"的h2：
driver.find_element(By.XPATH, '//h2[text()="用户须知"]') - 包含部分文本的h2：
driver.find_element(By.XPATH, '//h2[contains(text(),"须知")]')
- 页面第一个h1：
Java 示例
- 单个h1元素：
driver.findElement(By.tagName("h1")); - 包含指定文本的h2：
driver.findElement(By.xpath("//h2[contains(text(),'部分文本')]"));
注意事项
如果目标h1/h2嵌套在iframe或Shadow DOM中，需要先切换到对应上下文再执行定位操作：
- 切换iframe示例（Selenium Python）：
driver.switch_to.frame('iframe-id') - 处理Shadow DOM示例（原生JS）：
document.querySelector('#shadow-host').shadowRoot.querySelector('h1')
内容的提问来源于stack exchange，提问作者frontendbee
相关产品推荐
相关产品推荐
