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

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

原文地址:https://www.cnblogs.com/pythonywy/p/11369847.html

时间: 2024-10-23 21:04:03

原生js获得八种方式,事件操作的相关文章

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

Delphi过程函数传递参数的八种方式 Delphi过程.函数传递参数的八种方式,布布扣,bubuko.com

科技使人“变傻”八种方式:没导航就会迷路

参考消息网 7 月 28 日报道美国<赫芬顿邮报>网站 7 月 25 日发表文章称,人人都认为苹果手机和笔记本电脑是科技发展所带来的福利.从某些方面看,的确如此.比如说,适当地使用谷歌搜索,对你的大脑确实有益. 然而,科技进步也会带来意想不到的结果.神经科学家迈克尔·默策尼希说,我们的大脑正因科技发展而进行"大规模重置".他警告,科技对人类智能产生的影响可能会是"致命的". 科技究竟是如何扰乱人类大脑的呢? 1. 科技毁了睡眠 研究显示,智能手机.平板电

java单例设计模式八种方式

单例设计模式介绍 所谓类的单例设计模式,就是采取一定的方法保证在整个的软件系统中,对某个类只能存在一个对象实例,并且该类只提供一个取得其对象实例的方法(静态方法). 比如Hibernate的SessionFactory,它充当数据存储源的代理,并负责创建Session对象.SessionFactory并不是轻量级的,一般情况下,一个项目通常只需要一个SessionFactory就够,这是就会使用到单例模式. 单例设计模式八种方式 单例模式有八种方式: 饿汉式( ( 静态常 量) ) 饿汉式(静态

不使用spring的情况下原生java代码两种方式操作mongodb数据库

由于更改了mongodb3.0数据库的密码,导致这几天storm组对数据进行处理的时候,一直在报mongodb数据库连接不上的异常.   主要原因实际上是和mongodb本身无关的,因为他们改的是配置文件的密码,而实际上这个密码在代码中根本就没有使用,他们在代码中已经把用户验证信息写死.   在协助他们解决这个问题的时候,我看到他们代码中在和mongodb数据库交互时使用了已经不被建议使用的方法,于是便抽时间尝试了一下另一种被建议的方式实现各功能.   当然了,生产环境中用的是mongodb集群

js中 关于DOM的事件操作

一.JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象模型,操作网页上的元素的API.比如让盒子移动.变色.轮播图等. BOM:浏览器对象模型,操作浏览器部分功能的API.比如让浏览器自动滚动. 二.事件 JS是以事件驱动为核心的一门语言. 事件的三要素 事件的三要素:事件源.事件.事件驱动程序. 比如,我用手去按开关,灯亮了.这件事情里,事件源是:手

css1—八种方式实现元素垂直居中

这里介绍实现元素垂直居中的方式,文章是参考了<css制作水平垂直居中对齐>这一篇文章. 1.行高和高度实现 这种方式实现单行垂直居中是很简单的,但是要保证元素内容是单行的,并且其高度是不变的,只要将“line-height”和“height”设置成一样的就可以了.这种方式局限性在于只有单行文本的元素才适用,多行元素是不适用的. html代码: <div class="vertical"> <span>aaa</span>content &

Java接入Spark之创建RDD的两种方式和操作RDD

首先看看思维导图,我的spark是1.6.1版本,jdk是1.7版本 spark是什么? Spark是基于内存计算的大数据并行计算框架.Spark基于内存计算,提高了在大数据环境下数据处理的实时性,同时保证了高容错性和高可伸缩性,允许用户将Spark 部署在大量廉价硬件之上,形成集群. 下载和安装 可以看我之前发表的博客 Spark安装 安装成功后运行示例程序 在spark安装目录下examples/src/main目录中. 运行的一个Java或Scala示例程序,使用bin/run-examp

八种方式实现跨域请求

浏览器的同源策略 ? 提到跨域不能不先说一下"同源策略". ? 何为同源?只有当协议.端口.和域名都相同的页面,则两个页面具有相同的源.只要网站的 协议名protocol. 主机host. 端口号port 这三个中的任意一个不同,网站间的数据请求与传输便构成了跨域调用,会受到同源策略的限制. ? 同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互.这是一个用于隔离潜在恶意文件的关键的安全机制.浏览器的同源策略,出于防范跨站脚本的攻击,禁止客户端脚本(如 JavaScr

MySQL数据库优化的八种方式(经典必看)

引言: 关于数据库优化,网上有不少资料和方法,但是不少质量参差不齐,有些总结的不够到位,内容冗杂 偶尔发现了这篇文章,总结得很经典,文章流量也很大,所以拿到自己的总结文集中,积累优质文章,提升个人能力,希望对大家今后开发中也有帮助 1.选取最适用的字段属性 MySQL可以很好的支持大数据量的存取,但是一般说来,数据库中的表越小,在它上面执行的查询也就会越快.因此,在创建表的时候,为了获得更好的性能,我们可以将表中字段的宽度设得尽可能小. 例如,在定义邮政编码这个字段时,如果将其设置为CHAR(2