Shadow DOM：Web 组件的封装与控制

介绍Shadow DOM 是 Web 组件规范的一部分，它允许将封装的“影子” DOM 树附加到常规 DOM 树中的元素。影子 DOM 封装了 DOM 和样式，使开发人员可以控制这些元素，而不会与页面上的其他代码或样式发生冲突。术语影子宿主（Shadow host）：影子 DOM 附加到的常规 DOM 节点。影子树（Shadow tree）：影子 DOM 内部的 DOM 树。影子边界（Shadow boundary）：影子 DOM 终止，常规 DOM 开始的地方。影子根（Shadow root）：影子树的根节点。创建 Shadow DOMconst host = document.querySelector('#host') // 创建一个 Shandow DOM 元素 const shadow = host.attachShadow({mode: 'open'}) const span = document.createElement('span') span.textContent = 'Hello World' // 向 Shadow DOM 元素内填充内容 shadow.a

技术 · 06-23
Shadow DOM：Web 组件的封装与控制

JavaScript API：深入了解 FileReader 对象：使用示例、属性、方法和事件详解

简介FileReader 对象提供了读取文件内容的，它允许网页通过异步方式读取用户计算机上的文件内容。属性error在读取文件的过程中发生错误时，该属性包含一个错误对象。readyState表示 FileReader 状态的数字，表示以下值之一：0 (EMPTY)：尚未初始化。1 (LOADING)：正在读取。2 (DONE)：已完成读取。result返回读取文件的 ArrayBuffer、Blob、DataURL 或 Text 格式。方法abort()取消读取操作。在返回时，readyState 属性为 DONE。readAsArrayBuffer(blob)开始读取指定的 Blob 中的内容。一旦完成，result 属性中就包含一个 ArrayBuffer 对象。readAsBinaryString(blob) 【已弃用】开始读取指定的 Blob 中的内容。一旦完成，result 属性中将包含所读取文件的原始二进制数据。readAsDataURL(blob)开始读取指定的 Blob 中的内容。一旦完成，result 属性中将包含一个 data: URL 格式的 Base64 字符串

技术 · 03-01
2023 - 2024 a博客-个人博客-技术分享. All Rights Reserved.
Theme Jasmine by Kent Liao