使用Selenium和JavaScript精准提取HTML标签内的直属文本内容

碧海醫心

发布时间：2025-10-01 13:52:01

688人浏览过

来源于php中文网

原创

使用selenium和javascript精准提取html标签内的直属文本内容

本教程详细阐述了如何利用Selenium的execute_script方法结合JavaScript，精准地从HTML标签中提取所有直接文本内容，而非其子元素中的文本。通过遍历DOM节点并识别TEXT_NODE类型，此方法能够有效解决传统文本提取方式的局限性，确保获取到纯粹的、非嵌套的文本信息。

在Web自动化测试和数据抓取中，我们经常需要从HTML元素中提取文本内容。然而，当一个标签内包含子标签和直接文本混合的情况时，简单的element.text属性或firstChild方法往往无法满足需求。例如，考虑以下HTML结构：

Name

Dompdf

dompdf是一个HTML到PDF转换器。在其核心，dompdf是一个（大部分）符合CSS 2.1标准的HTML布局和渲染引擎，使用PHP编写。它是一个以样式驱动的渲染器，它会下载并读取外部样式表，内联样式标签和单个HTML元素的样式属性。它还支持大多数表现性HTML属性。PDF渲染目前由PDFLib或由Wayne Munro编写的捆绑版本的R&OS CPDF类提供。（对R&OS类进行了一些重要的更改，但是）。为了使用dompdf与PDFLib，需要安装PDFLib PECL扩展。使用PD

下载

立即学习“Java免费学习笔记（深入）”；

agdsf

John Smith dfsdf Address:
NewYork

如果我们的目标是提取“John Smith Address: NewYork”，而忽略

、

、等子标签中的文本，传统的Selenium方法可能会遇到挑战。

传统方法的局限性

element.text属性： 这个属性通常会返回元素及其所有子元素中可见的文本内容，这会包含
Name

立即学习“Java免费学习笔记（深入）”；
中的“Name”以及agdsf中的“agdsf”，不符合我们只获取直属文本的需求。
driver.execute_script('return arguments[0].firstChild;', td_tag)['textContent']： 这种方法只能获取到元素的第一个子节点（如果它是文本节点）的文本。在上述例子中，td_tag的第一个子节点是
Name

立即学习“Java免费学习笔记（深入）”；
，所以它不会返回“John Smith”。即使第一个子节点是文本节点，它也无法获取后续的直属文本。

解决方案：利用JavaScript节点遍历

为了精准地提取所有直属文本节点，我们需要借助Selenium的execute_script方法，执行一段自定义的JavaScript代码。这段代码将遍历目标元素的所有直接子节点，并仅提取类型为TEXT_NODE的节点内容。

示例代码

以下是使用Python和Selenium实现此功能的代码：

from selenium import webdriver
from selenium.webdriver.common.by import By
import time

# 假设您已经设置好了WebDriver
# driver = webdriver.Chrome() # 或其他浏览器驱动

# 为了演示，我们创建一个虚拟的HTML页面
driver = webdriver.Chrome()
driver.get("data:text/html,Name
立即学习“Java免费学习笔记（深入）”；
agdsf
John SmithdfsdfAddress:
NewYork")
time.sleep(1) # 等待页面加载

# 查找目标td元素
td_tag = driver.find_element(By.ID, "td_id")

# 执行JavaScript代码提取直属文本
all_direct_text = driver.execute_script("""
    var node = arguments[0]; // 获取传入的td元素
    var text = ''; // 初始化一个空字符串用于存储结果

    // 遍历td元素的所有直接子节点
    for (var child = node.firstChild; child; child = child.nextSibling) {
        // 检查子节点是否是文本节点 (Node.TEXT_NODE 的值为 3)
        if (child.nodeType === Node.TEXT_NODE) {
            // 如果是文本节点，将其内容添加到结果字符串中，并去除首尾空白
            // 并在每个文本块后添加一个空格，以便区分
            text += child.textContent.trim() + ' ';
        }
    }
    // 返回最终结果，并去除末尾可能多余的空格
    return text.trim();
""", td_tag)

print(f"提取到的直属文本：'{all_direct_text}'")

# 预期输出：'John Smith Address: NewYork'

driver.quit()

代码解析

var node = arguments[0];：
- arguments[0]是JavaScript执行环境中接收到的第一个参数，这里即是从Python端传入的td_tag元素。
var text = '';：
- 初始化一个空字符串text，用于累积所有提取到的直属文本内容。
for (var child = node.firstChild; child; child = child.nextSibling)：
- 这是一个标准的JavaScript DOM遍历循环。
- node.firstChild：获取当前元素的第一个子节点。
- child：循环条件，当child为null（即没有更多子节点）时循环结束。
- child = child.nextSibling：在每次迭代后，将child更新为当前子节点的下一个兄弟节点。
if (child.nodeType === Node.TEXT_NODE)：
- 这是核心判断逻辑。nodeType属性返回节点的类型。Node.TEXT_NODE是一个常量，其值为3，表示该节点是一个纯文本节点。
- 通过此判断，我们确保只处理直接的文本内容，而忽略元素节点（如
  、
  
  、）。
- text += child.textContent.trim() + ' ';：
  - 如果当前子节点是文本节点，我们通过child.textContent获取其文本内容。
  - .trim()方法用于移除文本内容两端的空白字符（如换行符、空格）。
  - 在每个文本块后添加一个空格，以确保不同文本块之间有适当的分隔。
- return text.trim();：
  - 在循环结束后，返回累积的text字符串。
  - 最后的.trim()用于移除整个字符串末尾可能多余的一个空格。