document.getElementById()

最新推荐文章于 2022-11-15 10:41:22 发布

xitong2012

最新推荐文章于 2022-11-15 10:41:22 发布

阅读量2.6k

点赞数

分类专栏： Linux学习笔记文章标签： xhtml list 网络 html div

Linux学习笔记专栏收录该内容

31 篇文章 0 订阅

订阅专栏

我用document.getElementById()的个人总结
前段做了个关于静态页面获取点击次数的程序，在做的过程中在document.getElementById()这一块出了一些问题，无论如何就是不能把从后台读取的次数输出到页面上来！后来，

我去网上查阅了一些有关document.getElementById()的用法，又参考一些大网站里的具体做法，最后终于搞定了，现在，我就把我用document.getElementById()的一点小小心得

给大家分享一下，希望能对广大的程序爱好者有所帮助！

我就用一个简单的例子来演示一下！

下面先看一组代码,这给代想要的结果是在<div></div>里输出"迷你网络地带:我出来了!"

<!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=gb2312" />
<title>document.getElement : http://www.netded.com </title>

</head>
<script>
      function List()
      {
          document.getElementById("t1").innerHTML='迷你网络地带:我出来了!';
      }
List();
</script>

<body >
       <div id="t1">
       </div>
</body>
</html>

如果大家运行这段代码,会发现，并没有正确的输出我们想要的效果！

我试图想利用List()函数自动调用，输出结果，但是，却没有输出任何内容！

出现这种情况的原因是我没有让document.getElementById("t1")出现在 id="t1"之后，如果我们再把程序改为以下的代码:

<!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=gb2312" />
<title>document.getElement : http://www.netded.com  </title>
</head>

<body >
       <div id="t1">
       </div>

</body>

<script>
      function List()
      {
          document.getElementById("t1").innerHTML='迷你网络地带:我出来了!';
     }
List();
</script>

</html>

我们再运行这段代码，会发现，程序正常无误，会输出:"迷你网络地带:我出来了"

也就是说，我把在用document.getElementById()取得一个id对象时，必须在这个对象的id先出现，然后再获取！

后来，我去163的网站里看了他们的document.getElementById()的用法，发现，他们并没有把这个命令放在id对象之后，而是在之前

要是这样的话，我们的程序就要稍做一个修改，也就是把List()这个函数放到body里边，让body加载

也就是改为   <body οnlοad="List()"> 这样以来，不管document.getElementById()放在要获取的id之前还是之后，都可以正确无误了！

还有一咱情况是:当我们触发某个事件时，需要获取id对象，这个时候也不用考虑放在id之前还是之后了

如同下面的代码

<!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=gb2312" />
<title>document.getElement : http://www.netded.com  </title>
</head>
<script>
      function List(){
        document.getElementById("t1").innerHTML='迷你网络地带:我出来了！';
   }

</script>
<body >
    <div id="t1">
    </div>
    <a href="#" οnclick="List()">请单击我</a>
</body>

</html>

当触发单击事件的时候调用List()函数，然后再输出结果:迷你网络地带:我出来了！

总结：如果要在程序加载的时候自动用document.getElementById()获取某个id对象的话，我们需要把document.getElementById()放在id之后，或者是在<body οnlοad="调用你的函数">,如果是在

某个事件触发时再获取ID对象时，就不用担心放在之前还是之后了！

xitong2012

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
document.getElementById()

我用document.getElementById()的个人总结前段做了个关于静态页面获取点击次数的程序，在做的过程中在document.getElementById()这一块出了一些问题，无论如何就是不能把从后台读取的次数输出到页面上来！后来，我去网上查阅了一些有关document.getElementById()的用法，又参考一些大网站里的具体做法，最后终于搞定了，现在，我就把我用
复制链接

扫一扫

专栏目录