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]);
- }