在创建Id之前使用getElementById
在创建Id之前使用getElementById
提问于 2014-05-30 08:54:52
以下代码起作用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Orientation Test</title>
<style>
</style>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="initial-scale=1, user-scalable=no">
<style type='text/css'>
body {font-family:Helvetica,FreeSans,Arial,sans; font-size:18px;}
h1 {margin:0; font-size:22px;}
label {font-weight:bold; display:inline-block; width:50%;}
#wrapper {width:100%; height:100%;}
</style>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div id="wrapper">
<h1>Device motion test</h1>
<p><label for="aX">aX</label><span id="aX"></span></p>
<p><label for="aY">aY</label><span id="aY"></span></p>
<p><label for="aZ">aZ</label><span id="aZ"></span></p>
<p id = "change">0</p>
</div>
</body>
</html>Javascript文件：
var s$ = function(e) {
return document.getElementById(e);
};
if (window.DeviceMotionEvent) {
alert('devicemotion supported');
window.addEventListener('devicemotion', function(ev) {
var acc = ev.accelerationIncludingGravity;
dmHdlr(acc.x, acc.y, acc.z);
}, false);
}
else {
alert("devicemotion not supported on your device or browser.");
}
var lastDM = new Date().getTime();
function dmHdlr(aX, aY, aZ) {
var currDM = new Date().getTime();
//if (currDM < lastDM + 1000) {return;}
lastDM = currDM;
s$('aX').innerHTML = aX ? aX.toFixed(3) : '?';
s$('aY').innerHTML = aY ? aY.toFixed(3) : '?';
s$('aZ').innerHTML = aZ ? aZ.toFixed(3) : '?';
}我不明白这段代码是怎么工作的。在创建我想要的元素之前，我正在使用document.getElementById函数。在声明特定元素的id之前，我已经将标记放在HTML文件的标题中，这段代码如何工作？脚本在元素创建之前运行，但它有效吗？
谢谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-05-30 09:03:06
看来，您的任何函数直到
if (window.DeviceMotionEvent) {... 被触发了。此时，主体已经呈现，id存在于DOM中，因此没有问题。您可以首先声明您的函数，只要在调用该函数时id存在。在这种情况下，确实如此。
Stack Overflow用户
发布于 2014-05-30 09:32:48
我可以说，对于Chrome、Firefox和IE9浏览器，所有这些都遵循解析html和执行javascript的顺序。
浏览器首先加载html并从页面首页解析其所有标记。在html中，它将解析标题标记，然后解析元标记，然后是样式标记等等。它还解析，您在其中提到的javascript文件，而不是执行。
然后构建DOM层次结构，并将CSS属性设置为DOM元素。
最后，当DOM到位时，它将执行javascript。
if (window.DeviceMotionEvent) {
...
window.addEventListener('devicemotion', function(ev) {
...
}这就是为什么浏览器在if中执行main.js条件并通过id获取元素的原因，因为浏览器已经解析了这些元素。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23959716
复制相关文章
相似问题
在创建sql之前使用ID？
getElementById与使用id名称
无法使用getelementbyid访问id
getElementById("id").value
GetElementByID -多个ID
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
