前言
js学习ing，form（w3c上js微课）
动画
现在我们知道如何选择和更改DOM元素，我们可以创建一个简单的动画。
让我们创建一个简单的HTML页面，其中包含将使用JS动画的框元素。
<style>
#container {
width: 400px;
height: 400px;
background: green;
position: relative;
}
#box {
width: 30px;
height: 30px;
background: red;
position: absolute;
}
</style>
<div id="container">
<div id="box"> </div>
</div>
我们的box元素在容器元素的内部。注意用于元素的 position 属性：
容器是相对的，盒子是绝对的。这将允许我们创建相对于容器的动画。
我们将会动画红色框，使其移动到容器的右侧。
步骤
要创建动画，我们需要以较小的时间间隔更改元素的属性。
我们可以通过使用 setInterval() 方法来实现这一点，它允许我们创建一个定时器并调用一个以定义的间隔（以毫秒为单位）反复更改属性的函数。
例如：
var t = setInterval(move, 500);
此代码创建一个每500毫秒调用一个move()函数的计时器。
现在我们需要定义move() 函数，改变框的位置。
// 定义开始的位置
var pos = 0;
// 获取box元素
var box = document.getElementById("box");
function move() {
pos += 1;
box.style.left = pos+"px"; //px = pixels
}
注意：提示: move() 函数在每次调用时将box元素的left属性增加1。
document 对象
document对象是文档的根节点，window.document属性就指向这个对象。也就是说，只要浏览器开始载入HTML文档，这个对象就开始存在了，可以直接调用。
JavaScript中有一个预定义的 document 对象，可用于访问DOM上的所有元素。
换句话说，文档对象是网页中所有对象的所有者（或根）。
因此，如果要访问HTML页面中的对象，则始终访问 document 对象。
例如:
document.body.innerHTML = "Some text";
由于 body 是 DOM 的元素，因此我们可以使用 document 对象访问它并更改 innerHTML 属性的内容。
