Web API (一)介绍
一、Web API介绍
1.API介绍
(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,只需直接调用使用即可。
2、Web API的概念
Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。
MDN 详细 API : https://developer.mozilla.org/zh-CN/docs/Web/API
3、API 和 Web API 总结
- API 是为我们程序员提供的一个接口,帮助我们实现某种功能,我们会使用就可以了,不必纠结内部如何实现
- Web API 主要是针对于浏览器提供的接口,主要针对于浏览器做交互效果。
- Web API 一般都有输入和输出(函数的传参和返回值),Web API 很多都是方法(函数)
- 学习 Web API 可以结合前面学习内置对象方法的思路学习
4、JS组成
- ECMAscript 指定的标准语法
- DOM(文档对象模型) 网页
- BOM(浏览器对象模型) 浏览器
二、DOM数
1、定义
文档对象模型(Document Object Model,简称DOM),是 W3C 组织推荐的处理可扩展标记语言(html或者xhtml)的标准编程接口。
2、组成
DOM树 又称为文档树模型,把文档映射成树形结构,通过节点对象对其处理,处理的结果可以加入到当前的页面。
- 文档:一个页面就是一个文档,DOM中使用document表示
- 节点:网页中的所有内容,在文档树中都是节点(标签、属性、文本、注释等),使用node表示
- 标签节点:网页中的所有标签,通常称为元素节点,又简称为“元素”,使用element表示
DOM把以上内容都看做是对象
三、获取元素
1、根据元素的id名称
getElementById('id名称')不需要加#号
2、 根据元素的标签名
getElementsByTagName('标签名')
3、根据元素的类名
getElementsByClassName('类名') //不需要加.
4、★根据 css 选择器字符串来获取符合条件的第一个元素
querySelector('css选择器')// # . ul>li ul li
返回的是单个元素
- 伪类选择器 :checked :disabled
querySelector(':checked')//checked,disabled,selected
5、 根据 css 选择器字符串来获取符合条件的所有元素
querySelectorAll('css选择器') //# . ul>li ul li
返回的结果是元素对象集合,伪数组
注意: api名称中带有 elements, children, all 返回的都是伪数组
6、获取特殊元素(body,html)
documents.body//返回body元素对象
documents.documentElement//返回html元素对象
7、所有操作元素的方法都必须是单个元素对象
四、事件基础
1、事件概述
触发— 响应机制。
2、事件三要素
- 事件源(谁):触发事件的元素
- 事件类型(什么事件): 例如 click 点击事件
- onclick
- onfoucs
- onblur
- 事件处理程序(做啥):事件触发后要执行的代码(函数形式),事件处理函数
事件源.事件类型 = 事件处理函数
3、执行事件的步骤
- 获取事件源
- 绑定事件
- 添加事件处理程序(采取函数值形式)
注意: 事件不触发, 事件处理函数不执行
事件处理函数中的this:指向事件源,事件的绑定者
4、常见的鼠标事件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QT3LYUr0-1616663112375)(E:\黑马培训\前端基础\案例练习\就业班\笔记\Web API\Web API第一天\images\1550734506084.png)]
五、操作元素
1、改变元素内容(获取或设置)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kkIQ9mqQ-1616663112378)(E:\黑马培训\前端基础\案例练习\就业班\笔记\Web API\Web API第一天\images\1550735016756.png)]
区别:
- innerHTML 保留空格和换行, 并支持 html 字符串标签;
- 反之, innerText 只能修改纯文字; 他们都是可读写属性
2、常见元素的属性操作
src、href、tilte、alt
表单元素的属性:
value、type
都只能设置为布尔值(true false):checked、disabled、selected
六、操作元素样式
1、修改元素的内联样式
元素对象.style.样式属性 = 值;
属性名必须要遵守驼峰命名 :font-size ==> fontSize
值一定是字符串, 带上单位’300px’
2、 修改元素的类名
ele.className = 值
多类名的情况,要加空格
<style>
.box {
width: 100px;
height: 100px;
background-color: #ccc;
border: 1px solid;
}
.big {
height: 200px;
width: 200px;
background-color: pink;
}
</style>
</head>
<body>
<pre>
操作元素样式的两种方法:
1. element.style.属性名: 修改元素的样式属性 (内联样式)
2. element.className: 修改类名的方式
</pre>
<hr>
<div class="box">点击盒子</div>
<script>
var box = document.querySelector('.box');
box.onclick = function() {
// console.log(1);
this.className = 'box big'; //修改类名
}
console.log(box.className);
</script>
</body>