18910140161

JavaScript-如何在输入字段中与浏览器插入的影子DOM内容交互?-堆栈溢出

顺晟科技

2022-10-19 12:51:06

14

当前,我正在尝试设置一个函数,它将单击标签中的小时钟,但无法找到标签的innerHTML来查找时钟。

我想这样做:

HTML

JS

但是当我运行一个时,我得到null。

我认为这与Shadow DOM有关,但无法找到有关Shadow DOM输入的信息。

我以前可以检查隐藏的浏览器HTML,但找不到以前的资源。有什么想法吗?

要指定,我的应用程序只显示在Chrome和Opera浏览器上,因为它是Chrome扩展。


顺晟科技:

如果你想在Chrome DevTools中查看阴影,你必须在元素下的设置部分打开它。除非通过元素属性和事件处理程序,否则不能以编程方式与元素交互。

这将使影子根可见

可以将更改、输入和事件侦听器添加到组件本身,但不能添加到Shadowdom的元素。

有一种方法可以用纯js与开放的影子DOM交互,比如单击

示例:

如果使用google chrome,请检查并找到元素,在该元素上单击:copy js Path

然后您将获得单击所需的路径

无法与影子DOM交互。阴影树的全部目的是将功能、行为和样式与外部世界隔离开来--即使模式是“开放的”。如果某个特定组件的作者希望您能够控制行为或样式,他们将为此提供一个API。如果作者没有为它提供API,他们就不希望你用它胡闹。

在使用表单字段时,我的经验法则是始终遵循以下规则之一:

  1. 随时使用浏览器表单字段--不要对它过于花哨,因为您可能会破坏可访问性、键盘导航、自动填充和其他您不想破坏的东西。除了边框、背景和填充的样式之外,其他任何东西通常都不是一个好主意。您可能认为是这样,但我可以通过展示您如何破坏某些默认行为来证明您是错的。

例如,自动显示时间选择器会使用户的注意力从正在做的事情上转移开。也许屏幕阅读器正在阅读某些文本,或者某个高级用户正在使用键盘跳转导航,然后突然在他们不想的时候打开了时间选择器。

  1. 使用经过广泛测试的UI库。流行UI库的作者已经考虑到了所有的行为等等,以便为用户提供流畅和可预测的体验。当您想要执行自动显示日期/时间选择器或其他一些您可能不应该执行但无论如何都要执行的花哨行为时,请使用这些功能。

无论您做什么,都不要尝试滚动您自己的花哨窗体控件。我保证你会惹恼你的一个用户。

  • TAG:
相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航