元素获取
- document.querySelector
获取满足条件的第一个元素获取到的元素是dom元素,可以直接调用dom的api如果没有获取到,返回null- document.querySelectorAll获取满足条件的所有元素,返回一个伪数组伪数组中成员都是dom元素伪数组不能直接操作,必须遍历获取到里面的dom元素来进行操作
定时器
- 作用:每隔一段时间重复做一个事情
- 语法:setInterval(处理函数,时间间隔)
- setInterval会返回一个句柄(标识id)
- clearInterval可以清除定时器,传递的参数是句柄
事件:
- 用户操作所触发的行为
- 为用户操作添加一个事件监听,当用户真正进行某个操作的时候,就会触发某个行为
- 语法:dom.addEventListener(事件类型,处理函数)
常见事件类型
- click:单击事件
- mouseenter:鼠标进入,当鼠标进入到该元素的范围就会自动触发
- mouseleave:鼠标离开,鼠标离开该元素的范围就会自动触发
- input:文本输入框内容变化所触发的事件,只要内容变化就会触发
- fcous:文本框聚焦事件,文本框获取焦点,焦点就是光标点
- change:文本框失焦事件,前提是内容改变了
- blur:文本框的失焦事件,只要失焦就会触发,不关注内容是否变化
- keydown:键按下时自动触发
- keyup:键松开时自动触发
- change:对于表单元素file而言,它 是用户选择好文件之后触发
排他思想
-
- 所有元素全部清除样式(干掉其他人)
-
- 给当前元素设置样式(留下我自己)