JS特效系列

1）Web APIs
JS的组成

BOM-浏览器对象模型
一套操作浏览器的功能的API
通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等
DOM-文档对象模型
一套操作页面元素的API
DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作
2）DOM
1、基本概念
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口
它是一种与平台和语言无关的应用程序接口，它可以动态地访问程序和脚本，更新其内容、结构和文档的风格
2、DOM又称为文档树模型

（1）概念
文档：一个网页可以称为文档
节点：网页中的所有内容都是节点（标签、属性、文本、注释等）
元素：网页中的标签
属性：标签的属性
（2）DOM常用操作
获取文档元素
对文档元素进行增删改查操作
事件操作
3、window和document
（1）window
所有的浏览器都支持window对象，它支持浏览器窗口
所有的js全局对象，函数以及变量都能自动称为window对象的成员
全局变量是window对象的属性，全局函数是window对象的方法
（2）document
document也是window对象的属性之一
document对象是documentHTML的一个实例，也是window对象的一个属性，因此可以将document对象作为一个全局对象来访问

常用属性
4、事件

5、文档加载过程
1）存在问题
浏览器在加载一个页面时，是按照自上向下的顺序加载的
读取到一行就运行一行，如果将script标签写到head内部，在代码执行时，页面还没有加载，页面中的DOM对象也没有加载
会导致在js中无法获取到页面中的DOM对象
演示

2）解决方案
onload事件
（1）onload事件会在整个页面加载完成之后才触发
（2）为window绑定一个onload事件，该事件对应的响应函数将会在页面加载完成之后执行，这样可以确保我们单位代码执行时所有的DOM对象已经加载完毕了
把script标签放在body尾部
window.onload＝function（）｛｝
建议两者综合
onunload
window.onunload＝function（）｛
当用户退出页面时执行｝
6、文档页面元素获取


7、节点之间关系

每个节点总都有一个nodeType属性，用于表面节点的类型，节点类型由Node类型中定义12个常量表示

8、节点操作
1）CRUD增删改查



轮播图


关闭小广告

选中和取消选中☑️


input框获得焦点

上传图片检测


选项卡


发表评论



2）节点属性
获取：getAttribute（名称）
设置：setAttribute（名称、值）
删除：removeAttribute（名称）
9、编码
10、九宫格布局
求出当前盒子所在的行和列
var row=parent（i/allCols）；
var col=parent（i%allCols）；



11、Date
Date对象基于1970年1月1日（世界标准时间）起的毫秒数
getTime（）//返回毫秒数和valueOf（）结果一样
getMilliseconds（）
getSeconds（）//返回0-59
getMinutes（）//返回0-59
getHours（）//返回0-23
getDays（）//返回星期几 0周日 6周六
getDate（）//返回当前月的第几天
getMonth（）//返回月份，从0开始
getFullYears（）//返回4位的年份 如2020
写一个函数，格式化日期对象，返回YYYY-MM-dd hh：mm：ss的形式

12、定时器
1）需求
JS的程序的执行速度是非常快的，如果希望一段程序，可以每间隔一段时间执行一次，可以使用定时调用。
某一段程序需要延迟多少时间后执行，可以使用定时器调用。
2）使用
循环执行

定时执行
3）实操
3）BOM