web前端java script BOM学习笔记2017.8.1

DOM: document object model
文档对象模型提供了一套可以访问和修改HTML文档内容的方法
访问：获取
修改：设置
1 JS要去操作HTML元素，必须要先用JS找到他，转换为JS的DOM对象
操作：
a 标签属性
b css属性
c 元素内容
2 找对象的方法
a 通过标签名来找对象
var DOM_OBJ=document.getElementsByTagName("标签名");
返回的是集合（数组），即使只有一个标签，返回的也是一个集合
b 通过id名来找对象：id名是唯一的
var DOM_OBJ=document.getElementById("id名");
c 可以组合使用标签名和id名的方式来获取对象
d 通过name属性名来找对象,返回的是一个集合
var DOM_OBJ=document.getElementsByName("nameValue");
e 通过css类名找对象,返回的是一个集合
var DOM_OBJ=document.getElementsByClassName("类名");

3 操作标签的属性
获取：var attVa=DOM_OBJ.属性名;//attruibute
设置：DOM_OBJ.属性名=attVa;
4 操作CSS属性
获取：var cssVa=DOM_OBJ.style.css属性名;//只能获取内联式(嵌入式)的css属性值
设置：DOM_OBJ.style.css属性名=cssVa;//设置的是内联式(嵌入式)的css属性值
background-color===>backgroundColor
list-style===>listStyle
5 操作内容
获取
非表单元素：var txt=DOM_OBJ.innerHTML;
表单元素：var txt=DOM_OBJ.value;
设置
非表单元素：DOM_OBJ.innerHTML=txt;//会将原有的内容替换掉
表单元素：DOM_OBJ.value=txt;
区分document.write()和innerHTML
前者是方法后者是属性
前者只能用document这个对象，后者可以是任意的非表单元素DOM对象
前者不会覆盖原有的东西，后者会覆盖原来的内容
***************计时器***************
是属于BOM里面的方法
BOM:brower object model---提供了可以操作浏览器的方法和属性
能够直接访问和修改的方法和属性是跟window相关

计时器：
window.setInterval();
语法：
setInterval(函数名,毫秒数);每隔多少毫秒去调用这个函数
setInterval("函数名()",毫秒数);每隔多少毫秒去调用这个函数
setInterval(function(){
代码块;
},毫秒数);每隔多少毫秒去调用这个函数
setInterval("console.log(1111)",毫秒数);每隔多少毫秒去执行js代码
清除计时器：
var timer=setInterval();//定义了一个计时器
clearInterval(timer);// 清除的是哪个计时器

延时器：
window.setTimeout();
语法：
setTimeout(函数名,毫秒数);过了多少毫秒后去执行一次这个函数
setTimeout("函数名()",毫秒数);过了多少毫秒后去执行一次这个函数
setTimeout(function(){
代码块;
},毫秒数);过了多少毫秒后去执行一次这个函数
setTimeout("console.log(1111)",毫秒数);延迟多少毫秒去执行一次js代码
清除延时器：
var timer=setTimeout();//定义了一个延时器
clearTimeout(timer);// 清除的是哪个延时器

***************事件***************
事件：是用来实现JS与HTML之间的交互的。
1 可以作用于任何对象
2 通过函数来进行事件处理的。相关的函数是在事件发生时才执行
3 事件分类：鼠标事件 键盘事件 表单事件 window事件
---事件分类
1 鼠标事件
click 单击
dbclick 双击
mouseover 悬停
mouseout 离开
mousedown 按下
mouseup 抬起
mousemove 移动