web api基础

元素获取

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而言，它 是用户选择好文件之后触发

排他思想

先清除其它兄弟元素的样式

子主题 2