从jQuery迁移至原生JavaScript时DOM遍历报错：Uncaught TypeError: parentNode is undefined

嘿，我明白你从jQuery转原生JS时遇到的困惑了——咱们先直接揪出问题的根源，再一步步修正你的代码~

核心错误原因 #

你看到的Uncaught TypeError: html.parentNode is undefined，是因为你把普通字符串html当成DOM元素来调用.parentNode方法了！
let html = 'change to this';里的html只是一段文本，它不是DOM树里的节点，自然没有parentNode、querySelector这些DOM专属的属性/方法。你的链式调用串错了对象，才会抛出这个错误。

你的需求拆解 #

从代码和HTML结构来看，你想完成两件事：

1. 将.startA父容器下的.target1A .target2A的内容替换成'change to this'
2. 移除.target1A的hidden类

修正后的代码方案 #

方案1：拆分步骤（更清晰，易维护）

把需要操作的DOM元素先存成变量，再分别执行操作：

const newContent = 'change to this';
// 获取起始元素
const startElement = document.querySelector('.startA');
// 从start的父元素里找到.target1A
const target1Element = startElement.parentNode.querySelector('.target1A');
// 从target1里找到.target2A
const target2Element = target1Element.querySelector('.target2A');

// 执行替换内容和移除类的操作
target2Element.innerHTML = newContent;
target1Element.classList.remove('hidden');

方案2：链式调用（贴近jQuery习惯，但要确保每一步都是DOM元素）

如果喜欢链式写法，要保证每一环都是DOM节点，别跳到字符串上：

const newContent = 'change to this';
const startElement = document.querySelector('.startA');

// 先完成内容替换
startElement.parentNode.querySelector('.target1A .target2A').innerHTML = newContent;
// 再单独操作.target1A移除类
startElement.parentNode.querySelector('.target1A').classList.remove('hidden');

原生DOM遍历的小Tips #

• 只有DOM元素节点（比如通过querySelector、getElementById获取到的对象）才有parentNode、querySelector、classList这些属性/方法，普通字符串、数值变量没有
• 如果需要重复操作同一个元素，优先把它存成变量，既提升代码可读性，又避免重复查询DOM（优化性能）
• 如果你想找直接父元素，用element.parentElement比element.parentNode更精准——parentNode可能返回文本节点，parentElement只返回元素节点

内容的提问来源于stack exchange，提问作者musicarr