专栏首页python-爬虫原生js获得八种方式,事件操作

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Flask-wtforms类似django中的form组件

    小小咸鱼YwY
  • Charles抓包工具的破解以及使用

    下载Charles.jar ,然后按照后在Charles→lib中替换掉Charles.jar

    小小咸鱼YwY
  • 关于hover与after,before已及first-letter,first-line的联用

    元素:hover::after{样式}与元素:after{content:'插入的内容'}联用

    小小咸鱼YwY
  • Fedora 13桌面管理的新发现

    如果有很多程序同时开着,你如果快速找到所需要的窗口呢?怎么就能都快速预览,然后找到所要的窗口呢?

    williamwong
  • [源码分析] 从实例和源码入手看 Flink 之广播 Broadcast

    对黑名单中的IP进行检测过滤。IP黑名单的内容会随时增减,因此是可以随时动态配置的。

    罗西的思考
  • jpype._jvmfinder.JVMNotFoundException: No JVM shared library file

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    周小董
  • 在浏览器扩展程序中进行: 跨域 XMLHttpRequest 请求

    跨域 XMLHttpRequest 请求 https://crxdoc-zh.appspot.com/extensions/xhr

    一个会写诗的程序员
  • Python的故事_two

    * 实现过程: tule = [3,4,2,0,7,5] max(tule) max = numbers[0] for each in number...

    py3study
  • 怎样实习才能成长最快

    作者 / 姬光 曾就职于淘宝/腾讯/京东,现任美的集团电子商务有限公司商城前端组负责人,译有《精彩绝伦的CSS》,业余时间维护微信公众号【姬小光】。

    姬小光
  • 作业 -- 几道简单的Python题

    1、编写程序,要求生成10240个随机[0,512)之间的整数,并统计每个元素出现的次数。

    py3study

扫码关注云+社区

领取腾讯云代金券