JavaScript DOM问题
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript DOM问题相关的知识，希望对你有一定的参考价值。
js代码：
var bar=0;
var line="||";
var amount="||";
count()
function count()
bar=bar+2;
amount = amount + line;
document.getElementById("chart").value = amount;
document.getElementById("percent").value=bar+"%";
if(bar<99)
setTimeout("count()",100);
else
window.location.href="http://www.sina.com.cn";
html代码：
<script src="js/JScript.js" type="text/javascript"></script>
</head>
<body>
<form id="loading" runat="server">
<div>
<asp:TextBox ID="chart" runat="server" size="46" style="font-family:Arial; font-weight:bolder; color:#ff0000; background-color:#fef4d9; padding:0px; border-style:none;"></asp:TextBox>
<br />
<asp:TextBox ID="percent" runat="server" style="color:#ff0000; text-align:center; border-width:medium; border-style:none;"></asp:TextBox>
</div>
</form>
</body>
这样就提示错误了。。
但是把heml代码改为
<head runat="server">
<title></title>
</head>
<body>
<form id="loading" runat="server">
<div>
<asp:TextBox ID="chart" runat="server" size="46" style="font-family:Arial; font-weight:bolder; color:#ff0000; background-color:#fef4d9; padding:0px; border-style:none;"></asp:TextBox>
<br />
<asp:TextBox ID="percent" runat="server" style="color:#ff0000; text-align:center; border-width:medium; border-style:none;"></asp:TextBox>
</div>
</form>
</body>
<script src="js/JScript.js" type="text/javascript"></script>
</html>
这样就正常了。
请问什么怎么样回事？JavaScript不是页面加载完才执行JavaScript代码的吗？
当你把JS代码放在上部时，由于下面的DOM元素还没有被加载，所以，document.getElementById("chart").value 这样的对dom元素进行操作的语句将会报没有对象的错误。
当你把JS放到下部时，先加载了页面元素，然后加载JS代码，并马上被执行时，dom元素已经存在，所以能够正常执行。 参考技术A 当然不是啊，如果要等页面加载完运行的话，这样调用方法
window.onload=count(); 参考技术B JS是边下载边执行的，所以当你把js节点放在上部的时候<body>中的dom还没有加载到本地，从而报不是对象的错误；而当放到下部的时候JS想要的dom已经下载，所以不会出错。
JavaScript是边下载边执行的。
Chrome DOM/JavaScript 参考
【中文标题】Chrome DOM/JavaScript 参考【英文标题】：Chrome DOM/JavaScript Reference 【发布时间】：2013-03-17 18:38:14 【问题描述】：是否有像 Mozilla Developer Network 这样的 Chrome Javascript/DOM 参考页面？ 还有哪个页面涵盖了 Chrome 特定的“标准”实现？
【问题讨论】：
***.com/questions/3768606/… 将MDN与CanIUse.com结合起来？ 【参考方案1】：https://groups.google.com/a/chromium.org/forum/?fromgroups=#!topic/chromium-discuss/N56v_0tOVaM
Chrome 使用 V8 JavaScript 引擎，它实现了 ECMAScript ECMA-262，http://www.ecma-international.org/publications/standards/Ecma-262.html
查看这些链接以了解实施和标准
【讨论】：
更正第二个链接：ecma-international.org/publications/standards/Ecma-262.htm【参考方案2】：据我所知，Chrome 没有任何具体内容。有Webkit API documentation，但这不是很全面，也只是指向MDN！如果您看到 Using the Document Object Model From JavaScript → Other Resources 页面，它指出：
Mozilla Gecko DOM Reference 是 JavaScript DOM 最全面的参考资料之一
WebPlatform.org最终会覆盖所有浏览器。
另外，我通常发现 MDN 无论如何都会突出显示在其他浏览器中的兼容性，例如 Chrome 显示在 DOM Mutation Observer 页面上。
【讨论】：
问题是 Chrome 的实现并不总是符合 MDN 和 W3.org。在这种情况下，我最终会对文档进行逆向工程。以上是关于JavaScript DOM问题的主要内容，如果未能解决你的问题，请参考以下文章