个人随笔
目录
当前位置: 首页 JS Shadow简单介绍
Shadow简单介绍
2023-08-23 10:54:33

简单介绍

Shadow DOM API 的 ShadowRoot 接口是一个 DOM 子树的根节点, 它与文档的主 DOM 树分开渲染,ShadowRoot技术就是在一个dom树下创建一个隔离的封闭的空间
用来隔绝网页的一些污染,让html实现一些模块化的思想
创建类似html元素标签的封闭html块

实战

ShadowRoot使用Element.attachShadow()函数进行创建.

1、open模式

  1. <body>
  2. <div class="box-wrap">
  3. </div>
  4. </br>
  5. <div onclick="getData()">点我获取shadow的数据</div>
  6. <script>
  7. let shadow = document.querySelector(".box-wrap").attachShadow({mode:'open'})
  8. shadow.innerHTML = '<span>我是内容文字</span>';
  9. function getData(){
  10. //获取shadow数据
  11. let shadow2 = document.querySelector(".box-wrap").shadowRoot;
  12. alert(shadow2.innerHTML);
  13. }
  14. </script>
  15. </body>

2、closed模式

  1. let shadow = document.querySelector(".box-wrap").attachShadow({mode:'closed'})
  2. shadow.innerHTML = '<span>我是内容文字</span>';
  3. function getData(){
  4. //获取shadow数据
  5. let shadow2 = document.querySelector(".box-wrap").shadowRoot;
  6. alert(shadow2.innerHTML);
  7. }


此时点击获取数据就获取失败了,那怎么办呢?得好好研究研究

 38

啊!这个可能是世界上最丑的留言输入框功能~


当然,也是最丑的留言列表

有疑问发邮件到 : suibibk@qq.com 侵权立删
Copyright : 个人随笔   备案号 : 粤ICP备18099399号-2