前端技术文章
-
介绍JavaScript HTMLTemplateElement.content的重复实例化方法，用importNode深复制保留模板原件，解释片段插入后的节点移动、事件绑定和重复id处理。372 收藏 -
讲清 JavaScript Element.getAnimations 的默认范围、subtree 参数、伪元素筛选和 finished Promise 用法，帮助组件在动画结束后安全清理。243 收藏 -
讲清 Web Animations API 的 Animation.commitStyles() 如何把动画当前计算值写入目标元素的 style 属性，并说明 finished、fill: forwards、cancel() 与兼容策略。324 收藏 -
用 Web Components 的命名 slot 说明 HTMLSlotElement.assignedElements() 的直接读取、flatten 展开、fallback 内容和 slotchange 重读方式。488 收藏 -
通过 DOMParser 和 iframe 场景理解 Document.importNode() 的跨文档复制、deep 参数、插入时机，以及它与 cloneNode()、adoptNode() 的区别。266 收藏 -
讲清 Document.adoptNode 如何把外部文档节点转移到当前文档、为什么 parentNode 会暂时为空，以及它和 importNode 在移动与复制上的区别。486 收藏 -
解释JavaScript NodeIterator.detach的兼容空操作语义，通过局部遍历与分批会话示例说明引用清理，区分DOM移除、对象可达性和垃圾回收时机。262 收藏 -
围绕 JavaScript TreeWalker.currentNode 说明如何把遍历游标移动到指定节点，再继续使用 nextNode 和 previousNode；同时厘清 root、whatToShow、filter 以及节点不在遍历范围时的处理边界。209 收藏 -
用 Range.compareBoundaryPoints 比较两个 Range 的起点和终点，列清四种 how 常量的实际映射，解释 -1、0、1 的方向，并说明它与范围重叠判断的边界。300 收藏 -
Range.createContextualFragment 的关键不在于把字符串变成节点，而在于让 Range 的 start node 成为 HTML 片段解析上下文。本文用容器和表格示例说明 Range 起点、DocumentFragment、节点检查、特殊标签和可信输入边界。406 收藏 -
JavaScript 判断节点是否被当前文本选区覆盖时，可以直接使用 Selection.containsNode。本文区分默认的完整包含与 partialContainment=true 的部分相交，并给出 selectionchange 事件中的安全用法。214 收藏 -
用JavaScript Selection.setBaseAndExtent设置正向与反向文本选区，区分锚点焦点和Range起止，解释节点偏移、短期保存恢复及输入框适用边界。206 收藏 -
用 CSS scrollbar-width 的 thin 值缩窄长列表滚动条，同时区分 auto 与 none 的行为，处理根元素和嵌套滚动面板的作用范围，并保留键盘、滚轮和触摸用户的滚动入口。138 收藏 -
弹窗或侧栏滚到底部后，页面跟着滚动通常是 scroll chaining。本文用 overscroll-behavior 解释 auto、contain、none 和 chain 的差异，并给出只限制纵向滚动的写法与排查边界。483 收藏 -
用 Vite 的 mode 和 .env 文件管理构建期配置，再用公开的运行期配置入口承载部署差异，理解 import.meta.env 的静态替换边界并避免把敏感信息打进前端产物。260 收藏