DOM核心
我们获取过来的DOM元素是一个对象(object),所以称为文档对象模型
主要有增,删,改,查,属性操作和事件操作
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/060486d83568199ad21d8ee4397304b3.png)
捞一波属性操作
- setAttribute:设置dom的属性值
- getAttribute:得到dom的属性值
- removeAttribute 移出属性
①事件操作,捞一波鼠标操作
事件类型 | 相关函数 |
---|
点击事件 | onclick |
移入/移出 | onmouseover/onmouseout |
移入/移出 | onmouseenter/onmouseleave |
双击事件 | ondbclick |
鼠标按下事件 | onmousedown |
鼠标弹起事件 | onmousedown |
鼠标移动事件 | onmousemove |
鼠标抬起事件 | onmouseup |
②表单操作
事件类型 | 相关函数 |
---|
元素失去焦点 | onblur |
元素获得焦点 | onfocus |
用户改变表单的内容 | onchange |
用户点击重置按钮 | onreset |
提交按钮被点击 | onsubmit |
④系统事件
事件类型 | 相关函数 |
---|
onload | 某个页面或图像被完成加载,整个html页面,只允许有一次onload的过程 |
onresize | 窗口或框架被调整尺寸的时候 |
onselect | 文本被选中的时候的事件 |
onerror | 当加载文档或图像时发生某个错误,这个就是文档加载路径出现了问题的时候 |
③键盘事件
事件类型 | 相关函数 |
---|
onkeydown | 某个键盘的键被按下 |
onkeypress | 某个键盘的键被按下或者按住,但是它不能识别功能键,如ctrl和shift |
onkeyup | 某个键盘的键被松开 |
- 三个事件的执行顺序down–press–keyup
- 如果使用addElementListener不需要加on
- keyup和dowm事件不区分字母大小写,press可
- 得到某个键的AC码
document.addEventListener(‘keyup’,function(){
console,log(e,keyCode);
})