DOM学习笔记（一）

前言

js学习ing，form（w3c上js微课）

动画

现在我们知道如何选择和更改DOM元素，我们可以创建一个简单的动画。

让我们创建一个简单的HTML页面，其中包含将使用JS动画的框元素。

 

        

我们的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 属性的内容。