影子DOM

作者: 前端大魔王 | 来源:发表于2016-08-16 13:39 被阅读0次

创建影子DOM,createShadowRoot()。影子dom能将内部的节点信息封装起来,例如video与auto标签,影子dom的子树在dom结构中是不可见的,chrome可以通过setting打开。
代码:

<!DOCTYPE HTML>
<html>

<body>
<div id='div'></div>
<script>
window.onload=function(){
var adiv=document.getElementById('div');
root=adiv.createShadowRoot();
var shadowImg=document.createElement('img');
shadowImg.src='/i/eg_mouse.jpg';
var shadowDiv=document.createElement("div");
shadowDiv.innerHTML='this is a shadow div';
root.appendChild(shadowImg);
root.appendChild(shadowDiv);
}
</script>
</body>
</html>

查看dom:

dom图.png

相关文章

  • 影子DOM

    创建影子DOM,createShadowRoot()。影子dom能将内部的节点信息封装起来,例如video与aut...

  • 影子DOM

    定义 影子DOM的规范草案能够使得一些DOM节点在特定范围内可见,而在网页的DOM树中却不可见,但是网页渲染的结果...

  • Web Components使用(二)

    在上一章节中主要介绍了Custom elements(自定义元素),Shadow DOM(影子DOM)的使用,我们...

  • 浏览器新特性--shadow DOM

    shadow DOM是什么 直译过来就是影子DOM:他是独立封装的一段html代码块,他所包含的html标签、cs...

  • 前端面试每日 3+1 —— 第27天

    今天的面试题 (2019.05.13) —— 第27天 [html] 说说你对影子(Shadow)DOM的了解 [...

  • dom 级别和dom 事件处理

    dom级别:dom0 dom1 dom2 dom3 dom事件处理:dom0 dom2 dom3 (1级DOM标准...

  • WY-DOM编程

    DOM Document Object Model DOM Core DOM HTML DOM Style DOM...

  • DOM事件

    DOM级别与DOM事件 DOM级别:DOM0级、DOM1级、DOM2级、DOM3级DOM事件:DOM0级事件处理、...

  • DOM事件

    DOM级别与DOM事件 DOM级别:DOM0级,DOM1级,DOM2级和DOM3级DOM事件:DOM0级事件处理,...

  • js红包雨活动

    function Block( dom ){ this.dom = dom; //dom this.parentW...

网友评论

      本文标题:影子DOM

      本文链接:https://www.haomeiwen.com/subject/aespsttx.html