document.getElementById为空或不是对象的解决方法

九九

11 年前

一些简单的JS问题给我难住了，浪费了不少时间。

以前也经常碰到像今天这样提示document.getElementById().value为空或不是对象的问题，不过当时只要好好检查一下就会发现是id没有或是写错了，只要改过来也就好了。

还有一种就是在

<script language='text/javascript' defer=true>

加上这个defer属性有时候也可以OK。可是今天这个情况着实的让我郁闷了一会，不管怎么改就是提示为空或缺少对象。

查询了一下网络资源,还好,找到了原因.

居然是把js代码写在了页面的最前面。原来document.getElementByID()还和位置有关系，也就是说出现document.getElementById()的时候要切记把代码段放到html的元素之后，然后在试试，应该就没什么问题了。以前也经常碰到一些简单的js代码，不过还真没注意过这个问题的存在。

(1)检查id是否没有或者写错了,这时只要改过来就行了;

(2)可能与id所在的位置有关,示例代码:

<head>
    <title></title>
    <script type="text/javascript">
            var people = [
        { "firstname": "Bill", "lastname": "Gates" },
        { "firstname": "Tomas", "lastname": "Adison" },
        { "firstname": "Happy", "lastname": "Year" }
        ];
            people[1].firstname = "Job";
            document.getElementById('showtext').innerHTML = people[1].firstname;
        }
    </script>
</head>
<body
    <div id="showtext"></div>
</body>

这里会报出"document.getElementById为空或不是对象"的错误.

可以分析得出,页面在加载时候先加载JS代码,所以当执行到第10行时候会发现找不到 id为showtext 的标签,自然就错了.

这时候,只需要把该id标签放到JS执行的之前就不会出错,或者把 JS封装成方法调用,也不会出错!切记.修改后的代码:

<head>
    <title></title>
    <script type="text/javascript">
        function test() {
            var people = [
        { "firstname": "Bill", "lastname": "Gates" },
        { "firstname": "Tomas", "lastname": "Adison" },
        { "firstname": "Happy", "lastname": "Year" }
        ];
            people[1].firstname = "Job";
            document.getElementById('showtext').innerHTML = people[1].firstname;
        }
    </script>
</head>
<body onload="test()">
    <div id="showtext"></div>
</body>