八五：DOM基本认识及JS如何控制DOM

1、ODM

Document Object Model ：文档对象模型
简单来说就是HTML标签，通过js控制标签

2、JS控制DOM

（1）选中元素 - document.getElementById()

如果把script写在选中的元素上面，要用上window.οnlοad=function(){}；
含义：在整个页面加载完之后执行这个函数
因为代码一行行执行，在script时还没有定义元素

document.getElementById()
通过ID选中元素

（2）对选中元素进行操作，改动CSS样式

因为window.onload，所以会先加载页面后再执行window.onload下的代码；
设置一个定时器函数并通过ID调用元素；
进行style中width的设置为400；
所以，页面显示：出现1个宽高200的正方形，2秒后宽度增加为400。

八六：DOM与JS的交互及if逻辑语句

1、JS控制DOM（2）

如果把script写在选中元素下面，则可以省略window.οnlοad=function(){}；
因为代码一行行执行，先定义元素，后面再进行js控制，就不会出现找不到元素的问题。

2、交互

鼠标也元素之间进行交互；
事件，交互的一种，比如鼠标、键盘等于元素之间的交互

（1）事件1 - onclick

最常用的事件，用鼠标点击时触发的事件（即函数）

3、逻辑判断

（1）if

当if的条件成功，即‘条件’==true，执行成功内容，不成功执行失败内容。
条件判断后会自动换算为布尔值（true/false）

if(条件){
成功内容
} 
else {
失败内容
}

八七：JS对DOM选择与操作深入

1、DOM选择方法

（1）ID - document.getElementById()

通过元素id进行选中，看上面

（2）标签 - document.getElementsByTagName

Elements，复数的；TagName：代表选取的标签
因为是负数，用类似数组的方式，通过下标进行选择

（3）类 - document.getElementsByTagName

与标签同理，复数形式，用下标选择

2、操作深入-样式写法

（1）cssText

不用多次写，可以像css一样写样式

（2）innerHTML

代表里面的HTML的内容，即修改原div的内容

八八：JS控制DOM的类及交互深入

1、控制DOM的类

（1）className

返回元素标签上的class的内容

同时可以对元素进行赋值

2、交互深入- 事件

（1）onclick

最常用的事件，用鼠标点击时触发的事件

（2）onmouseover / onmouseout

onmouseover
鼠标移入，鼠标移到div的位置时，触发事件
onmouseout
鼠标移出，鼠标移出div的位置时，触发事件

（3）window.onresize

浏览器大小发生改变时，触发函数
一直改变一直触发