如何解决试图遍历 DOM,但得到 Uncaught TypeError parentNode 未定义
我正在尝试从 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 中移动。非常感谢任何帮助。
谢谢
解决方法
赋值运算符的优先级较低。您的代码相当于:
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>
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');
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。