求大侠指点,为什么以下代码 getElementById获取不到 id='myshow'的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=utf-8" />
<title>无标题文档</title>
<script language="javascript" type="text/javascript">
var el=document.getElementById("myshow");
el.innerHTML="dfsdfdf"
</script>
</head>
<body>
<div id="myshow"></div>
</body>
</html>
把 script 标签 放到 div 后面
放onload事件里面,或者将你的代码放到dom对象下,你的代码执行时dom还没有生成,放下面就没事了
<script language="javascript" type="text/javascript">
window.onload=function(){
var el=document.getElementById("myshow");
el.innerHTML="dfsdfdf"
}
</script>
DOM加载顺序
1.解析HTML结构。
2.加载外部脚本和样式表文件。
3.解析并执行脚本代码。
4.构造HTML DOM模型。
5.加载图片等外部文件。
6.页面加载完毕。
加载顺序实例:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Title</title>
<style type="text/css">
body
{
font-sie: 12px;
}
</style>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<script src="js.js" type="text/javascript"></script>
</head>
<body>
<div>
<script type="text/javascript">
function f1() { }
</script>
<img src="1.gif" />
</div>
<script type="text/javascript">
function f2() { }
</script>
</body>
</html>
html → head → title → #text(网页标题) → style → 加载样式 → 解析样式 → link → 加载外部样式表文件 → 解析外部样式表 → script → 加载外部脚本文件 → 解析外部脚本文件 → 执行外部脚本 → body → div → script → 加载脚本 → 解析脚本 → 执行脚本 → img → script → 加载脚本 → 解析脚本 → 执行脚本 → 加载外部图像文件 → 页面初始化完毕
这段JS代码运行时,浏览器还没解析后面的代码,DOM树中还没有那个div,把 script 标签 放到 div 后面
事实上已经取到了,只不过你的js代码没有触发,可以将那段代码写在一个function里,然后用window.onload,或者写个button click事件触发它即可。
脚本先执行的,标签后载入,改下脚本位置就可以了
错误提示:不能设置null的innerHTML属性
为什么没有得到div元素呢?
因为这段JS代码运行时,浏览器还没解析后面的代码,DOM树中还没有那个div。
可以这样
window.onload = function(){
var el=document.getElementById("myshow");
el.innerHTML="dfsdfdf"
};
或者把标签放到<div>后面</p> <p>看楼主应该是个新手,你先查一下浏览器解析网页的顺序的相关资料<br> 建议你先看一下《JavaScript从入门到精通》之类的入门书籍,再看看《JavaScript高级程序设计》</p>