You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Selenium如何点击div的data-marker属性内存储的元素

data-marker属性中存储的是转义格式的HTML字符串,这类内容默认不会被浏览器解析渲染为DOM树里的可交互节点,因此Selenium无法直接通过常规选择器定位到这部分内容里的链接、按钮。可以根据你的实际需求选择对应方案:

方案1:直接提取链接地址跳转(适配仅需点击链接的场景)

如果只需要实现跳转链接的需求,不需要触发按钮绑定的JS交互,不需要把HTML渲染到页面,直接从属性字符串里解析出目标链接地址访问即可,实现成本最低:

import re
from urllib.parse import urljoin
from selenium.webdriver.common.by import By

# 定位外层容器元素
container = driver.find_element(By.XPATH, '//div[@class="profil-block d-flex firm"]')
# 读取data-marker属性值(Selenium会自动解码属性内的转义字符)
marker_content = container.get_attribute('data-marker')
# 正则匹配提取a标签的href属性值
match_result = re.search(r'href="([^"]+)"', marker_content)
if match_result:
    target_path = match_result.group(1)
    # 拼接为完整URL,自动适配当前站点域名
    target_url = urljoin(driver.current_url, target_path)
    # 直接访问目标地址
    driver.get(target_url)
  • 优势:执行速度快,不需要额外操作DOM,没有元素遮挡、样式兼容类问题
  • 局限:无法处理属性中绑定了JS事件的按钮(比如示例中的电话、邮件点击按钮)
方案2:注入HTML到页面渲染为真实DOM后正常操作(适配复杂交互场景)

如果需要点击属性内的按钮、触发元素绑定的交互事件,可以通过JS脚本把转义后的HTML字符串注入到当前页面DOM树中,等浏览器完成解析渲染后,就可以用Selenium常规的定位方式操作这些元素:

from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

container = driver.find_element(By.XPATH, '//div[@class="profil-block d-flex firm"]')
marker_content = container.get_attribute('data-marker')

# 执行JS注入临时DOM节点
driver.execute_script("""
const parentEl = arguments[0];
const htmlStr = arguments[1];
// 创建临时容器
const tempDom = document.createElement('div');
tempDom.id = 'selenium-temp-marker';
// 直接赋值innerHTML,浏览器会自动解析HTML结构
tempDom.innerHTML = htmlStr;
// 把临时节点挂载到外层容器下
parentEl.appendChild(tempDom);
""", container, marker_content)

# 等待元素渲染完成、可点击后执行点击操作,示例点击名称对应的跳转链接
wait = WebDriverWait(driver, 10)
target_link = wait.until(EC.element_to_be_clickable(
    (By.CSS_SELECTOR, '#selenium-temp-marker a.text-decoration-none')
))
target_link.click()

# 操作完成后可移除临时节点,避免影响页面其他操作
driver.execute_script("document.getElementById('selenium-temp-marker').remove()")

注意:如果注入的元素被页面样式隐藏、被其他元素遮挡,可在JS脚本里调整临时容器的style属性(比如设置更高的z-index、调整display属性),确保元素处于可交互状态。

方案3:触发页面原生渲染逻辑(适配地图点位类场景)

从你给出的HTML包含经纬度data-lat/data-lon属性判断,这大概率是地图商家列表的点位数据,正常页面交互中点击地图上的对应点位时,前端会自动把data-marker里的HTML渲染为弹窗。这种场景不需要手动解析属性,直接触发外层容器的点击事件,等页面自动渲染出弹窗后定位弹窗内的元素点击即可:

from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

container = driver.find_element(By.XPATH, '//div[@class="profil-block d-flex firm"]')
# 点击外层元素触发原生弹窗渲染
container.click()
# 等待弹窗内链接可点击
wait = WebDriverWait(driver, 10)
pop_link = wait.until(EC.element_to_be_clickable(
    (By.CSS_SELECTOR, '.profil-block.firm.w-auto a')
))
pop_link.click()

内容的提问来源于stack exchange,提问作者user19271630

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.30 17:03:33