Javascript的值为什么会变成Hello world出现在上面？
来源：3-3 innerHTML 属性
suBJuly
2017-04-17 20:38
想问下是什么原因呢？
1/是因为程序在执行HTML文件时会提前预加载或者预编译script文件所以javascript的值被改变了；
2/是因为程序是按从上到下顺序执行，然后执行到document.write("P标签原始内容："+mycon.innerHTML);后将javascript的值改为Hello world.
想请教下这两种哪种对的呢？还是有其他的解释？谢谢
写回答
关注
5回答
-
- 我不是管家
- 2017-04-19 14:02:38
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>innerHTML</title> <script type="text/javascript"> // 浏览器解析你的代码是从上到下，此时，浏览器开始解析var mychar=document.getElementById("con"); var mychar=document.getElementById("con"); //很神奇的发现 mychar 这个变量是undined,为什么呢，因为此时<body></body>里面的代码浏览器还没有开始看 // 所以你通过id来找document.getElementById("con")是找不到的;,所以下面的mychar的变量都是无意义的 //结果就是js代码失效 document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容 mychar.innerHTML="Hello world!"; document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容 //所以要么把script里面的内容放在下面，一定要放在你要获取id节点下面，比如你没有用到p标签，其实放在p标签上面，和下面也行 //2,通过window.onload=function(){ 你的js代码 }，的方法，他的作用是当页面加载完之后开始调用 </script> </head> <body> <h2 id="con">javascript</h2> <p> JavaScript是一种基于对象、事件驱动的简单脚本语言，嵌入在HTML文档中，由浏览器负责解释和执行，在网页上产生动态的显示效果并实现与用户交互功能。</p> </body> </html> -
- suBJuly
- 2017-04-19 09:59:40
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>innerHTML</title> <script type="text/javascript"> var mychar=document.getElementById("con"); document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容 mychar.innerHTML="Hello world!"; document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容 </script> </head> <body> <h2 id="con">javascript</h2> <p> JavaScript是一种基于对象、事件驱动的简单脚本语言，嵌入在HTML文档中，由浏览器负责解释和执行，在网页上产生动态的显示效果并实现与用户交互功能。</p> </body> </html> -
- 我不是管家
- 2017-04-18 23:40:39
可能是这样的，script的确在哪都能运行，但是要看下你的代码是否与body里面的内容有关联，如果仅仅是document.write("P标签原始内容："),这样是可行的，但是如果要获取body里面的节点的话获取不到，
最好贴下代码
-
- 我不是管家
- 2017-04-18 07:28:40
实际操作可以发现，当你把script的内容放在body上面的时候，页面报错，因为你无法获取id，这是因为浏览器解析这个页面是从上到下，当他执行JavaScript的代码是，dom并没有开始加载；
当script放在body下面时，由于从上至下，dom已经解析完成，这时候可以获取属性节点id，就可以使用innerHtml的方法更改元素节点的内容
-
- yohoowpj
- 2017-04-17 20:52:57
第二种
JavaScript入门篇
JavaScript做为一名Web工程师的必备技术，本教程让您快速入门
739816 学习 · 9566 问题
相似问题