试图遍历 DOM，但得到 Uncaught TypeError parentNode is undefined

Posted 2023-05-09

【中文标题】试图遍历 DOM，但得到 Uncaught TypeError parentNode is undefined

【英文标题】：Trying to traverse the DOM, but getting Uncaught TypeError parentNode is undefined

【发布时间】：2021-06-26 13:30:39

【问题描述】：

我正在尝试从 jQuery 迁移到普通的 javascript，但是我在遍历 DOM 时遇到了困难，就像我使用 jQuery 所做的那样。在写入 DOM 后，尝试向上移动 DOM 结构时，我收到 "Uncaught TypeError: 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。非常感谢任何帮助。

谢谢

【参考方案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');

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>

如果您想以可链接的方式执行此操作，并且由于您的问题是用 jQuery 标记的，您可以使用它：

$('.startA')
  .find('.target1A .target2A')
  .html(html)
  .parent()
  .removeClass('hidden');

$('.startA')
  .find('.target1A .target2A')
  .html('foobar')
  .parent()
  .removeClass('hidden');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="top">
    <div class="startA">
        <div class="target1A hidden">
            <div class="target2A">target 1</div>
        </div>
    </div>
</div>

【讨论】：

知道了。我现在看到这是如何工作的。感谢您的示例和解释。

【参考方案2】：

let html = 'change to this';
    let eA = document.querySelector('.startA');
    eA.parentNode
        .querySelector('.target1A .target2A')
        .innerHTML = html;
    eA.parentNode
        .parentNode
        .querySelector('.target1A')
        .classList
        .remove('hidden');

【讨论】：

感谢代码示例。我认为你那里有一个额外的“parentNode”。

哦，是的，我没有注意到父节点。无论如何，不​​客气