尝试遍历DOM，但未定义未捕获的TypeError parentNode

Question

我正试图从jQuery转向普通javascript，但在遍历DOM时遇到了困难，就像使用jQuery一样。在写入DOM之后，试图向上移动DOM结构时，我收到了一个“uncattleTypeError：html.parentNode is undefined”错误。代码如下：

JavaScript

let html = 'change to this';

let eA = document.querySelector('.startA');

eA.parentNode
    .querySelector('.target1A .target2A')
    .innerHTML = html
    .parentNode
    .querySelector('.target1A')
    .classList
    .remove('hidden');

HTML

<div id="top">
    <div class="startA">
        <div class="target1A hidden">
            <div class="target2A">target 1</div>
        </div>
    </div>
</div>

我似乎不明白为什么会这样。我想我还没有完全理解如何在DOM中移动。非常感谢任何帮助。

谢谢

Answer 1

赋值运算符的优先级较低。您的代码相当于：

const result = html
    .parentNode
    .querySelector('.target1A')
    .classList
    .remove('hidden');

eA.parentNode
    .querySelector('.target1A .target2A')
    .innerHTML = result;

这是行不通的--你不能像你想要做的那样给赋值运算符上链。在插入HTML后选择该元素，作为单独的语句。

您也不需要选择target1a，因为它已经是target2a的父级。

const target = eA.parentNode.querySelector('.target1A .target2A');
target.innerHTML = html;
target.parentNode
    .classList
    .remove('hidden');

null

const eA = document.querySelector('.startA');
const target = eA.parentNode.querySelector('.target1A .target2A');
target.innerHTML = 'foobar';
target.parentNode
    .classList
    .remove('hidden');

<div id="top">
    <div class="startA">
        <div class="target1A hidden">
            <div class="target2A">target 1</div>
        </div>
    </div>
</div>