JavaScript深入介绍WebAPI的用法
作者:半夏而凉 发布时间:2024-04-19 10:05:26
标签:JavaScript,WebAPI
什么是WebAPI
WebAPI就是 DOM API + BOM API
DOM
W3C标准给我们提供了一系列的函数,让我们可以操作:网页内容、网页结构、网页样式、
一个网页的页面结构如:
<html>
<head>
<title> 标题 </title>
</head>
<body>
<a href=" ">链接</a>
<h1>我的标题</h1>
</body>
</html>
几个重要概念:
文档: 一个页面就是一个 文档, 使用 document 表示.
元素: 页面中所有的标签都称为 元素. 使用 element 表示.
节点: 网页中所有的内容都可以称为 节点(标签节点, 注释节点, 文本节点, 属性节点等)使用 node 表示.
获取元素
类似于CSS选择器的功能
querySelector
var elem = document . querySelector ( selectors );
querySelectorAll
<div class="box">abc</div>
<div id="id">def</div>
<script>
var elems = document.querySelectorAll('div');
console.log(elems);
</script>
事件
事件三要素
1. 事件源 : 哪个元素触发的
2. 事件类型 : 是点击 , 选中 , 还是修改 ?
3. 事件处理程序 : 进一步如何处理, 往往是一个回调函数 .
操作元素
获取/修改元素内容
innerText
使用示例:
<div>
<span>hello world</span>
<span>hello world</span>
</div>
<script>
var div = document.querySelector('div');
// 读取 div 内部内容
console.log(div.innerText);
// 修改 div 内部内容, 界面上就会同步修改
div.innerText = 'hello js <span>hello js</span>';
</script>
innerHTML
Element.innerHTML 属性设置或获取 HTML 语法表示的元素的后代 使用示例:
<div>
<span>hello world</span>
<span>hello world</span>
</div>
<script>
var div = document.querySelector('div');
// 读取页面内容
console.log(div.innerHTML);
// 修改页面内容
div.innerHTML = '<span>hello js</span>'
</script>
获取/修改元素属性
//修改属性
<img src="rose.jpg" alt="这是一朵花" title="玫瑰花">
<script>
var img = document.querySelector('img');
img.onclick = function () {
if (img.src.lastIndexOf('rose.jpg') !== -1) {
img.src = './rose2.png';
} else {
img.src = './rose.jpg';
}
}
</script>
//获取属性
<img src="rose.jpg" alt="这是一朵花" title="玫瑰花">
<script>
var img = document.querySelector('img');
// console.dir(img);
console.log(img.src);
console.log(img.title);
console.log(img.alt);
</script>
获取修改表单元素属性
表单 ( 主要是指 input 标签 ) 的以下属性都可以通过 DOM 来修改
value: input 的值.
disabled: 禁用
checked: 复选框会使用
selected: 下拉框会使用
type: input 的类型(文本, 密码, 按钮, 文件等)
代码示例:
<input type="button" value="播放">
<script>
var btn = document.querySelector('input');
btn.onclick = function () {
if (btn.value === '播放') {
btn.value = '暂停';
} else {
btn.value = '播放';
}
}
</script>
来源:https://blog.csdn.net/m0_61801103/article/details/125243125
0
投稿
猜你喜欢
- Python实现OCR识别:pytesseractPython常用pytesseract进行图片上的文字识别,即OCR识别,完整的代码比较简
- 背景在吉日嘎拉的软件编程走火入魔之:数据库事务处理入门(适合初学者阅读)文章中关于MS SQL Server和Oracle对数据库事务处理的
- 本文实例讲述了Python微信推送模板消息功能。分享给大家供大家参考,具体如下:官方文档:https://mp.weixin.qq.com/
- Django自带强大的User系统,为我们提供用户认证、权限、组等一系列功能,可以快速建立一个完整的后台功能。但User模型并不能满足我们的
- “Lightbox”是一个别致且易用的图片显示效果,它可以使图片直接呈现在当前页面之上而不用转到新的窗口。lightbox效果网络上有很多j
- 一,mnist数据集形如上图的数字手写体就是mnist数据集。二,GAN原理(生成对抗网络)GAN网络一共由两部分组成:一个是伪造器(Gen
- 最近在工作中面向社群玩家组织了一场活动,需要进行随机抽奖,参考之前小明大佬的案例,再结合自己的需求,做了一个简单的随机抽奖小工具。今天我就来
- 1.游标方式 代码如下:DECLARE @Data NVARCHAR(max) SET @Data='1,tanw,2,
- 本文实例讲述了Python编程中event对象的用法。分享给大家供大家参考,具体如下:Python提供了Event对象用于线程间通信,它是由
- rs.open sql,conn,A,B A: ADOPenforwardonly (=0) 只读,且当前数据记录只能向下移动。 ADOPe
- 画之前肯定要知道规格图,我找了一个大致的图。参考图片:绘制大星的方法很简单,五角星的补角是144度。绘制小五角星有点麻烦,因为我国国旗上的小
- 本人在CentOS6.4上安装万mysql后,无法通过root进入,因为安装的时候,并没有设置root密码,似乎有个初始随机密码,但是不记得
- numpy.mean计算矩阵均值计算矩阵的均值>>> a = np.array([[1, 2], [3, 4]])>
- 什么是设计模式设计模式是针对软件开发中出现的常见问题的可重用解决方案。它们并不特定于任何编程语言或框架,而是描述了可应用于各种情况的一般原则
- 这次哀悼,网页设计方面除了应用CSS灰度配色和滤镜,还用到正计时代码,就象汶川大地震已过去了多少天。下面这段代码,是从网易页面提取出来的,具
- 目录一. 加载数据1. 继承Dataset类并重写关键方法2. 使用Dataloader加载数据二. 模型设计三. 训练四. 测试结语pyt
- Python 中的 main 函数充当程序的执行点,在 Python 编程中定义 main 函数是启
- 对数学家来说,Python这门语言有着很多吸引他们的地方。举几个例子:对于tuple、lists以及sets等容器的支持,使用与传统数学类似
- 一、迭代器(Iterator)1.1 可迭代对象(Iterable)可迭代对象,可以简单理解为可遍历对象,即能够使用 for 循环遍历的对象
- 经常用FLASH嵌入到网页里面,那咋能躲过W3C那个家伙呢?看下面!<object type="applicati