1. Shadow DOM是什么？
Shadow DOM是在Web开发中使用的一种技术，主要用于封装Web元素的样式和结构。这里的“封装”意味着保护Shadow DOM内部的Web元素免受外部影响，并保持独立。
2. Shadow DOM与iframe的区别
Shadow DOM和iframe都是在Web页面中创建独立区域的技术，但用途和功能不同。
下面总结了三个主要区别。
2.1. 封装 vs 插入
Shadow DOM的核心是“封装”。使用Shadow DOM可以将Web元素的内部结构和样式与外部环境隔离开来。这样一来，可以防止同一Web页面中的其他元素的样式或脚本发生冲突。
另一方面，iframe侧重于“插入”的概念。iframe允许将另一个Web页面嵌入到当前页面中作为独立窗口。例如，当在Web页面中嵌入YouTube视频或Google Maps时，会使用iframe。
2.2. 样式和脚本
外部样式和脚本不会影响Shadow DOM内部，反之亦然，Shadow DOM内部的样式和脚本不会影响外部元素。
同样，iframe中父页面的样式和脚本不会影响iframe内部，iframe内部的内容也不会影响父页面。
2.3. 安全性
由于Shadow DOM与页面的其余部分隔离，因此从外部访问Shadow DOM内部的数据或功能变得更加复杂。这并不意味着增强安全性，但有助于防止意外访问内部结构或数据。
对于iframe，如果外部来源是不可信的页面，则存在用户数据或信息泄霩的风险，而且如果通过HTTP加载iframe内容，则整个页面的安全性可能会降低。
有关与iframe相关的安全问题和爬取的详细信息，请查看之前的文章。
3. Shadow DOM爬取方法
通常，为了访问Web页面的HTML元素，我们使用CSS选择器或XPath等工具。但是在Shadow DOM的情况下，无法使用这些工具访问内部。因此，我们需要使用JavaScript直接访问Shadow DOM的“root”。
假设有以下结构的Web页面。
- HTML示例:
<custom-settings>
#shadow-root
<settings-panel>
#shadow-root
<settings-content>
#shadow-root
<input id="customInput">
</settings-content>
</settings-panel>
</custom-settings>
像上面的例子一样，Shadow DOM通常具有多层嵌套结构。因此，要访问
<input id="customInput">
，需要逐层查找Shadow Root。
以下是使用Selenium访问Shadow Root的Python代码示例。
def get_shadow_root(element, driver):
return driver.execute_script('return arguments[0].shadowRoot', element)
driver = ... # Selenium 웹 드라이버 초기화
# 첫 번째 Shadow DOM 접근
root1 = driver.find_element_by_tag_name('custom-settings')
shadow_root1 = get_shadow_root(root1, driver)
# 두 번째 Shadow DOM 접근
root2 = shadow_root1.find_element_by_tag_name('settings-panel')
shadow_root2 = get_shadow_root(root2, driver)
# 세 번째 Shadow DOM 접근
root3 = shadow_root2.find_element_by_tag_name('settings-content')
shadow_root3 = get_shadow_root(root3, driver)
# 원하는 요소에 접근
input_element = shadow_root3.find_element_by_id("customInput")
通过上述代码，可以按顺序遍历Shadow DOM的层次结构并访问所需的元素。
重要的是，由于每个Shadow DOM内部的每个层次都有独立的DOM，因此必须获取该层次的Shadow Root才能访问下一个层次的元素。
4. 结论：利用Shadow DOM爬取获取隐藏数据。
随着Web结构的复杂化，具有“隐藏元素”的代码将会增多。
今天我们比较了iframe和Shadow DOM的特性和区别，并进行了一个简单示例，让您可以直接尝试爬取，以便应对开发技术的发展，不断研究和掌握访问所需数据的方法是非常重要的。
一起阅读：
数据收集，现在自动化
开始无需编码，5分钟即可开始 · 5000多个网站爬取经验
