在学习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. 【例7-15 UVA-1603】Square Destroyer

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 先预处理出所有的正方形(长度为1,2...n的)所包含哪些边. 然后记录每个正方形的应有边长和实际边长(有些边被删掉了); 然后搜的 ...

  2. hiho 1182 : 欧拉路&#183;三

    1182 : 欧拉路·三 这时题目中给的提示: 小Ho:是这种.每次转动一个区域不是相当于原来数字去掉最左边一位,并在最后加上1或者0么. 于是我考虑对于"XYYY",它转动之后能 ...

  3. Android学习笔记之按键操作

    我们如何和Android 程序来进行交互那份?来让 Android 程序产生相应的反应,我们不得不通过键盘事件.触摸事件.传感器事件等来实现. 键盘是Android中主要的输入设备,对按键的响应的处理 ...

  4. 79.cgi硬盘查询个人信息

    运行截图: 把cgi编码转为char*类型 //把cgi编码转为char*类型 char* change(char *str) { //分配内存 ); //x是tempstr的下标,y是str的下标 ...

  5. 在线java反编译服务

    大家是否遇到过有java class文件,却没有java源码的苦恼.近期findmaven.net提供了在线java反编译服务http://www.findmaven.net/decompile_cn ...

  6. AlertDialog的onCreateDialog与onPrepareDialog用法

    场景:在一个Activity中多次使用弹出对话框.而且对话框携带着动态变化的信息数据,这时假设仅仅使用onCreateDialog(int id, Bundle bundle)回调,则会发现第一次以后 ...

  7. css使文本保留多个空格

    css属性: white-space: pre-wrap

  8. loadrunne-- Analysis 分析器

    本文转自:https://www.cnblogs.com/Chilam007/p/6445165.html Analysis简介 分析器就是对测试结果数据进行分析的组件,它是LR三大组件之一,保存着大 ...

  9. &lt;九度 OJ&gt;题目1012：畅通project

    题目描写叙述: 某省调查城镇交通状况,得到现有城镇道路统计表.表中列出了每条道路直接连通的城镇.省政府"畅通project"的目标是使全省不论什么两个城镇间都能够实现交通(但不一定 ...

  10. swift项目第四天：动态加载控制器

    一:Appdelegate import UIKit @UIApplicationMain class AppDelegate: UIResponder, UIApplicationDelegate ...