SCRIPT5007：无法获取未定义或 null 引用的属性“parentNode”的解决办法

最新推荐文章于 2020-12-03 16:57:52 发布

原创最新推荐文章于 2020-12-03 16:57:52 发布 · 3.8w 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #javascript

java 专栏收录该内容

6 篇文章

订阅专栏

本文探讨了ExtJS布局加载失败的问题，并给出了两种解决方案：一是调整JavaScript代码的位置确保DOM已完全加载；二是将JavaScript代码封装为外部文件加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天上午学习EXTJS，主要是为了了解下extjs的布局，所以我复制了下面这些代码到javascrpt 中。

var viewport = new Ext.Viewport({
	layout: 'border',
	renderTo: 'mygrid',
	items: [{
	region: 'north',
	xtype: 'panel',
	html: 'North'
	},{
	region: 'west',
	xtype: 'panel',
	split: true,
	width: 200,
	html: 'West'
	},{
	region: 'center',
	xtype: 'panel',
	html: 'Center'
	},{
	region: 'east',
	xtype: 'panel',
	split: true,
	width: 200,
	html: 'East'
	},{
	region: 'south',
	xtype: 'panel',
	html: 'South'
	}]
	});

可是打开网页的时候，没有布局效果显示，打开开发工具的控制台，提示 SCRIPT5007: 无法获取未定义或 null 引用的属性“parentNode” （这是在IE上的报错，chrome上的是Uncaught TypeError: Cannot read property 'parentNode' of null）。在我BD和GG了几个小时后，总算找到个靠谱的解释。

错误的原因我也说不怎么清楚，大概是这样的：在浏览器还没有创建DOM对象之前你就试图获取对象.。

既然知道原因了，那我也就知道怎么解决这个问题了。解决办法有2个：

1.将这段script代码写到最靠近</body>但是在它之前，这个是为了等到DOM对象创建完毕后才加载这段js代码。

2.将这段js代码写成独立的js文件，然后在html底部，即</body>之前外链接上该js文件。

附上我BD的相关资料：

http://zhidao.baidu.com/link?url=JO0SOo-4pmQ5DXgh9yLE6pIj0hdLSN1r4kQl7lLkMGxWMet5pfSvZUNeOyxSukics-5hBVLHJQg3eCyIa54LH_