在学习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. SFC梯形图编程

    SFC是居首的PLC编程语言 !: 不能为PLC所执行, 还需要其他的编程语言(梯形图) 转换成PLC可执行程序. 常用的SFC编程方法有三种 >  应用启保停电路进行 >  应用 置/复 ...

  2. NIO专栏学习

    http://blog.csdn.net/column/details/12993.html

  3. IntelliJ IDEA 2018 Community(社区版)创建J2EE项目+Tomcat9部署

    博主打算开始系统地自学JAVA,首要问题就是解决IDE的问题, 以前用过像VS.Android Studio.Eclipse,知道Eclipse是JAVA最传统的IDE, 用过VS和AS的朋友都知道, ...

  4. [Vue + TS] Use Dependency Injection in Vue Using @Inject and @Provide Decorators with TypeScript

    Vue 2.2 introduced a simple dependency injection system, allowing you to use provide and inject in y ...

  5. 【转载】使用logstash+elasticsearch+kibana快速搭建日志平台

    原文链接:http://www.cnblogs.com/buzzlight/p/logstash_elasticsearch_kibana_log.html 日志的分析和监控在系统开发中占非常重要的地 ...

  6. leetCode解题报告5道题(十)

    题目一:Valid Number Validate if a given string is numeric. Some examples: "0" => true &quo ...

  7. Relaxation step（Dijkstra's 最短路径算法）

    翻译成中文就是"松弛",属于工程优化的范畴: Dijkstra 的单源最短路径算法,有一个重要的步奏,当访问到新的结点 u (加入到集合 S),然后遍历 u 的邻接顶点(Adj), ...

  8. golang recover

    package main import "fmt" func divideByZero() { // Use this deferred function to handle er ...

  9. django 简单会议室预约（2）

    --我们先打开settings.py 配置文件: import os #指明django APP目录路径 BASE_DIR = os.path.dirname(os.path.dirname(os.p ...

  10. 【CS Round #43 B】Rectangle Partition

    [链接]https://csacademy.com/contest/round-43/task/rectangle-partition/ [题意] 水题 [题解] 横着过去,把相邻的边的宽记录下来. ...