shadow Dom（shadowRoot）访问

示例

gtx.shadowRoot.getElementById("translation")

gtx为host对象

起因

抓去chorome谷歌翻译插架的内容。有信息的内容div id是"bubble-content"

var contend=document.getElementById("bubble-content")

contend是null ? ! !怎么会是null?我又没拼错。

这不科学，然后发现这个div 外层有个#shadow-root (open)

没见过的东西

事不为常便有妖，问题8成就在这里

查了相关资料后确定

简而言之shadow-root 包裹下的对象，不在全局的dom树中，因此getElementById 等方法，获取不到包裹中的对象。

该功能的目的就是，独立出一块渲染块，不受外层样式的影响，内层的样式也不影响外层的显示。

访问方式为

1得到shadow-root 外层的根node 这个node是在全局dom树中的。

var gtx=document.getElementById("gtx-host")

2取得gtx的shadow块

gtx.shadowRoot

3之后再怎么操作就随意了

比如取shadow块中的节点。

var truecontent=gtx.shadowRoot.getElementById("translation");

后来想想，其实以前隐约在哪见到过这功能，但因为一真没有用，淡忘了

转载于:https://www.cnblogs.com/zihunqingxin/p/5040504.html

shadow Dom（shadowRoot）访问相关推荐

理解Shadow DOM
1. 什么是Shadow DOM? Shadow DOM 如果按照英文翻译的话可以理解为影子DOM, 何为影子DOM呢?可以理解为一般情况下使用肉眼看不到的DOM结构,那如果一般情况下看不到的话,那 ...
Shadow DOM及自定义标签
参考链接:点我一.什么是Shadow DOM Shadow DOM,直接翻译的话就是影子 DOM,可以理解为潜藏在 DOM 结构中并且我们无法直接控制操纵的 DOM 结构.类似于下面这种结构 Sh ...
纯CSS菜单样式，及其Shadow DOM，Json接口实现
先声明,要看懂这篇博客要求你具备少量基础CSS知识, 当然如果你只是要用的话就随便了,不用了解任何知识先放一张效果图 Part 1:纯CSS菜单样式先放样式代码 1 <sty ...
html页面和Chrome开发者工具elements界面不一致的一个可能原因：没有在Chrome开发者工具里打开对Shadow DOM显示的支持
一个例子: 虽然UI上input field里显示的是Jerry,但是Chrome开发者工具里面并没有显示出来. 注意上图最下方,显示的input后面有#shadow-root.div. 打开sett ...
[译] 用 Shadow DOM v1 和 Custom Elements v1 实现一个原生 Web Component
原文地址:Make a Native Web Component with Custom Elements v1 and Shadow DOM v1 原文作者:Pearl Latteier 译文出自: ...
[html] 说说你对影子(Shadow)DOM的了解
[html] 说说你对影子(Shadow)DOM的了解 web component的API,用来给组件创建子DOM树,就像楼上说的,不受外部style影响,外部通过选择器查询也不会查到里面来.它有两种 ...
Shadow DOM的理解
Shadow DOM的理解 Shadow DOM是HTML的一个规范,其允许在文档document渲染时插入一颗DOM元素子树,但是这棵子树不在主DOM树中,Shadow DOM如果按照英文翻译的话可 ...
Shadow DOM系列1-简介
为什么80%的码农都做不了架构师?>>> 英文链接:Shadow DOM: Introduction, 26 AUGUST 2013 on Web Components, Sh ...
Chrome 53 支持 Shadow DOM 等规范
上周发布的 Chrome 53 带来了一系列实验性规范的支持,如Shadow DOM,它为复杂网页的开发提供便利.同时,针对移动平台,Chrome 53也提供了PaymentRequest接口.自定义 ...
Chrome 53 支持Shadow DOM、PaymentRequest等规范
上周发布的 Chrome 53 带来了一系列实验性规范的支持,如Shadow DOM,它为复杂网页的开发提供便利.同时,针对移动平台,Chrome 53也提供了PaymentRequest接口.自定义 ...

shadow Dom（shadowRoot）访问

shadow Dom（shadowRoot）访问相关推荐

最新文章

热门文章

shadow Dom（shadowRoot） 访问

shadow Dom（shadowRoot） 访问相关推荐

最新文章

热门文章

shadow Dom（shadowRoot）访问

shadow Dom（shadowRoot）访问相关推荐