在学习getElementById()方法的过程中出现了这样一个问题，便想记录下来。

分析问题之前，我们最好还是先来认识一下getElementById()方法。getElementById()方法，接受一个參数。获取元素的ID。假设找到对应的元素则返回该元素的HTMLDivElement对象，假设不存在。则返回null。

我是这样来实现的：

HTML代码：从代码中能够发现，我已经加入了<div id='box'>測试div</id>。

<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<title>DOM基础</title>

		<span style="color:#ff0000;"><script type ="text/javascript" src="demo.js"></script></span>

	</head>

	<body>

	<span style="color:#ff0000;"><div id='box'>測试div</id></span>

	<ul>

	<li>1</li>

	<li>2</li>

	<li>3</li>

	</ul>

	</body>

</html>

</span>

JS代码：

<span style="font-size:18px;">var box=document.getElementById('box');         //获取id为box的元素节点

alert(box);</span>

将HTML文件在网页中打开，弹出null的消息框。

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

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

修改HTML代码：

<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<title>DOM基础</title>

	</head>

	<body>

	<span style="color:#ff0000;"><div id='box'>測试div</id></span>

	<ul>

	<li>1</li>

	<li>2</li>

	<li>3</li>

	</ul>

	</body>

</html>

<span style="color:#ff0000;"><script type ="text/javascript" src="demo.js"></script></span></span>

2、使用onload事件来处理

修改Js代码

<span style="font-size:18px;">window.onload=function(){

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

	alert(box); };</span>

以上两种方法都能正确返回HTMLDivElement对象。

但另一个显示的问题。

火狐、谷歌等浏览器等都会显示[object HTMLDivElement]，但只有IE浏览器会仅仅显示[object]。这是由于IE的全部对象都是以COM对象的形式实现的。

小结：

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

JS null问题的更多相关文章

  1. js null表示没有取到html中的元素 undenfind 表示没有被赋值

    js null表示没有取到html中的元素 undenfind 表示没有被赋值

  2. js null和undefined

    在JavaScript开发中,被人问到:null与undefined到底有啥区别? 一时间不好回答,特别是undefined,因为这涉及到undefined的实现原理. 总所周知:null == un ...

  3. JS Null 空 判断

    JS判断对象是否为空 https://www.cnblogs.com/mountain-mist/articles/1600995.html http://www.cftea.com/c/2007/0 ...

  4. 你所不知道的 JS: null , undefined, NaN, true==1=="1",false==0=="",null== undefined

    1 1 1 === 全相等(全部相等) ==  值相等(部分相等) demo: var x=0; undefined var y=false; undefined if(x===y){ console ...

  5. js null 和 undefined

    undefined是一个特殊类型,null本质上是一个对象 typeof undefined//"undefined"typeof null//"object" ...

  6. js null, undefined, NaN, ‘’, false, 0, ==, === 全验证

    <html> <head> <meta charset="utf-8" /> </head> <body> <in ...

  7. JS——null

    变量被赋值为null,目的往往是为了销毁这个对象: var n1 = 1; n1 = null;

  8. js null和{}区别

    {}是一个不完全空的对象,因为他的原型链上还有Object呢,而null就是完全空的对象,啥也没有,原型链也没有,所以null instanceof Object === false;[]就更不用说了 ...

  9. 将css和js缓存到localStorage缓存，提高网页响应速度

    适用于小站点,这很极致,很快速~~ /** * Created by SevenNight on 2016/9/21 0021. * 插件功能:使用localStorage缓存js和css文件,减少h ...

随机推荐

  1. 【Codeforces Round #452 (Div. 2) A】 Splitting in Teams

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 贪心 1优先和2组队. 如果1没有了 就结束. 如果1还有多余的. 那么就自己3个3个组队 [代码] #include <bi ...

  2. SSO单点登录学习总结（3）—— 基于CAS实现单点登录实例

    第一: 本demo在一个机器上实现(三个虚拟主机),来看SSO单点登录实例(我们可以布到多个机器上使用都是同一个道理的),一个服务器主机,和两个客户端虚拟主机 [html] view plaincop ...

  3. SpringBoot+springmvc异步处理请求

    有两种情况,第一种是业务逻辑复杂,但不需要业务逻辑的结果,第二种是需要返回业务逻辑的处理结果 第一种比较简单,利用多线程处理业务逻辑,或者利用spring中@Asyn注解更简单, 使用@Asyn注解, ...

  4. 39.Intellij导入子项目时，maven列表子项目灰色不可用---解决方法

    转自:https://blog.csdn.net/jackieriver/article/details/79046326 导入子项目的module时,左侧project目录中有一个module图标右 ...

  5. 103.tcp通信实现远程控制

    客户端代码 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib.h> #include < ...

  6. Altium Designer如何删除以布的线

  7. IOS蓝牙项目总结

    常见的蓝牙标准有2.0和4.0.   特点 2.0 1.适用于数据量比较大得传输,比如音乐.语音2.IOS开发中,要求设备是经过MFI认证 4.0 1.适用于实时性比较高的数据传输,比如遥控类的鼠标. ...

  8. decode与case when

    语法 decode(条件,值1,返回值1,值2,返回值2,...值n,返回值n,缺省值) select * from reglike; ,),'aaa','yes','no') decode from ...

  9. Spring Boot系列二 Spring @Async异步线程池用法总结

    1. TaskExecutor Spring异步线程池的接口类,其实质是java.util.concurrent.Executor Spring 已经实现的异常线程池: 1. SimpleAsyncT ...

  10. 自己定义View——坑、技巧、调优

    <span style="font-size:14px; font-family: Arial, Helvetica, sans-serif; background-color: rg ...