在学习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. 【LightOJ - 1205】Palindromic Numbers

    [链接]https://cn.vjudge.net/problem/LightOJ-1205 [题意] 求出L..R范围内的回文个数 [题解] 数位DP; 先求出1..x里面的回文串个数.则做一下前缀 ...

  2. 洛谷 P1571 眼红的Medusa

    P1571 眼红的Medusa 题目描述 虽然Miss Medusa到了北京,领了科技创新奖,但是他还是觉得不满意.原因是,他发现很多人都和他一样获了科技创新奖,特别是其中的某些人,还获得了另一个奖项 ...

  3. amazeui学习笔记三（你来我往1）--常见问题FAQs

    amazeui学习笔记三(你来我往1)--常见问题FAQs 一.总结 1.DOM事件失败:记得加上初始化代码,例如 图片轮播 $('#my-slider').flexslider(); 2.jquer ...

  4. 1.16 Python基础知识 - 装饰器初识

    Python中的装饰器就是函数,作用就是包装其他函数,为他们起到修饰作用.在不修改源代码的情况下,为这些函数额外添加一些功能,像日志记录,性能测试等.一个函数可以使用多个装饰器,产生的结果与装饰器的位 ...

  5. How to Rotate Tomcat catalina.out

    If catalina.out becomes 2GB in size, tomcat crashes and fails to start without any error message. To ...

  6. express 的路由分离

    在做大型项目是一般不会把路由写入server.js里,所以就有了路由分离 1.在项目目录下创建router文件夹 user.js var express = require("express ...

  7. （转）Windows Server 2012 R2虚拟机自激活（AVMA）技术

    转自: 老丁的技术博客 相信Hyper-v管理员都有这样的经历,安装多台虚拟机后,都要一台一台手工激活,如果虚拟机足够多的话,这是一项很繁琐的工作,但从Windows Server 2012 R2开始 ...

  8. 【BZOJ 3172】单词

    [链接]h在这里写链接 [题意]     给你n个单词;     这n个单词组成了一篇文章;     问你每个单词在这篇文章中出现了多少次.     其中每个单词之间用一个逗号隔开->组成一篇文 ...

  9. 全端project师必备技能汇总

    首先,看一张前端知识结构图:  (原文: ithomer) 图片的形式具有诸多的不便.缺失源图的我们.无法为此图贡献些什么,随着时间的迁移,也许有些技术点会发生改变.所以有了这个GitHub项目.我们 ...

  10. Linux上制作Window启动盘

    Linux上制作Window启动盘 注意: U盘在Linux中的标签(依具体情况而定:执行df查看) U盘 ----- /dev/sdb4 格式化U盘 建立U盘的启动分区 安装关键工具 ms-sys ...