                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript入门篇

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

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

qq_那海_0

2016-02-23

源自：JavaScript入门篇 3-5

关注问题我要回答

1705

操作

收起

5 回答

小梧桐_叶子
2016-03-13

最后，关于怎么修改可以不重复敲呢？
那就取出来吧，再创一个<script>便签，放<body> 下 </p>标签之后即可，如下：

<p>...</p>
    <script>
       var mychar = document.getElementById("con");
    </script>
    <form>...</form>

实测，可行！

0 回复有任何疑惑可以回复我~

收起回答

小梧桐_叶子
2016-03-13

首先复习下前两节讲的内容，通过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>内优先级平等吗，求解？