堆棧內存溢出
  簡體   English   中英

我可以使用 jQuery 訪問 shadow DOM 嗎？

[英]Can I access the shadow DOM using jQuery?

 原文  2014-01-19 15:43:04  0   10    javascript/ jquery/ dom/ polymer/ shadow-dom

問題描述

我用這樣的聚合物定義了一個組件：

<polymer-element name="my-component">
  <template>
    <div id='test'>CONTENT</div>
  </template>
</polymer-element>

現在我想訪問shadow dom，例如：獲取div id='test'的內容

var x = $("div#test").html();

給定的代碼不起作用。 我可以使用 jquery 訪問 shadow dom 嗎？

10 個解決方案

解決方案1
 21 已采納  2014-01-19 16:01:12

不，不在 Polymer 元素之外。

在閱讀了 Polymer 之后，看起來您只能訪問 Polymer 元素內腳本中 Polymer 元素的 shadow-DOM。 自動節點查找的 Polymer 文檔說：

組件的 shadow DOM 中標記有 id 屬性的每個節點都會在組件的 this.$ 哈希中自動引用。

這意味着您可以添加一個<script>標簽作為<template>的同級標簽，其中this.$.test將是您想要的元素。

<polymer-element name="my-component">
  <template>
    <div id='test'>CONTENT</div>
  </template>
  <script>
    Polymer('my-component', {
        logNameValue: function () {
            console.log('polymer element', this.$.test);
            console.log('jQuery wrapper of polymer element', $(this.$.test));
        }
    });
  </script>
</polymer-element>

解決方案2
 11  2014-07-29 01:29:32

您可以使用$('body /deep/ your-selector')模式穿透 shadow DOM 並讓 Jquery 在其中工作。

更新：到目前為止，我只能在桌面版 chrome 上完成這項工作。 我相信，其他瀏覽器不支持 /deep/ 組合器。

更新 2 ： /deep/組合器已棄用，不應再使用。 它計划從 Chrome 中刪除。

解決方案3
 5  2019-10-16 16:35:11

我可以像這樣訪問 Chrome 中的 shadowRoot 元素：

$("#idOfElementInShadowRoot", $("#idOfShadowRootElement").shadowRoot)

從Jquery 中得到了想法：如何僅在選擇中進行選擇？

解決方案4
 3  2015-03-13 12:04:21

我認為這對我有用...

$('polymer-element::shadow #test')

雖然只在 chrome 上測試過

解決方案5
 1  2015-04-14 22:56:41

我在 TypeScript 中編寫了簡單的 helper 來解決這個問題：

class DomUtils {

    public static getShadowElementById(id: string):any {

        try {
            // Try to get it by simple id in case of browser doesn't support shadow DOM
            var element = $("#" + id);

            if (element.length <= 0) {
                // Support Chrome browser
                element = $("body /deep/ #" + id);
            }

            return element;

        } catch (error) {
            console.log("Error: " + error + ", while trying to get shadow element with id: " + id);
            return null;
        }
    }
}

用法：

var element = DomUtils.getShadowElementById('mainContainer');

在桌面 Chrome、Internet Explorer、Firefox 上測試

解決方案6
 1  2020-03-22 08:50:48

使用這樣的東西：

jQuery.fn.extend({
  shadowRoot: function() {
     return $(this.get(0).shadowRoot);
  },
});

並調用：

$("my-element").shadowRoot());

解決方案7
 1  2020-05-29 16:25:55

你可以這樣做：

$("#example", this.shadowRoot).DataTable();

解決方案8
 1  2021-01-19 00:29:05

這對我有用

$(element)[0].shadowRoot

解決方案9
 0  2020-03-22 22:53:39

這是我在 shadow-root 中更改 capcha 的簡單功能

 const get_captcha = (CustomElement)=>{ var src = `./app/create_captcha/${chance.natural()}`; var rootElement = $(CustomElement)[0].shadowRoot; var captchaElement = $(rootElement).find('#img_captcha'); $(captchaElement).attr('src',src); };

解決方案10
 0  2021-07-29 19:46:46

由於它最終是我使用的，因此值得將其放入答案列表中。

// following line assumes shadow content has only one <body> tag... 
// ...otherwise filter by whatever makes sense for your code

var $shadowBody = $($("#shadow-root-elem")[0].shadowRoot.childNodes).filter("body");

// get the elem in the shadow content that I need/want

var $elemInShadowBody = $shadowBody.find(".selector.for.elem.in.shadow.body")

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 將jQuery與Shadow dom一起使用 使用javascript / jquery訪問shadow DOM屬性（聚合物）？ 如何創建帶有陰影dom的聚合物自定義元素，以便可以訪問它的shadowRoot？ 我如何判斷一個元素是否在影子 DOM 中？ 我可以使用 jQuery 在 DOM 中創建一個沒有它的 DOM 元素嗎？ Shadow DOM，使用它的目的 是否可以訪問 SVG 的影子 dom 如何檢查元素是否可以托管 Shadow DOM？ 陰影 DOM 中的 JQuery 選擇元素 如何使用Shadow DOM v1從陰影根目錄中訪問主機元素？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM