影子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

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