treewalker不能直接修改属性，仅用于只读遍历；需先用whattoshow和filter精准定位节点（如filter_reject跳过整棵子树），再调用节点自身api修改，或先收集后批量操作以防状态脱节。
TreeWalker 能不能直接改属性
不能。TreeWalker 本身是只读遍历工具，它不提供 setAttribute 或任何修改 DOM 的方法。你用它找到节点后，得手动调用节点自身的 API 修改属性——这是最容易卡住的第一步：误以为 TreeWalker 像 querySelectorAll 那样能链式操作。
怎么用 TreeWalker 精准定位目标节点
关键在 whatToShow 和 filter 参数。比如只想处理所有带 data-legacy 的 <div> 和 <code><span></span>：
const walker = document.createTreeWalker(
root,
NodeFilter.SHOW_ELEMENT,
{
acceptNode: node => {
if (node.tagName !== 'DIV' && node.tagName !== 'SPAN') return NodeFilter.FILTER_REJECT;
if (!node.hasAttribute('data-legacy')) return NodeFilter.FILTER_SKIP;
return NodeFilter.FILTER_ACCEPT;
}
},
false
);
注意：NodeFilter.FILTER_SKIP 表示跳过该节点但继续遍历其子树；FILTER_REJECT 则彻底跳过该节点及其后代——这个区别直接影响是否漏节点。
批量替换属性时的 DOM 同步风险
边遍历边改属性（比如删 data-legacy、加 data-new）本身安全，但若操作触发了 MutationObserver 或框架的响应式更新，可能造成重复遍历或状态错乱。稳妥做法是：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 先用
walker.nextNode()收集所有匹配的Element实例到数组里 - 再遍历数组统一修改，避免遍历器内部状态与 DOM 实际状态脱节
- 如果目标节点可能被动态移除，收集阶段加
node.isConnected检查
比 TreeWalker 更简单的替代方案存在吗
存在，但不等价。例如：
-
root.querySelectorAll('[data-legacy]')更快、更直观，但无法按树结构顺序或深度优先/广度优先定制遍历逻辑 -
root.getElementsByTagName('*')能拿到全部元素，但无法过滤属性，还得手动hasAttribute判定，性能差且顺序不可控 - 真正需要
TreeWalker的场景是：必须严格按文档顺序处理、需跳过某些子树、或遍历受复杂条件约束（如“只处理父节点有 class=‘container’ 的 input”）
属性替换本身很简单，难的是判断「什么时候非得用 TreeWalker」——多数人其实只是没意识到 querySelectorAll 已覆盖 90% 的批量属性操作需求。
