前端技术文章
-
CSS quotes 会按嵌套引用的深度依次读取引号对。本文从多层 q 元素显示混乱的现象出发，说明 quotes、继承、lang、open-quote 与 no-open-quote 的使用边界。101 收藏 -
CSS counter-reset 创建计数器实例，counter-set 优先修改已有实例。本文通过嵌套列表和跳号示例，解释作用域、步进与赋值顺序，以及多级编号的常见误区。498 收藏 -
用 CSS @counter-style 和 pad 描述符把有序列表编号显示为 01、02、03，并说明最小长度、超长编号和兼容边界。363 收藏 -
跨文档处理 DOM 节点时，adoptNode 会把原节点转移到目标文档，importNode 则在目标文档上下文中创建副本。本文比较节点身份、ownerDocument、deep 参数、插入动作和自定义元素场景，帮助前端开发者选对 API。386 收藏 -
用片段内节点重排示例说明 moveBefore 的用法，区分保留对象与保留状态，并解释同根约束、参考节点、null 末尾位置及兼容降级。314 收藏 -
HTML 的 template 不会把内部片段直接渲染到页面。本文用任务卡片示例说明如何从 template.content 取得 DocumentFragment，深度克隆多个兄弟节点并插入目标容器，同时处理事件监听、重复 id 和自定义元素边界。468 收藏 -
用文本偏移保存折叠光标，在保持文字顺序的 DOM 重建后映射到新文本节点，并说明 Range、Selection、异步渲染与复杂富文本的适用边界。273 收藏 -
Selection 的 anchor 是用户开始选择的位置，focus 是选择扩展到的位置；两者不一定符合文档顺序。本文用 Selection.direction 和 Range.compareBoundaryPoints() 识别反向选择，并处理空选区、跨文本节点与 selectionchange 监听。280 收藏 -
Range.surroundContents 抛出异常时，关键不在于选区是否跨过多个文本节点，而在于它是否部分包含了非 Text 节点。本文用 DOM 结构和三个方案对比，说明如何判断边界并选择更稳妥的包裹方式。307 收藏 -
Range.extractContents 可提取部分 DOM 并移动到目标容器。通过跨文本与强调元素的原创示例，说明边界偏移、部分父节点克隆、片段插入和真实选区接入限制。160 收藏 -
NodeIterator 按文档顺序遍历 DOM 子树。本文用一个文本查找场景说明 SHOW_TEXT、过滤器、referenceNode 和 pointerBeforeReferenceNode 的配合方式，并给出可恢复游标与边界处理代码。270 收藏 -
TreeWalker 中 FILTER_SKIP 只跳过当前节点，仍会继续检查后代；FILTER_REJECT 则会剪掉当前节点及整棵后代子树。本文用静态 DOM 示例说明两者差异，并解释为什么收集文本时通常要同时显示元素和文本节点。109 收藏 -
围绕 CSS Anchor Positioning 浮动提示框跟随目标元素这一任务，说明 anchor-name、position-anchor 与 anchor() 的最小写法，并处理重复组件作用域、视口边缘回退和不支持环境的降级方案。233 收藏 -
用 URLPattern 表达前端文章路由，拆解 pathname、test、exec 和动态分组的关系，并排查结果为空、相对 URL 与浏览器兼容性问题。392 收藏 -
Intl.DateTimeFormat 同时设置 hour12 和 hourCycle 时，最终结果由 hour12 优先决定。本文用最小 JavaScript 示例说明两者的层级差异、四种小时循环和 resolvedOptions() 的排查方法。416 收藏