Python全栈（九）Web前端基础之5.JS获取节点和常见事件

最新推荐文章于 2022-01-10 17:07:55 发布

原创最新推荐文章于 2022-01-10 17:07:55 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#Python全栈 #Web前端基础 #JS获取节点和常见事件

Python全栈专栏收录该内容

130 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了JavaScript中获取元素节点的四种方法，包括通过document节点和父节点获取，并展示了阻止浏览器默认行为和封装函数的实践。同时，详细讨论了JS的鼠标事件（如onClick、onMouseOver等）、表单事件及键盘事件，提供了相关示例代码，帮助理解事件处理和事件属性的应用。

文章目录

一、获取元素节点
- 1.通过顶层document节点获取
- 2.通过父节点获取
二、JS鼠标事件
三、JS表单事件
四、JS键盘事件
五、阻止浏览器默认行为和封装函数
- 1.阻止浏览器默认行为
- 2.封装函数

一、获取元素节点

1.通过顶层document节点获取

上一节已经提到了两种JS获取节点的方法document.getElementById()和document.getElementsByTagName()，其实是通过顶层document节点获取元素节点的方法共有4种：

获取依据	方法
id属性	`document.getElementById()`
tagName标签名	`document.getElementsByTagName()`
name属性	`document.getElementsByName()`
class属性	`document.getElementsByClassName()`

getElementsByClassName()练习如下：

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

东哥说AI

关注关注

9
点赞
踩
3

收藏

觉得还不错? 一键收藏
5
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

订阅专栏

Python全栈（九）Web前端基础之4.CSS盒模型和JS基础

CUFEECR的博客

08-17

1425

CSS对HTML元素生成了一个所占空间的矩形元素框，称为盒模型；border表示边框，包括边框宽度、边框风格、边框颜色等；padding是指元素内容到border之间的距离，有4种设置方式；margin是指盒子与盒子之间的距离；overflow定义了溢出元素内容区的内容会如何处理。JS分为3个发展阶段；包括3个组成部分。JS有2种引入方式；JS中有数据类型，用var定义变量，标识符也有一定的命名规则；BOM：浏览器可以通过3种方式向用户显示信息；DOM打通HTML和CSS与JS的壁垒，将节点分为3类。

python如何提取js脚本中内容_如何从节点js运行python脚本 - javascript

weixin_39957271的博客

11-26

227

我已经在Raspberry Pi上的node.js中编写了一个服务器。我想从中运行python脚本，但它不执行该行。在以前的实例中，我已经运行了文件，但是来到这个socket.io实例时，我无法运行该文件！尽管控制台显示了从客户端传递给它的准确输出，但是它无法读取文件。插座负责移动。/*jshint esversion: 6 */var express = require('express');/...

5 条评论您还未登录，请先登录后发表或查看评论

5 条评论

云-生 2020.09.15
nice

Shanfenglan7 2020.09.01
[face]monkey:5.gif[/face]

双子孤狼 2020.08.21
支持

陆海潘江小C 2020.08.20
大佬厉害👍

王老狮 2020.08.20
不错哦

JavaScript获取节点和常用事件

weixin_44015485的博客

02-14

157

Python实训day05pm【JS-DOM-获取元素节点对象、网络爬虫】

upward

01-10

1144

Python实训先五伦，后八德。人伦大道以此分。君臣义，父子亲。君正臣忠护国心。为人子，孝双亲。父慈子奉父子亲。夫妇情，尽责任。妻贤夫爱情谊深。兄弟序，长幼分。兄宽弟忍哥们亲。朋友信，友情真。不论贫富视同仁。孝为首，万善源。百善孝顺第一先。生命体，父母赐。不孝敬老畜不如。万宝失，可再得。万金难买父母身。讲明理，兄弟情。同气连枝一母生。忠字义，为诚心。天地人伦无假心.

Python学习 Day33 获取节点其他方法

ShengXIABai的博客

04-02

717

获取节点其他方法

独家 | 手把手教你用Python进行Web抓取（附代码）

数据派THU

11-21

3105

作者：Kerry Parker 翻译：田晓宁校对：丁楠雅本文约2900字，建议阅读10分钟。本教程以在Fast Track上收集百强公司的数据为例，教你抓取网页信息。作为...

基于Node.js的节点商店项目源码

从标题“节点商店”可以看出，这是一个以“节点”（即Node.js）为技术基础构建的电子商务类应用场景，而“商店”则明确了其业务方向——模拟或实现商品展示、购物车管理、用户登录、订单处理等常见电商功能。...

最新python全栈3期高级开发工程师独家完整版

wyh479878158的博客

11-28

599

课程目录： │ ├─1-10 │ │ │ ├─day01 │ │ 01 python全栈s3 day1 计算机发展史.mp4 │ │ 02 python全栈s3 day1 计算机系统.mp4 │ │ 03 python全栈s3 day1 小结.mp4 │ │ 04 python全栈s3 day1 数据的概念.mp4 │ │ 0...

collective.js.extjs-1.4.0：Python集成ExtJS的JavaScript库

“collective.js.extjs-1.4.0.tar.gz”是一个专为Python环境设计的第三方库资源包，其核心目标是在基于Python的Web开发框架中集成ExtJS这一功能强大的JavaScript前端框架。该资源属于典型的Python库分类，适用于使用...

document.getElementsByName()的用法

weixin_33875564的博客

11-09

579

2019独角兽企业重金招聘Python工程师标准>>> ...

document.getElementsByName("name")获取元素的value值失败

weixin_30361753的博客

10-31

2653

document.getElementsByName("name").value;像这样是获取不到值的，弹出的消息是 underfined：原因getElementById是element单数，getElementsByName是elements复数。正确方法：var x=document.getElementsByName("name")[0].value;或者：var x=docume...

python读取网站_Python读取网页并获取某节点

weixin_39773158的博客

02-04

639

环境：python3.5.1Beautiful SoupBeautiful Soup是python的一个库，主要用于从网页抓取数据。Beautiful Soup自动将输入文档转换为Unicode编码，输出文档转换为utf-8编码。你不需要考虑编码方式，除非文档没有指定一个编码方式，这时，Beautiful Soup就不能自动识别编码方式了。然后，你仅仅需要说明一下原始编码方式就可以了。Beauti...

Python学习——JS基本语法（二）——DOM操作

SixGod6860

12-26

490

DOM操作 DOM，Document Object Model，文档对象模型将HTML中的元素当做JS中的对象进行操作，称为DOM操作 window对象表示浏览器中打开的窗口，document对象整个文档 DOM操作核心：找到对象、添加事件、修改样式、…… 在JS中样式的名字采用的是小驼峰的命名规则，如：backgroundColor console.log可以将数据输出到控制台，不...

CAXA3D实体设计2023安装教程(含安装包)

01-05

CAXA3D实体设计2023安装教程(含安装包)

go语言排序算法实现与性能分析工具包_排序算法集合冒泡排序选择排序插入排序希尔排序归并排序快速排序堆排序计数排序桶排序基数排序并行排序分布式排序外部排序.zip

01-05

软考系统架构设计师高级资格考试备考资料库与学习辅助工具集_包含历年真题解析知识点精讲视频模拟考试系统错题本功能学习进度跟踪考试大纲解读专家讲座笔记案例分析模板论文写.zip

01-05

基于ContextGuidedBlock的YOLO26下采样改进：上下文感知机制在目标检测中的应用与实现

最新发布

01-05

内容概要：本文介绍了一种将ContextGuidedBlock（CGB）集成到YOLO26中的创新方法，旨在提升目标检测模型在下采样过程中的上下文信息保留能力。CGB通过“局部特征提取+全局上下文融合”的设计，在实现特征图压缩的同时增强对小目标和复杂场景的感知能力，显著提升了检测精度，尤其在小目标检测上表现突出。文章详细阐述了CGB的原理、代码实现、在YOLO26中的集成步骤（包括模块替换、注册与配置）、训练验证流程，并提出了多尺度上下文优化、注意力机制融合及轻量化改进等科研拓展方向。; 使用场景及目标：① 提升YOLO26在小目标检测和复杂场景下的性能；② 构建具有上下文感知能力的新型下采样模块，服务于科研论文创新或工业级模型优化；③ 探索CGB与其他注意力机制、轻量化技术结合的可能性；阅读建议：建议读者结合提供的代码链接和飞书文档，边实践边理解模块集成细节，重点关注CGB的局部-全局交互机制及其对模型性能的影响，同时可通过调整超参数和结构变体进行深入探究。

负载均衡实战项目搭建指南：从零到一构建高可用Nginx+Keepalived集群教程

01-05

本资源包提供一套完整的负载均衡实战项目搭建指南，涵盖从理论到实践的全面内容。通过本教程，您将学习如何使用Nginx和Keepalived构建高可用负载均衡集群，确保Web应用的高并发处理能力和服务稳定性。内容包括环境准备、Nginx负载均衡配置、Keepalived高可用实现、健康检查机制、故障切换测试等核心环节，并附有详细的配置文件和代码示例。无论您是后端开发工程师、运维人员还是系统架构师，都能通过本实战项目掌握企业级负载均衡解决方案，提升系统性能和可靠性。教程语言简洁明了，步骤清晰，适合初学者和进阶者参考学习。