0
133
VistasSeleccione el texto div de la sombra de la página
Tengo un AppleScript que escribí que obtiene información de una página web (que no es mía), pero la página se actualizó recientemente, por lo que un valor que necesito está en el DOM oculto, y no en el DOM principal (como se muestra en el Inspector web de Safari ). Antes, estaba usando este AppleScript para recuperar el valor:
set dateText to (do JavaScript "$('input#release_week').attr('value')" in doc) as stringSiendo este el JavaScript operativo (usando jQuery porque la página de destino lo hace):
$('input#release_week').attr('value')Dado que el DOM evaluado ahora se ve así:
... <input id="release_week" type="text" value="02/02/2022"> <!-- Shadow Content (User Agent) <div contenteditable="plaintext-only">12/08/2021</div> --> </input> ... Siempre obtengo el valor del 02/02/2022 , cuando quiero el valor interno del 12/08/2021 en su lugar. He probado diferentes variaciones, usando la propiedad .shadowRoot , y el >>> "combinador de descendientes descendentes perforadores de sombras", ninguno de los cuales funcionó.
¿Qué nuevo código JavaScript puedo usar? El texto que busco se muestra y se puede seleccionar en la página, por lo que espero que haya una manera de acceder a él.
Actualización 2/3/22
Esta es la página de la que estoy tratando de obtener la fecha , y este es el elemento de la página del que estoy tratando de leer el texto (en la parte superior de la página), que no coincide con el valor de <input> después de hacer clic en una de las flechas:
3 Respuestas
Responde la pregunta0
No está relacionado con shadow DOM. Los siguientes elementos mantienen el valor:
<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">En la consola de devtool, si ejecuta uno de los siguientes, obtendrá el valor de fecha seleccionado real:
date_release_week.value date_begin[0].value date_begin[1].value Además, en Jquery, use la función val() para obtener el valor de 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'>0
Puede usar directamente el selector para la etiqueta div para obtener los datos. Aquí hay un ejemplo.
$(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>0
Entonces, si puede obtener el valor de un elemento en el documento principal, puede usar $.attr() para obtener lo que desea. Se puede hacer lo mismo si conoce el DOM oculto, usando $('input#release_week').closest('shadowRoot').find('div') .
En cuanto a qué JavaScript nuevo usar, o dónde buscar ayuda sobre cómo usarlo, no estoy seguro. Sé que hay un nuevo módulo que es parte del polyfill de Web Components llamado Element.prototype.getRootNode() , pero eso solo funciona para elementos en el documento principal; no hay equivalente para las raíces ocultas. Entonces, a menos que se agregue algo como esto a los componentes web (no creo que lo haga), entonces estás un poco atascado con jQuery simple, por lo que puedo decir.
Mi mejor suposición sería algo como esto:
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`).