在学习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. C#中数组与ArrayList的简单使用

    1. 多维数组 2. 锯齿数组 3. 数组的常用操作 4. ArrayList 1. 多维数组 多维数组:行数和列数在定义时已确定 string[,] arr = new string[2, 3]; ...

  2. Fiddler代理配置

     1.下载安装软件Fiddler 2.Fiddler设置HTTPS代理(如果代理的是https请求的需要操作这一步) 打开Fiddler,菜单栏:Tools -> Fiddler Options ...

  3. Dotfuscator use for .net4.0 error solve

    在混淆的时候报错了,错误描述大致如下: Could not find a compatible version of ildasm to run on assembly C:\xxx.dll This ...

  4. Java基础学习总结（40）——Java程序员最常用的8个Java日志框架

    作为一名Java程序员,我们开发了很多Java应用程序,包括桌面应用.WEB应用以及移动应用.然而日志系统是一个成熟Java应用所必不可少的,在开发和调试阶段,日志可以帮助我们更好更快地定位bug:在 ...

  5. Windows下编译OpenSSL（使用VS2013）

    简述 OpenSSL是一个开源的第三方库,它实现了SSL(Secure SocketLayer)和TLS(Transport Layer Security)协议,被广泛企业应用所采用.对于一般的开发人 ...

  6. 1.6 Python基础知识 - for循环

    在循环语句中,除了while循环外,还有一种循环叫for循环的循环语句,for循环语句用于遍历可迭代(什么是迭代?以及迭代的相关知识,我们到后面再进行阐述,这里只要记住就可以了.)对象集合中的元素,并 ...

  7. Fragment Summary 1/2

    转自:http://blog.csdn.net/lmj623565791/article/details/37970961 自从Fragment出现,曾经有段时间,感觉大家谈什么都能跟Fragment ...

  8. jmeter--十三种断言方式介绍

    jmeter中有个元件叫做断言(Assertion),它的作用和loadrunner中的检查点类似: 用于检查测试中得到的响应数据等是否符合预期,用以保证性能测试过程中的数据交互与预期一致. 使用断言 ...

  9. 【习题 3-11 UVA - 1588】Kickdown

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 模拟一下就好 一位一位地往右移动. [代码] #include <bits/stdc++.h> using namesp ...

  10. 【AtCoder Beginner Contest 074 B】Collecting Balls (Easy Version)

    [链接]h在这里写链接 [题意] 看懂题目之后就会发现是道大水题. [题解] 在这里写题解 [错的次数] 0 [反思] 在这了写反思 [代码] #include <bits/stdc++.h&g ...