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获得八种方式,事件操作的更多相关文章

  1. JavaScript 基础——使用js的三种方式,js中的变量,js中的输出语句,js中的运算符;js中的分支结构

    JavaScript 1.是什么:基于浏览器 基于(面向)对象 事件驱动 脚本语言 2.作用:表单验证,减轻服务器压力 添加野面动画效果 动态更改页面内容 Ajax网络请求 () 3.组成部分:ECM ...

  2. 原生JavaScript支持6种方式获取元素

    一.原生JavaScript支持6种方式获取元素 document.getElementById('id'); document.getElementsByName('name'); document ...

  3. selenium(1)-详细解读元素定位的八种方式

    安装selenium和下载webdriver 安装selenium pip install selenium pip install selenium  -U  (判断是否有最新版本) 下载drive ...

  4. uni-app&H5&Android混合开发三 || uni-app调用Android原生方法的三种方式

    前言: 关于H5的调用Android原生方法的方式有很多,在该片文章中我主要简单介绍三种与Android原生方法交互的方式. 一.H5+方法调用android原生方法 H5+ Android开发规范官 ...

  5. flask 操作mysql的两种方式-sqlalchemy操作

    flask 操作mysql的两种方式-sqlalchemy操作 二.ORM sqlalchemy操作 #coding=utf-8 # model.py from app import db class ...

  6. flask 操作mysql的两种方式-sql操作

    flask 操作mysql的两种方式-sql操作 一.用常规的sql语句操作 # coding=utf-8 # model.py import MySQLdb def get_conn(): conn ...

  7. 【delphi】Delphi过程、函数传递参数的八种方式

    Delphi过程函数传递参数的八种方式

  8. JS中有两种自加法操作

    JS中有两种自加法操作.它们的运算符是++,它们的函数是向1添加运算符. 我和我的区别在于操作的顺序和组合的方向. 其中:++var被称为预自动添加,变量执行自动添加操作后.它的操作是先执行自动加法操 ...

  9. HTML中使用js的三种方式及优缺点介绍

    1.内部js: 在直接在页面的<script></script>标签内写js代码 优点:相对于使用行内js,内部js代码较为集中,与页面结构的实现代码耦合度较低,比较便于维护 ...

随机推荐

  1. 解压小游戏之打砖块(C#+unity)

    z这个小游戏很简洁,很简单,非常适合一个人玩,特别减压

  2. 详解EMC测试国家标准GB/T 17626

    电波暗室,用于模拟开阔场,同时用于辐射无线电骚扰(EMI)和辐射敏感度(EMS)测量的密闭屏蔽室. 来源:http://gememc.com/upload/201712/201712010930227 ...

  3. 守护线程,需要通过调用线程方法:setDaemon(boolean on)来进行设置

    package seday08.thread;/*** @author xingsir * 守护线程又称为后台线程,默认创建出来的线程都是普通线程, 守护线程需要通过调用线程方法:setDaemon( ...

  4. Android 进度对话框 ProgressDialog

    protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentV ...

  5. kvm磁盘管理

    kvm磁盘管理 kvm虚拟机虚拟磁盘格式转换 各种格式说明介绍 row:裸格式,占用空间较大,不支持快照功能,性能较好,不方便传输(顺序读写) 50G 2G 传输50G qcow2:cow 占用空间小 ...

  6. latex 对中文字体设置的一些解决

    latex 对中文字体设置的一些解决 直接使用Xelatex编译带中文的文件时,会出现无法识别的错误,这是因为latex默认的环境不支持中文,这时可以使用CTex 宏集.ctex 宏包或xeCJK 宏 ...

  7. 面试连环炮系列(五):你们的项目为什么要用RabbitMQ

    你们的项目为什么要用RabbitMQ? 消息队列的作用是系统解耦.同步改异步.请求消峰,举个下订单的例子: 前端获取用户订单信息,请求后端的订单创建接口.这个接口并不直接请求订单服务,而是首先生成唯一 ...

  8. C# Thread 线程

    Thread  创建和控制线程,设置其优先级并获取其状态 Thread构造函数接收一个无参数或带一个object类型参数的委托 { Console.WriteLine("), DateTim ...

  9. 从零开始ant-design-vue-pro开发笔记(一)

    开始 从这里开始是用ant-design-vue组件写ant-design-vue-pro这个后台项目实现步骤的从零开始搭建的过程,视频地址,它采用了ant-desgin-vue的组件库作为素材开发, ...

  10. SpringBoot系列-整合Mybatis(注解方式)

    目录 一.常用注解说明 二.实战 三.测试 四.注意事项 上一篇文章<SpringBoot系列-整合Mybatis(XML配置方式)>介绍了XML配置方式整合的过程,本文介绍下Spring ...