一、动画
1.创建动画容器
所有动画都应该与容器元素关联。
<div id ="container">
<div id ="animate">我的动画在这里。</div>
</div>2.为元素添加样式
应该通过 style = "position: relative" 创建容器元素。
应该通过 style = "position: absolute" 创建动画元素。
3.动画代码
JavaScript 动画是通过对元素样式进行渐进式变化编程完成的。
这种变化通过一个计数器来调用，当计数器间隔很小时，动画看上去就是连贯的
基础代码是：
var id = setInterval(frame, 5);
function frame() {
if (/* 测试是否完成 */) {
clearInterval(id);
} else {
/* 改变元素样式的代码 */
}
} 4.使用 JavaScript 创建动画
例：
function myMove() {
var elem = document.getElementById("animate");
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}二、改变HTML
1.改变 HTML 元素的内容
(1)改变 HTML 输出流
JavaScript 能够创建动态 HTML 内容：
在 JavaScript 中，document.write() 可用于直接写入 HTML 输出流：
document.write(Date());
**注**`：千万不要在文档加载后使用 document.write()，这样会覆盖文档`
**(2)改变 HTML 内容**
修改 HTML 文档内容最简单的方法是，使用 innerHTML 属性。
> document.getElementById(id).innerHTML = new text
**(3)改变属性的值**
如需修改 HTML 属性的值，使用如下语法：
> document.getElementById(id).attribute = new value
如下例子修改了 <img> 元素的 src 属性的值：
<font color=red>2.改变HTML元素的样式(改变CSS)
**（1）改变 HTML 样式**
更改 HTML 元素的样式，使用如下语法：
> document.getElementById(id).style.property = new style
Hello World!
document.getElementById("p2").style.color = "blue";
**（2）使用事件**
HTML DOM 允许在事件发生时执行代码。
当“某些事情”在 HTML 元素上发生时，浏览器会生成事件：
- 点击某个元素时
- 页面加载时
- 输入字段被更改时
如下为在用户点击按钮时，更改 id="id1" 的 HTML 元素的样式：
我的标题 1
<button type="button" onclick=
"document.getElementById('id1').style.color = 'red'">
点击我！
### 三、节点
`1.创建新 HTML 元素（节点）`
向 HTML DOM 添加新元素，必须**首先创建这个元素**（元素节点），然后将其追加到已有元素。
这是一个段落。
这是另一个段落。
var element = document.getElementById("div1");
element.appendChild(para);
这个例子中的 appendChild() 方法，追加新元素作为父的最后一个子。
`2.创建新 HTML 元素 - insertBefore()`
<br>
`3.删除已有 HTML 元素`
删除某个 HTML 元素，您需要知晓该元素的父：**(removeChild)方法**
`4.替换 HTML 元素`
使用 replaceChild() 方法：
parent.replaceChild(para, child);
# 四、事件
`1.对事件作出反应`
JavaScript 能够在事件发生时执行，比如当用户点击某个 HTML 元素时。
为了在用户点击元素时执行代码，向 HTML 事件属性添加 JavaScript 代码：
> onclick=JavaScript
- 当用户点击鼠标时
- 当网页加载后
- 当图像加载后
- 当鼠标移至元素上时
- 当输入字段被改变时
- 当 HTML 表单被提交时
- 当用户敲击按键时
`2.使用 HTML DOM 分配事件`
HTML DOM 允许您使用 JavaScript 向 HTML 元素分配事件：
为 button 元素指定 onclick 事件：
`4.onload 和 onunload 事件`
当用户进入后及离开页面时，会触发 onload 和 onunload 事件。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，然后基于该信息加载网页的恰当版本。
onload 和 onunload 事件可用于处理 cookie。
`5.onchange 事件`
onchange 事件经常与输入字段验证结合使用。
当用户改变输入字段内容时，会调用 upperCase() 函数。
`6.onmouseover 和 onmouseout 事件`
onmouseover 和 onmouseout 事件可用于当用户将鼠标**移至 HTML 元素上或移出时触发**某个函数
`7.onmousedown, onmouseup 以及 onclick 事件`
onmousedown, onmouseup 以及 onclick 事件构成了完整的鼠标点击事件。
首先当鼠标按钮被点击时，onmousedown 事件被触发；然后当鼠标按钮被释放时，onmouseup 事件被触发；最后，当鼠标点击完成后，onclick 事件被触发。
## 五、事件监听程序
`1.addEventListener() 方法`
添加当用户点击按钮时触发的事件监听器
document.getElementById("myBtn").addEventListener("click", displayDate);
**addEventListener() 方法为元素附加事件处理程序而不会覆盖已有的事件处理程序**
- 可以在一个元素添加多个事件处理程序。
- 能够向一个元素添加多个相同类型的事件处理程序，例如两个 "click" 事件。
- 能够向任何 DOM 对象添加事件处理程序而非仅仅 HTML 元素，例如 window 对象。
`使用 removeEventListener() 方法轻松地删除事件监听器`
<br>
2.语法
element.addEventListener(event, function, useCapture);
(1)第一个参数是事件的类型（比如 "click" 或 "mousedown"）。
(2)第二个参数是当事件发生时我们需要调用的函数。
(3)第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。
**注意** 请勿对事件使用 "on" 前缀；要使用 "click" 代替 "onclick"。
`3.向元素添加事件处理程序`
（1)当用户点击某个元素时提示 "Hello World!"：
(2)也可以引用外部“命名”函数：
`4.向相同元素添加多个事件处理程序`
(1)addEventListener() 方法允许向相同元素添加多个事件，同时不覆盖已有事件：
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
(2)能够向相同元素添加不同类型的事件：
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);
5.向 Window 对象添加事件处理程序
addEventListener() 允许您将事件监听器添加到任何 HTML DOM 对象上，比如 HTML 元素、HTML 对象、window 对象或其他支持事件的对象，比如 xmlHttpRequest 对象。
添加当用户调整窗口大小时触发的事件监听器：
> window.addEventListener("resize", function(){
> document.getElementById("demo").innerHTML = sometext; });
`6.事件冒泡还是事件捕获？`
- (1)在冒泡中，最内侧元素的事件会首先被处理，然后是更外侧的
<br>
- (2)在捕获中，最外侧元素的事件会首先被处理，然后是更内侧的
在 addEventListener() 方法中，能够通过使用“useCapture”参数来规定传播类型：
addEventListener(event, function, useCapture);
默认值是 false，将使用冒泡传播，如果该值设置为 true，则事件使用捕获传播。
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);
7.removeEventListener() 方法
removeEventListener() 方法会删除已通过 addEventListener() 方法附加的事件处理程序
### 六、集合
`1.HTMLCollection 对象`
getElementsByTagName() 方法返回 HTMLCollection 对象。var x = document.getElementsByTagName("p");
`2.Collection 长度`
- **length** 属性定义了 HTMLCollection 中元素的数量：
实例
var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = myCollection.length;
- 改变所有 `<p>` 元素的背景色：
var myCollection = document.getElementsByTagName("p");
var i;
for (i = 0; i < myCollection.length; i++) {
myCollection[i].style.backgroundColor = "red";}
