为什么从 document.ready() 和 window.load() 内部访问时元素的 parentNode 未定义？ [复制]答案

【问题标题】：Why is element's parentNode undefined when accesses from inside document.ready() and window.load()? [duplicate]为什么从 document.ready() 和 window.load() 内部访问时元素的 parentNode 未定义？ [复制]
【发布时间】：2016-03-25 14:18:23
【问题描述】：

我的页面上有一个<select> 元素，其中设置了onchange 属性：

<select id="MySelect" onchange="return myOnChange(this);">Whatever</select>

事件处理程序是这样的：

function myOnChange(select) {
   var parentNode = select.parentNode;
   //whatever
}

加载页面后，用户更改下拉菜单中的选择并调用事件处理程序，并且parentNode 绑定到某个东西（无论它是什么，它都不是未定义的，这就足够了）。

但是，如果我添加 document.ready():

$(document).ready(function () {
  var select = $('#MySelect');
  var parentNode = select.parentNode;
  //whatever
});

或window.load():

$(window).load(function () {
  var select = $('#MySelect');
  var parentNode = select.parentNode;
  //whatever
});

然后一旦它们中的任何一个被调用，那么parentNode 是未定义的。

这是为什么？页面加载后如何调用我的处理程序以使parentNode 未定义？

【问题讨论】：

jQuery 函数返回节点列表，而不是 DOM 节点。
@Oriol 我想说，对于已经知道有两种对象的人来说，这个问题只是那个问题的重复。我对此一无所知 - 对我来说它是“在这里工作但不在那里工作”，答案是“有两种对象，这是您访问正确的对象的方式”。

标签： javascript jquery events jquery-events document-ready

【解决方案1】：

因为这里的 jQuery 对象中没有 parentNode。

var parentNode = select.parent()

或

var parentNode = select[0].parentNode;

【讨论】：

如果我使用select.get()，我会得到一个“常规”对象吗？
要注意第一个parentNode也是jQuery对象
您将获得 DOM 元素。是的
是的，使用.get(0) 让我可以访问我在某处传递的节点，并且该节点在某处愉快地调用了parentNode。您能否将get() 的用法添加到答案中？

【解决方案2】：

您正在通过 jquery 对象访问节点对象的属性，

var select = $('#MySelect');
var parentNode = select.parent();

你必须使用jquery的.parent()函数。

在您的onchange 事件处理程序中，您将接收this 作为其参数。基本上，它们上方的this 将代表调用事件的元素。那就是node 对象。因此，您可以访问属性parentNode。但不是在 jquery 对象上。

【讨论】：