Select 阴影 div 页面中的文本

Question

我有一个我写的 AppleScript，它从网页（不是我的）获取一些信息，但该页面最近更新了，所以我需要的值在阴影 DOM 中，而不是主要的DOM（如 Safari 的 Web 检查器所示）。之前，我使用这个 AppleScript 来检索值：

set dateText to (do JavaScript "$('input#release_week').attr('value')" in doc) as string

这是有效的 JavaScript（使用 jQuery 因为目标页面确实如此）：

$('input#release_week').attr('value')

因为评估的 DOM 现在看起来像这样：

...
<input id="release_week" type="text" value="02/02/2022">
    <!-- Shadow Content (User Agent)
    <div contenteditable="plaintext-only">12/08/2021</div>
    -->
</input>
...

当我想要内部 12/08/2021 值时，我总是取回 02/02/2022 值。我尝试了不同的变体，使用 .shadowRoot 属性和 >>> “shadow-piercing descendant combinator”，两者都不起作用。

我可以使用哪些新的 JavaScript 代码？我正在寻找的文本显示在页面上并且可以选择，所以我希望有一种方法可以找到它。

更新 2/3/22

This is the page I'm trying to get the date from，这是我试图从（页面顶部）读取文本的页面元素，它与 <input> 之后的值不匹配您单击其中一个箭头：

Answer 1

您可以直接使用div标签的选择器来获取数据。这是一个例子。

$(document).ready(function(){
  $('#btn').on('click', function(){
   alert($('div[contenteditable="plaintext-only"]').text());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<input id="release_week" type="text" value="02/02/2022">
    <!-- Shadow Content (User Agent) -->
    <div contenteditable="plaintext-only">12/08/2021</div>
</input>

<button id='btn'>GetData</button>
<label id='data'></label>

Answer 2

因此，如果您可以获取主文档中某个元素的值，则只需使用 $.attr() 即可获取您想要的内容。如果你知道影子 DOM，使用 $('input#release_week').closest('shadowRoot').find('div').

也可以这样做

至于要使用哪个新 JavaScript，或者到哪里寻找有关如何使用它的帮助，我不确定。我知道有一个新模块是 Web Components polyfill 的一部分，名为 Element.prototype.getRootNode()，但它只适用于主文档中的元素——影子根没有等效项。因此，除非像这样的东西被添加到 Web 组件中（我不认为它会），否则据我所知你有点被普通 jQuery 困住了。

我最好的猜测是这样的：

var root = someElementShadowRoot;
while (root) {
    if (root === document) { // your main document object
        return; // stop traversing and return element; it's not shadow DOM!
    } else { // this is a shadow DOM node tree, recurse deeper into its hierarchy
        root = root.getRootNode(); // returns a reference node / parent node / null (if at top of shadow DOM tree) -> recursive call! if statement will keep running until it finds the document and returns nothing
    }
}
return someElement; // you've reached the top of the shadow DOM tree; this is where you want to start. It may be possible that `someElement` is not actually a shadow root node, but it will be at this point (`someElement.getRootNode() === someElement`).

Answer 3

与阴影无关DOM。以下元素保持值：

<input id="date_release_week" type="text" name="date_release_week" class="filter-options-date date-pick dp-applied hasDatepicker" maxlength="255" autocomplete="off" value="02/02/2022">
<input id="date_begin" type="hidden" name="date_begin" class="filter-options-date-begin" maxlength="255" autocomplete="off" value="02/02/2022">
<input id="date_begin" type="hidden" name="date_begin" class="filter-options-date-begin" maxlength="255" autocomplete="off" value="02/03/2022">

在 devtool 控制台中，如果您运行以下其中一项，您将获得实际选择的日期值：

date_release_week.value
date_begin[0].value
date_begin[1].value

此外，在Jquery中，使用val()函数得到input值：

$('input#date_release_week').change(() => {
  console.log('attr(\'val\'): ' + $('input#date_release_week').attr('value'));
  
  console.log('val(): ' + $('input#date_release_week').val());

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Type something and press enter.
<input type="text" id="date_release_week" name="name" required minlength="4" maxlength="8" size="10" value='add'>

Select 阴影 div 页面中的文本

Select shadow div text from page

javascript

jquery

applescript

shadow-dom