WebAPI个人学习心得

最新推荐文章于 2023-04-02 09:22:48 发布

肉乎乎的鸭

最新推荐文章于 2023-04-02 09:22:48 发布

阅读量340

点赞数

分类专栏：新手文章标签： js

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

本文链接：https://blog.csdn.net/zcylxzyh/article/details/113524351

版权

本文是作者关于JavaScript WebAPI的学习心得，涵盖了API简介、DOM操作、事件处理、BOM对象等多个方面，通过实例展示了如何获取页面元素、动态创建元素、处理事件及进行页面交互等技巧。

摘要由CSDN通过智能技术生成

JS快速入门个人学习心得

WebAPI个人学习心得

1、API简介

在这里插入图片描述

2、DOM

在这里插入图片描述

3、获取页面元素

3.1 根据id获取元素

在这里插入图片描述
通过document来获取

-proto-:
是这个对象真实类型

3.2 获取对应标签的元素

在这里插入图片描述
获取id为container下的所有div标签：

3.3 其他方式

在这里插入图片描述

4、属性操作和注册事件

事件源

在这里插入图片描述

一般来说，页面标签的属性在对象中是都存在的。

非表单元素属性

在这里插入图片描述

注册事件：当点击或者是其他操作时去做什么事（监听事件产生去执行一个事）。

this

在这里插入图片描述
取消a标签跳转
获取到a标签元素后在点击事件中return false就可以

案例一：点击小图片显示大图片且不跳转

在这里插入图片描述

innerHTML和innerText
获取开始标签和结束标签之间的内容

控制台打印出对象

textContent和innerText相同，都是获取文本内容。但是兼容性不同。

获取内容时，根据是否想获取带标签的元素来决定使用哪个
设置的时候：
在这里插入图片描述

表单元素属性

在这里插入图片描述

有三个：

在这里插入图片描述
获取到所有input标签后它是一个数组，可以通过数组形式访问里面每个元素。

案例二：检测用户名和密码不满足就高亮显示

注意： class属性对应的DMO对象是className
在这里插入图片描述

这段写在JS里：
在这里插入图片描述

案例三：设置下拉框的随机选中

在这里插入图片描述

案例四：全选反选

在这里插入图片描述

先把定义出来

由于频繁调用所以封装成函数

最低0.47元/天解锁文章

肉乎乎的鸭

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
WebAPI个人学习心得

个人学习JS这里写目录标题1、API简介2、DOM3、获取页面元素3.1 根据id获取元素3.2 获取对应标签的元素3.3 其他方式4、事件及应用1、API简介2、DOM3、获取页面元素3.1 根据id获取元素通过document来获取是这个对象真实类型3.2 获取对应标签的元素获取id为container下的所有div标签：3.3 其他方式4、事件及应用...
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。