getElementById（）到底获取的是什么。-慕课网

首页课程实战体系课手记专栏慕课教程

getElementById（）到底获取的是什么。

来源：3-5 显示和隐藏（display属性）

qq_那海_0

2016-02-23 13:55

为什么这么实现不了。我的想法是：getElementById（）获取对象，然后引用对象实现属性的更改。

写回答关注

5回答

小梧桐_叶子

2016-03-13 11:59:28
最后，关于怎么修改可以不重复敲呢？
那就取出来吧，再创一个<script>便签，放<body> 下 </p>标签之后即可，如下：
```
<p>...</p>
    <script>
       var mychar = document.getElementById("con");
    </script>
    <form>...</form>
```
实测，可行！
0 0
小梧桐_叶子

2016-03-13 11:47:40

首先复习下前两节讲的内容，通过document.getElementById("id")可以获取元素内容，但具有的该id元素位于下面时，根据浏览器从上而下（同一优先级）解析顺序可以知道，浏览器正在读取<head>中的<script>命令，而该命令却是要调需用<body>中的id 便签内容，此时浏览器并不知道<body>到底写了什么鬼，正如另一位同学说的，浏览器顿时就二了。
所以元素不能正常获取，输出值为： null
eg：
```
<html>
<head>
<script>
  var mychar = document.getElementById("con");
   document.write(mychar);                          //输出   null
</script>
</head>
<body>
     <p id="con"> 你找不着我^-^ </p>
<body>
</html>
```
到这可能又有问题了，先看下这个例子：
```
<html>
<head>
<title>display</title>
    <script type="text/javascript"> 
    
        function hidetext()  
{  
var mychar = document.getElementById("con");
        mychar.style.display="none";
}  
    </script> 
</head> 
<body>  
    <h1>JavaScript</h1>  
    <p id="con">做为一个Web开发师来说，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。</p> 
    <form>
       <input type="button" onclick="hidetext()" value="隐藏内容" /> 
    </form>
</body> 
</html>
```
从上面可以看出document.getElementById("con")依旧位于被获取对象id 之前，可这为什么不显示null却能正常显示呢，关键原因是有他在：
function 函数 .
从第一章最后一节有讲过关于函数调用说明，函数不能自动执行的，执行需调用，到这大概就清楚了，这例子能正常运行原因在于使用了function hidetext() 函数，使得浏览器运行到<script>内 funciton 函数时不会立即执行解析出结果，函数会等待被调用，浏览器会继续按顺序解析下去，直到<button>出现，触发按钮，此时所有内容以表达，而函数下的 document.getElementById("con") 就静静等待直到被运行 ~ perfect
update：刚把<form></form>放<p></p>之前了，功能正常，这是说明<body>内优先级平等吗，求解？
0 0
想为TA而学

2016-02-23 14:31:00

获得的是你所要改变的具体位置标签

0 0
qq_呼延_0

2016-02-23 14:28:38

获取的是你所要改变的具体位置标签

0 0
兴xing

2016-02-23 14:06:38

不是很懂，但是有解决方法，我的猜想是js加载的时候con还没有加载完成，所有你点击的时候get不到con这个元素，将script代码放到body的最下面就可以了。

1 0

qq_那海_...

js加载也应该是先从头部开始吧，我没把getElementById写进函数里面，就是不想在每个函数中都重复声明。结果实现不了。

2016-02-23 14:44:46

共 1 条回复 >