使用Selenium高效抓取层级式H2标题与P标签内容-html教程-PHP中文网

使用Selenium高效抓取层级式H2标题与P标签内容

DDD

发布： 2025-11-01 12:33:19

原创

406人浏览过

使用Selenium高效抓取层级式H2标题与P标签内容

本教程详细介绍了如何使用selenium和xpath策略，从具有`

`和`

`标签的层级式html结构中高效抓取文章标题及其对应的内容。通过构建一个字典来关联标题与段落，并利用`preceding-sibling` xpath轴，实现结构化数据提取，最终生成标题列表和聚合内容的列表。

在Web scraping任务中，经常需要从非标准但有特定层级关系的HTML结构中提取数据。一个常见的场景是，文章内容由一系列

标签作为标题，其后紧跟着多个

标签作为正文段落，直到下一个

标签出现。本教程将详细讲解如何使用Selenium结合XPath，高效地抓取这种结构下的所有

标题及其对应的

标签内容，并将其整理成结构化的数据格式。

1. 理解目标数据结构与挑战

假设我们有以下HTML片段：

<h2><span>Title1</span></h2>
<p>text I want</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/754">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175679972542147.png" alt="秒哒">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/754">秒哒</a>
                            <p>秒哒-不用代码就能实现任意想法</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="秒哒">
                                <span>584</span>
                            </div>
                        </div>
                        <a href="/ai/754" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="秒哒">
                        </a>
                    </div>
                
<p>text I want</p>
<h2><span>Title2</span></h2>
<p>text I want</p>
<p>text I want</p>
<p>text I want</p>
<h2><span>Title3</span></h2>
<p>text I want</p>
<p>text I want</p>

登录后复制

我们的目标是提取一个标题列表 ['Title1', 'Title2', 'Title3'] 和一个内容列表 ['content1', 'content2', 'content3']，其中 contentX 是 TitleX 下所有

标签文本的拼接。直接按顺序提取

和

标签会导致内容与标题的对应关系混乱，因为一个标题可能对应多个段落。

2. 核心策略：利用字典与XPath preceding-sibling

解决此问题的关键在于建立标题与段落之间的正确关联。我们可以采用以下策略：

初始化字典： 首先遍历所有
标签，以它们的文本作为字典的键，初始值设为空字符串。这样，每个标题都预先在字典中占有一个位置。
关联段落内容： 接着遍历所有
标签。对于每个

标签，我们需要找到它“属于”哪个

标题。XPath的preceding-sibling::h2[1]轴选择器非常适合此任务，它会选择当前元素前面最近的第一个
同级元素。
聚合内容： 找到对应的
标题后，将当前

标签的文本追加到字典中该标题键对应的值上。

3. 环境准备

在开始之前，请确保您已安装Python和Selenium库，并配置好WebDriver（例如ChromeDriver）。

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.service import Service
from webdriver_manager.chrome import ChromeDriverManager

# 自动下载并安装ChromeDriver
driver = webdriver.Chrome(service=Service(ChromeDriverManager().install()))

登录后复制

为了演示，我们将使用一个包含目标HTML结构的本地数据URI：

html_content = '''
<h2><span>Title1</span></h2>
<p>text I want</p>
<p>text I want</p>
<h2><span>Title2</span></h2>
<p>text I want</p>
<p>text I want</p>
<p>text I want</p>
<h2><span>Title3</span></h2>
<p>text I want</p>
<p>text I want</p>
'''
driver.get("data:text/html;charset=utf-8," + html_content)

登录后复制

4. 实现步骤与代码示例

4.1 初始化数据结构

首先，遍历页面中所有的

标签，提取它们的文本作为字典的键，并初始化一个空字符串作为值。

# 找到所有h2标签，并以其文本作为键初始化字典
# 注意：h2标签内可能有span，这里直接取h2的text即可
data = dict((e.text, '') for e in driver.find_elements(By.CSS_SELECTOR, 'h2'))
print("初始字典:", data)
# 预期输出: {'Title1': '', 'Title2': '', 'Title3': ''}

登录后复制

4.2 关联并聚合

标签内容

接下来，遍历所有

标签。对于每个

标签，使用XPath找到其最近的前一个

同级元素，并将其文本作为键，将

标签的文本追加到字典中对应的值。

# 遍历所有p标签，将其内容追加到对应的h2键下
for p_tag in driver.find_elements(By.CSS_SELECTOR, 'p'):
    # 使用XPath的preceding-sibling::h2[1]找到最近的前一个h2标签
    # 并获取其文本作为当前p标签的所属标题
    parent_h2_text = p_tag.find_element(By.XPATH, './preceding-sibling::h2[1]').text
    # 将p标签的文本追加到对应h2标题的值中
    data[parent_h2_text] += ' ' + p_tag.text

print("\n填充内容后的字典:", data)
# 预期输出: {'Title1': ' text I want text I want', 'Title2': ' text I want text I want text I want', 'Title3': ' text I want text I want'}

登录后复制

4.3 整理最终输出格式

字典data现在包含了我们所需的所有信息。我们可以根据需求将其转换为不同的格式，例如独立的标题列表和内容列表，或者一个更结构化的列表字典。

方式一：转换为独立的标题和内容列表

titles = list(data.keys())
contents = list(data.values())

print("\n标题列表:", titles)
# 预期输出: ['Title1', 'Title2', 'Title3']
print("内容列表:", contents)
# 预期输出: [' text I want text I want', ' text I want text I want text I want', ' text I want text I want']

登录后复制

方式二：转换为列表字典（推荐）

将数据组织成一个列表，其中每个元素都是一个包含'title'和'content'键的字典，这种格式在后续数据处理和存储时更为清晰和方便。

structured_data = [{'title': title, 'content': content} for title, content in data.items()]
print("\n结构化数据列表:")
for item in structured_data:
    print(item)

# 预期输出:
# {'title': 'Title1', 'content': ' text I want text I want'}
# {'title': 'Title2', 'content': ' text I want text I want text I want'}
# {'title': 'Title3', 'content': ' text I want text I want'}

登录后复制

5. 完整代码示例

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.service import Service
from webdriver_manager.chrome import ChromeDriverManager

# 1. 初始化WebDriver
driver = webdriver.Chrome(service=Service(ChromeDriverManager().install()))

# 2. 准备HTML内容（这里使用data URI进行演示）
html_content = '''
<h2><span>Title1</span></h2>
<p>text I want</p>
<p>text I want</p>
<h2><span>Title2</span></h2>
<p>text I want</p>
<p>text I want</p>
<p>text I want</p>
<h2><span>Title3</span></h2>
<p>text I want</p>
<p>text I want</p>
'''
driver.get("data:text/html;charset=utf-8," + html_content)

# 3. 初始化字典，以h2标签文本为键
data = dict((e.text, '') for e in driver.find_elements(By.CSS_SELECTOR, 'h2'))

# 4. 遍历p标签，填充内容
for p_tag in driver.find_elements(By.CSS_SELECTOR, 'p'):
    # 使用XPath找到当前p标签最近的前一个h2标签的文本
    parent_h2_text = p_tag.find_element(By.XPATH, './preceding-sibling::h2[1]').text
    # 将p标签的文本追加到对应h2标题的值中
    data[parent_h2_text] += ' ' + p_tag.text

# 5. 将结果转换为结构化列表字典
structured_data = [{'title': title, 'content': content.strip()} for title, content in data.items()]

# 6. 打印结果
print("最终提取的结构化数据:")
for item in structured_data:
    print(item)

# 7. 关闭WebDriver
driver.quit()

登录后复制

输出示例:

最终提取的结构化数据:
{'title': 'Title1', 'content': 'text I want text I want'}
{'title': 'Title2', 'content': 'text I want text I want text I want'}
{'title': 'Title3', 'content': 'text I want text I want'}

登录后复制

6. 注意事项

XPath的准确性： preceding-sibling::h2[1] 确保我们总是找到最近的一个
标签。如果HTML结构更复杂，可能需要调整XPath表达式。
文本清洗： 在拼接
标签内容时，可能会引入多余的空格或换行符。在最终处理数据时，可以使用strip()方法去除首尾空格，或使用正则表达式进行更复杂的清洗。
错误处理： 在实际抓取过程中，如果某个
标签没有找到对应的

前置同级元素（例如，它是页面中的第一个

标签），find_element可能会抛出NoSuchElementException。在生产代码中，应添加try-except块来处理这些潜在的异常。
性能考量： 对于非常大的页面，频繁调用find_element可能会有性能开销。然而，对于大多数常规页面，这种方法是高效且可读性强的。
替代方案： 对于更复杂的树形结构，或者当
和

并非严格的同级关系时，可能需要考虑使用BeautifulSoup等库进行DOM解析，或者构建更复杂的XPath/CSS选择器组合。