html无法显示null打开,js出现null错误的原因？

在学习getElementById()方法的过程中出现了这样一个问题，便想记录下来。分析问题之前，我们不妨先来认识一下getElementById()方法。getElementById()方法，接受一个参数；获取元素的ID。如果找到相应的元素则返回该元素的HTMLDivElement对象，如果不存在，则返回null。

我是这样来实现的：

HTML代码：从代码中可以发现，我已经添加了

测试div。DOM基础

测试div

JS代码：

var box=document.getElementById('box');//获取id为box的元素节点

alert(box);

执行结果：将HTML文件在网页中打开，弹出null的消息框。

正确的显示应该返回HTMLDivElement对象，为什么会出现null呢？从HTML代码中可以看到，它先执行地是JS，然后才执行HTML，显然是顺序的问题。原因找到了，自然就有应对的方案。在这里教大家两种解决办法：

1、将script调用标签移到html末尾。

改动HTML代码：

DOM基础

测试div

2、使用onload事件来处理

改动Js代码

window.οnlοad= function(){

var box=document.getElementById('box');//获取id为box的元素节点

alert(box);

};

以上两种方法都能正确返回HTMLDivElement对象。但还有一个显示的问题。火狐、谷歌等浏览器等都会显示[object HTMLDivElement]，但唯独IE浏览器会只显示[object]。这是因为IE的所有对象都是以COM对象的形式实现的。

小结：

JS的知识点很碎。如果只是往前学而不加整理和总结。那么学着前面的知识，后面的知识就会忘掉。像上文总结的这样一个小问题，如果不记录总结，那么过不了多久就再也想不起来了。

html无法显示null打开,js出现null错误的原因？相关推荐

clion在使用sqlite3的时候，显示Undefined symbols for architecture x86_64错误的解决办法
显示Undefined symbols for architecture x86_64错误的原因 1.缺少静态库环境:在模拟器上报错但在真机上能运行成功,而且报的错误来自于第三方库. 原因:arch ...
js中null和undefined的区别
在JavaScript开发中,被人问到:null与undefined到底有啥区别? 一时间不好回答,特别是undefined,因为这涉及到undefined的实现原理. 总所周知:null == un ...
js 中null,undefined区别
首先摘自阮一峰先生的文章: 大多数计算机语言,有且仅有一个表示"无"的值,比如,C语言的NULL,Java语言的null,Python语言的None,Ruby语言的nil. 有点奇 ...
mysql设置空值显示null_mysql的空值与NULL的区别
Mysql数据库是一个基于结构化数据的开源数据库.SQL语句是MySQL数据库中核心语言.不过在MySQL数据库中执行SQL语句,需要小心两个陷阱. 陷阱一:空值不一定为空空值是一个比较特殊的字段. ...
js 判断 ““,null,undefined
js 判断 "",null,undefined if (mid == "" || mid == null || mid == undefined) { // & ...
js中null和undefined
Undefined类型只有一个值,即undefined.当声明的变量未被初始化时,变量的默认值为undefined. Null类型也只有一个值,即null.null用来表示空对象指针.null 与对象 ...
js中null,undefined,false,0,'',[],{}判断方法
目录 1.数据类型 2.JSON字符串 3.数字类型 4.非的布尔值 5.与非比较一.单独判断 1.null 2.undefined 3.0 4."" 5.判断undefined ...
Linux 输入输出重定向 2＞/dev/null和＞/dev/null 2＞1和2＞1＞/dev/nul
From:https://www.cnblogs.com/520playboy/p/6275022.html 2>/dev/null 和 >/dev/null 2>&1 ...
谷歌浏览器弹出窗口html代码,谷歌浏览器显示通知消息JS代码
谷歌浏览器显示通知消息JS代码点击显示通知会弹出通知对话框,如下图效果: h5通知消息对话框代码如下: 开心洋葱谷歌浏览器通知消息JS代码 * {margin: 0; padding: 0;} bo ...

html无法显示null打开,js出现null错误的原因？

html无法显示null打开,js出现null错误的原因？相关推荐

最新文章

热门文章