admin 发表于 2021-3-30 13:17:13

原生js获得八种方式,事件操作

关于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);
}

页: [1]
查看完整版本: 原生js获得八种方式,事件操作