DOM操作
- DOM,Document Object Model,文档对象模型
- 将HTML中的元素当做JS中的对象进行操作,称为DOM操作
- window对象表示浏览器中打开的窗口,document对象整个文档
- DOM操作核心:找到对象、添加事件、修改样式、……
- 在JS中样式的名字采用的是小驼峰的命名规则,如:backgroundColor
- console.log可以将数据输出到控制台,不会影响页面内容
查找元素
- getElementById:根据ID,获取的是一个元素
- getElementsByClassName:根据class属性查找元素,返回的是数组
- getElementsByTagName:根据标签名查找元素,返回的是数组
- getElementsByName:根据name属性查找元素,返回的是数组
JS事件
- onclick:单击
- ondbclick:双击
- onfocus:获取焦点
- onblur:失去焦点
- onmouseover:鼠标移入
- onmouseout:鼠标移出
定时器
- 说明:所谓定时器就是在指定的时间做指定的事情
- 分类:
- 一次性定时器:设置一个时间,时间一到,做指定的事情,之后就销毁了。
- 设置:var timer = setTimeout(函数,时间),时间单位是毫秒
- 清除定时器:clearTimeout(timer)
- 周期性定时器:设置一个时间间隔,时间一到,做指定的事情,然后重新计时
- 设置:var timer = setInterval(函数,时间),时间单位是毫秒
- 清除:clearInterval(timer)
- 一次性定时器:设置一个时间,时间一到,做指定的事情,之后就销毁了。
获取样式
-
兼容获取方式
var oDiv=document.getElementsByTagName('div')[0] //这种方式只能获取行内样式 //alert(oDiv.style.width) //低级浏览器 //alert(oDiv.currentStyle['width']) //高级浏览器