Selenium中提取HTML标签内所有直接文本节点内容的高级技巧

在Web自动化测试或数据抓取过程中，我们经常需要从HTML元素中提取文本内容。然而，当一个标签内同时包含子元素和直接文本节点时，标准的Selenium方法（如element.text或获取firstChild的textContent）往往无法满足精确提取“直接文本”的需求。例如，考虑以下HTML结构：

<td id="td_id">
  <p>Name</p>
  <div>
    <span>agdsf</span>
  </div>
  John Smith
  <span>dfsdf</span>
  Address:
  <br>
  NewYork
</td>

如果我们的目标是提取<td>标签内所有非嵌套在其他元素中的文本节点，即“John Smith Address: NewYork”，那么传统方法会遇到以下挑战：

• td_tag.text: 此属性会返回元素及其所有子元素的可见文本内容，包括<p>Name</p>和<span>agdsf</span>中的文本，导致结果过于宽泛。
• driver.execute_script('return arguments[0].firstChild;', td_tag)['textContent']: 这种方法只能获取到第一个子节点的文本内容。在上述DOM中，firstChild是<p>Name</p>元素，其textContent会是“Name”，或者如果第一个是文本节点，则只获取该文本节点。这无法获取到所有直接文本节点。

为了精确地提取<td>标签内所有的直接文本节点内容，我们需要借助Selenium的execute_script方法来执行一段JavaScript代码，该代码能够遍历目标元素的所有直接子节点，并识别出其中的文本节点（Node.TEXT_NODE）。

解决方案：使用JavaScript遍历并过滤文本节点

以下是实现这一目标的Python和JavaScript组合代码：

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

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

# 假设 driver 已经初始化并导航到包含目标元素的页面
# driver = webdriver.Chrome()
# driver.get("your_page_url.html")

# 为了演示，我们模拟一个 driver 和 td_tag
class MockWebElement:
    def __init__(self, element_id):
        self.id = element_id

    def find_element(self, by, value):
        if by == By.ID and value == "td_id":
            return self
        raise Exception("Element not found")

    def execute_script(self, script, element):
        # 模拟浏览器执行JS并返回结果
        if element.id == "td_id":
            # 这里的JS会根据上面提供的DOM结构进行模拟计算
            # 实际浏览器会直接执行并返回
            dom_structure = """
            <td id="td_id">
              <p>Name</p>
              <div>
                <span>agdsf</span>
              </div>
              John Smith
              <span>dfsdf</span>
              Address:
              <br>
              NewYork
            </td>
            """
            # 简化模拟，直接返回预期结果
            return "John Smith Address: NewYork"
        return ""

# 真实场景下，您会这样初始化 driver
driver = webdriver.Chrome() # 或其他浏览器驱动
driver.get("file:///path/to/your/html/file.html") # 替换为您的HTML文件路径或网页URL

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

# 执行JavaScript代码来提取所有直接文本节点
all_direct_text = driver.execute_script("""
    var node = arguments[0]; // 获取Selenium传递过来的元素
    var text = '';
    // 遍历目标元素的所有直接子节点
    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}\"")

# 完成后关闭浏览器
driver.quit()

代码解析：

DeepBrain

AI视频生成工具，ChatGPT +生成式视频AI =你可以制作伟大的视频!

94

查看详情

1. td_tag = driver.find_element(By.ID, "td_id"): 首先，通过Selenium定位到目标<td>元素。
2. var node = arguments[0];: 在JavaScript中，arguments[0]用于接收从Selenium Python代码中传递过来的第一个参数，即我们定位到的td_tag元素。
3. for (var child = node.firstChild; child; child = child.nextSibling): 这是一个标准的JavaScript循环，用于遍历node（即td_tag）的所有直接子节点。
   • node.firstChild：获取第一个子节点。
   • child：循环条件，当child为null时（即没有更多子节点），循环终止。
   • child = child.nextSibling：在每次迭代后，将child更新为当前节点的下一个兄弟节点。
4. if (child.nodeType === Node.TEXT_NODE): 这是核心判断逻辑。
   • child.nodeType：返回节点的类型。
   • Node.TEXT_NODE：这是一个常量，其值为3，表示节点是一个文本节点。通过此判断，我们能精确地筛选出那些不属于元素标签的纯文本内容。
5. text += child.textContent.trim() + ' ';: 如果当前子节点是文本节点，我们将其textContent（即文本内容）添加到text变量中。
   • .trim()：用于去除文本内容前后的空白字符，确保拼接的文本干净整洁。
   • + ' '：在每个文本节点内容后添加一个空格，以分隔不同的文本片段，提高可读性。
6. return text.trim();: 最后，返回拼接好的text字符串，并再次使用.trim()去除整个字符串末尾可能多余的空格。

运行结果与解释

对于给定的DOM结构：

<td id="td_id">
  <p>Name</p>
  <div>
    <span>agdsf</span>
  </div>
  John Smith
  <span>dfsdf</span>
  Address:
  <br>
  NewYork
</td>

上述代码的输出将是：

提取到的直接文本内容: "John Smith Address: NewYork"

解释：

• Node.TEXT_NODE 准确地识别了 John Smith、Address: 和 NewYork 这三段文本，因为它们是<td>元素的直接文本子节点。
• <p>Name</p>、<div>...</div> 和 <span>dfsdf</span> 是<td>元素的元素子节点（Node.ELEMENT_NODE），它们的文本内容并未被此脚本提取，这正是我们所需“直接文本”的精确定义。
• <br> 也是一个元素节点，不包含文本。

注意事项

• 精确性： 这种方法能够精确区分元素节点和文本节点，确保只提取目标元素下的直接文本内容，避免了提取子元素内部文本的干扰。
• 空白字符处理： trim()函数的使用有效地处理了HTML中常见的空白字符（如换行符、制表符、多余空格），使提取的文本更加干净。
• 适用场景： 当你需要从一个包含复杂子结构的父元素中，仅获取那些不属于任何子元素的“散落”文本时，此方法非常有效。
• 性能： 对于包含大量子节点的复杂DOM结构，频繁执行JavaScript可能会有轻微的性能开销，但对于大多数常见的Web页面而言，这种影响可以忽略不计。
• 与element.text的区别： 再次强调，element.text会返回元素及其所有可见子元素的文本内容，而本教程的方法只返回目标元素的直接文本节点内容。理解这两种方法的区别对于选择正确的提取策略至关重要。

通过这种结合Selenium和JavaScript的方法，您可以更灵活、更精确地从复杂的HTML结构中提取所需文本，从而提高自动化脚本的健壮性和准确性。

以上就是Selenium中提取HTML标签内所有直接文本节点内容的高级技巧的详细内容，更多请关注php中文网其它相关文章！