Question

以下代码有效：

<!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文件的标题中，这段代码如何工作？该脚本在创建元素之前运行但是有效吗？

由于

Answer 1

在

之前，似乎没有任何函数执行

 if (window.DeviceMotionEvent) {...

被触发。那时身体已经渲染并且id存在于DOM中，所以没问题。只要在调用函数时存在id，就可以先声明函数。在这种情况下，确实如此。

Answer 2

我可以说Chrome，Firefox和IE9浏览器都遵循解析html和执行javascript的顺序。

浏览器首先加载html并从页面头部解析其所有标记。在你的html中，它将解析title标签，然后是meta标签，然后是样式标签等。它还 PARSES 你提到的javascript文件但不是 < EM> EXECUTE

然后构建DOM层次结构并将CSS属性设置为DOM元素。

最后，当DOM到位时，它会执行javascript。

if (window.DeviceMotionEvent) { ... window.addEventListener('devicemotion', function(ev) { ... }

这就是为什么您的浏览器在if中执行main.js条件并按ID获取元素的原因，因为您的浏览器已经解析了这些元素。

在创建Id之前使用getElementById

2 个答案: