Web API
Web API介绍
API的概念
API（Application Programming Interface,==应用程序编程接口==）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。
- 任何开发语言都有自己的API
- API的特征输入和输出(I/O)
- var max = Math.max(1, 2, 3);
- API的使用方法(console.log('adf'))
Web API的概念
浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
此处的Web API特指浏览器提供的API(一组方法)，Web API在后面的课程中有其它含义
掌握常见浏览器提供的API的调用方式
==ECMAScript - JavaScript的核心==
定义了JavaScript 的语法规范
JavaScript的核心，描述了语言的基本语法和数据类型，==ECMAScript是一套标准，定义了一种语言的标准与具体实现无关==
BOM - 浏览器对象模型
一套==操作浏览器功能的API==
通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等
DOM - 文档对象模型
一套==操作页面元素的API==
DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作
DOM
DOM的概念
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本，更新其内容、结构和www文档的风格(目前，HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。
DOM又称为文档树模型
- ==文档：一个网页可以称为文档==
- ==节点：网页中的所有内容都是节点（标签、属性、文本、注释等）==
- ==元素：网页中的标签==
- ==属性：标签的属性==
DOM经常进行的操作
- ==获取元素==
- ==对元素进行操作(设置其属性或调用其方法)==
- ==动态创建元素==
- ==事件(什么时机做相应的操作)==
获取页面元素
为什么要获取页面元素
例如：我们想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，才进行后续操作
==根据id获取元素==
var div = document.getElementById('main');
console.log(div);
// 获取到的数据类型 HTMLDivElement，对象都是有类型的
注意：由于id名具有唯一性，部分浏览器支持直接使用id名访问元素，但不是标准方式，不推荐使用。
案例解析
Document
我是第一个div
keke
xioaming
honghong
你是个p
==根据标签名获取元素==
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
console.log(div);
}
案例解析
Document
我是第一个div
keke
xioaming
honghong
你是个p
you are span
案例
Document
1111
2222
你是个p1
you are span1
keke
xioaming
honghong
你是个p
you are span
==根据name获取元素*==
var inputs = document.getElementsByName('hobby');
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
console.log(input);
}
==根据类名获取元素*==
var mains = document.getElementsByClassName('main');
for (var i = 0; i < mains.length; i++) {
var main = mains[i];
console.log(main);
}
==根据选择器获取元素*==
var text = document.querySelector('#text');
console.log(text);
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
var box = boxes[i];
console.log(box);
}
- 总结
掌握
getElementById()
getElementsByTagName()
了解
getElementsByName()
getElementsByClassName()
querySelector()
querySelectorAll()
案例解析
Document
我是1
我是2
class1
class2
zzzzz
#事件
事件：触发-响应机制
事件三要素
- 事件源:触发(被)事件的元素
- 事件名称: click 点击事件
- 事件处理程序:事件触发后要执行的代码(函数形式)
事件的基本使用
var box = document.getElementById('box');
box.onclick = function() {
console.log('代码会在box被点击后执行');
};
案例
1.美女相册
Document
美女画廊
显示标题中的文字
属性操作
非表单元素的属性
href、title、id、src、className
var link = document.getElementById('link');
console.log(link.href);
console.log(link.title);
var pic = document.getElementById('pic');
console.log(pic.src);
案例：
- 点击按钮显示隐藏div
Document
- 点击按钮切换图片
Document
- innerHTML和innerText
var box = document.getElementById('box');
box.innerHTML = '我是文本我会生成为标签
';
console.log(box.innerHTML);
box.innerText = '我是文本我不会生成为标签
';
console.log(box.innerText);
- HTML转义符
" "
' '
& &
< < // less than 小于
> > // greater than 大于
空格
© ©
- innerHTML和innerText的区别
- innerText的兼容性处理
表单元素属性
- value 用于大部分表单元素的内容获取(option除外)
- type 可以获取input标签的类型(输入框或复选框等)
- disabled 禁用属性
- checked 复选框选中属性
- selected 下拉菜单选中属性
案例
- 点击按钮禁用文本框
Document
- 给文本框赋值，获取文本框的值
Document
- 检测用户名是否是3-6位，密码是否是6-8位，如果不满足要求高亮显示文本框
Document
- 设置下拉框中的选中项
Document
- 搜索文本框
Document
- 全选反选
Document
商品
价钱
iPhone8
8000
iPad Pro
5000
iPad Air
2000
Apple Watch
2000
自定义属性操作
- getAttribute() 获取标签行内属性
- setAttribute() 设置标签行内属性
- removeAttribute() 移除标签行内属性
- 与element.属性的区别: 上述三个方法用于获取任意的行内属性。
样式操作
- 使用style方式设置的样式显示在标签行内
var box = document.getElementById('box');
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'red';
- 注意
通过样式属性设置宽高、位置的属性类型是字符串，需要加上px
类名操作
- 修改标签的className属性相当于直接修改标签的类名
var box = document.getElementById('box');
box.className = 'show';
案例
- 开关灯
Document
- 点击按钮改变div的背景颜色并要求改变位置
Document
- 图片切换二维码案例
Document
- 当前输入的文本框高亮显示
- 点击按钮改变div的大小和位置
- 列表隔行变色、高亮显示
Document
- 1
- 2
- 3
- 4
- 5
- 6
- tab选项卡切换
Document
体育
娱乐
新闻
综合
我是体育模块
我是娱乐模块
我是新闻模块
我是综合模块
总结学过的知识
DOM 文档对象模拟
常见的DOM操作：
获取元素： getElementById() getElementsByTagName()
给元素注册事件：onclick onmouseover onmouseout onfocus(获取焦点)
操作元素的属性：
非表单元素：href title src alt
表单元素：type value checked disabled selected 后三个属性只有一个值 是布尔类型的 true or false
样式操作：className style
自定义属性：setAttribute() 设置 getAttribute()获取 removeAttribute() 移除
创建元素的三种方式
==document.write()==
document.write('新设置的内容标签也可以生成
');
==innerHTML==
var box = document.getElementById('box');
box.innerHTML = '新内容新标签
';
==document.createElement()==
var div = document.createElement('div');
document.body.appendChild(div);
性能问题
- innerHTML方法由于会对字符串进行解析，需要避免在循环内多次使用。
- 可以借助字符串或数组的方式进行替换，再设置给innerHTML
- 优化后与document.createElement性能相近