原生js获得八种方式,事件操作
程序员文章站
2022-10-04 11:26:11
08.17自我总结 关于js 一.原生js获得八种方式 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名(getElementsByClassName) 通过选择器获取一个元素(qu ......
08.17自我总结
关于js
一.原生js获得八种方式
- 通过id获取(getelementbyid)
- 通过name属性(getelementsbyname)
- 通过标签名(getelementsbytagname)
- 通过类名(getelementsbyclassname)
- 通过选择器获取一个元素(queryselector)
- 通过选择器获取一组元素(queryselectorall)
- 获取html的方法(document.documentelement)
- document.documentelement是专门获取html这个标签的
- 获取body的方法(document.body)
- document.body是专门获取body这个标签的
二.事件句柄
属性 | 当以下情况发生时,出现此事件 |
---|---|
onabort | 图像加载被中断 |
onblur | 元素失去焦点 |
onchange | 用户改变域的内容 |
onclick | 鼠标点击某个对象 |
ondblclick | 鼠标双击某个对象 |
onerror | 当加载文档或图像时发生某个错误 |
onfocus | 元素获得焦点 |
onkeydown | 某个键盘的键被按下 |
onkeypress | 某个键盘的键被按下或按住 |
onkeyup | 某个键盘的键被松开 |
onload | 某个页面或图像被完成加载 |
onmousedown | 某个鼠标按键被按下 |
onmousemove | 鼠标被移动 |
onmouseout | 鼠标从某元素移开 |
onmouseover | 鼠标被移到某元素之上 |
onmouseup | 某个鼠标按键被松开 |
onreset | 重置按钮被点击 |
onresize | 窗口或框架被调整尺寸 |
onselect | 文本被选定 |
onsubmit | 提交按钮被点击 |
onunload | 用户退出页面 |
三.使用方法
1.获取单个元素
2.单个元素发送的事件
3.发生的内容相关替换
let inp = document.queryselector('input'); inp.onkeydown = function () { console.log('按下') };
四.提取元素里面的内容
- innerhtml:获取文本包括标签
innertext:获取文本不包括标签
val:获取表单里面的值
五.补充知识点
获取操作父标签修改子标签
比如说我们点击a类修改下面的b类
let xx = document.queryselector('.a'); xx.onclick = function () { this.queryselector('.b').innerhtml='点击a了; };
queryselectorall获取一组元素后我们怎么把其中的内容取出来
let xx = document.queryselectorall('.a'); for (let i = 0; i < xx.length; i++){ console.log(xx[i]); }
推荐阅读
-
原生js获得八种方式,事件操作
-
原生JS实现Ajax通过GET方式与PHP进行交互操作示例
-
原生js操作input文本框注册获取焦点、失去焦点事件,设置文本框默认值
-
【JavaScript】原生js关于函数以及操作属性的两种方式
-
原生JS实现Ajax通过GET方式与PHP进行交互操作
-
原生js获得八种方式,事件操作
-
原生JS实现Ajax通过GET方式与PHP进行交互操作
-
原生JS操作网页给p元素添加onclick事件及表格隔行变色_javascript技巧
-
原生JS操作网页给p元素添加onclick事件及表格隔行变色_javascript技巧
-
【JavaScript】原生js关于函数以及操作属性的两种方式