如何结合BeautifulSoup与Selenium抓取Shadow DOM内的HTML代码？

核心问题说明 #

• driver.page_source不会包含Shadow DOM内的内容，因为Shadow DOM是与主DOM隔离的独立结构
• Selenium的ShadowRoot对象没有page_source属性，必须通过其他方式获取其内部HTML

具体解决步骤 #

1. 获取Shadow Root的内部HTML #

直接通过浏览器执行JavaScript获取Shadow Root的innerHTML，这是最可靠的方式：

# 假设已定位到包含Shadow DOM的宿主元素host_element
shadow_root = driver.execute_script('return arguments[0].shadowRoot', host_element)
# 提取Shadow Root内部的完整HTML代码
shadow_html = driver.execute_script('return arguments[0].innerHTML', shadow_root)

如果是多层嵌套的Shadow DOM，可通过JS链式获取每层的Shadow Root后再提取innerHTML。

2. 用BeautifulSoup解析Shadow HTML #

将获取到的shadow_html传入BeautifulSoup，即可解析并提取带标签的完整内容：

from bs4 import BeautifulSoup

soup = BeautifulSoup(shadow_html, 'html.parser')
# 示例：提取所有<h3>标签的完整HTML
for h3_tag in soup.find_all('h3'):
    print(str(h3_tag))  # 输出结果为<h3>apple</h3>这类完整代码

3. 完整示例代码 #

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

# 初始化浏览器驱动
driver = webdriver.Chrome()
driver.get("你的目标网站URL")

# 定位Shadow DOM的宿主元素（需根据实际页面结构调整选择器）
host_element = driver.find_element(By.CSS_SELECTOR, "宿主元素的CSS选择器")

# 获取Shadow Root及内部HTML
shadow_root = driver.execute_script('return arguments[0].shadowRoot', host_element)
shadow_html = driver.execute_script('return arguments[0].innerHTML', shadow_root)

# 解析并提取目标内容
soup = BeautifulSoup(shadow_html, 'html.parser')
target_h3 = soup.find_all('h3')
for elem in target_h3:
    print(str(elem))

# 关闭浏览器
driver.quit()

注意事项 #

• 若存在多层嵌套Shadow DOM，需逐层通过JavaScript获取每个层级的Shadow Root后提取innerHTML
• 确保宿主元素已加载完成，必要时使用WebDriverWait等待元素出现

内容的提问来源于stack exchange，提问作者김규민