一、创建DOM元素
1.使用JS创建DOM元素
(1)创建空标签
var elem=document.createElement("标签名")
(2) 为空标签设置必要的属性或事件
elem.属性名="属性值"
elem.on事件名=function(){操作;}
(3)将元素放到DOM树上
父元素.appendChild("标签名")
二、Math对象
1.用于提供数学计算的API,不用创建，直接使用 2.常用属性 Math.PI 3.常用API (1)取整
1、上取整：超过一点点，就取下一个整数
var num=Math.ceil(num);//小数点位数不能超过15位，否则此方法会失效，只能取整
2、下取整：无论超过多少，都会省略掉小数部分
var num=Math.floor(num);
3、四舍五入取整：
var num=Math.round(num);//只看第一位小数
补充：(1)parseInt(str)去掉单位
(2)num.toFixed(d)
toFixed优点:
1、传入自定义保留小数位数，并且也带有四舍五入的操作
2、解决浏览器带来的舍入误差：计算机很笨，但是它的记忆力好，而且速度快：笨在何处？比如：2-1.6 === 0.399999999999
toFixed缺点：结果是一个字符串，建议搭配上parseFloat使用
笔试题：不允许使用toFixed的情况下，自己封装一个函数，由用户传入数字以及保留的小数位数，进行四舍五入，返回一个数字
function toFixed(num,d){
num*=(10**d);
num=Math.round(num);
num/=(10**d);
return num;
}
var result=toFixed(Math.PI,4);
console.log(result)
(2) 乘方和开方
乘方：Math.pow(底数,幂); -> 更简化的方法：底数**幂
开方：Math.sqrt(num); -> 仅仅只能开平方
(3)最大值和最小值
var max/min=Math.max/min(a,b,c,d,e,f,g,....);//自动在你传入的数字中找到最大值或最小值
问题：本身不支持数组参数
解决：固定用法：Math.max/min.apply(Math,arr);//apply具有打散数组的功能
(4)绝对值：把负数变为整数
Math.abs(-1);//1
(5)随机数：Math.random()：在0~1之间取一个随机的小数
搭配上parseInt，只能取到0，不可能取到1，意味着取不到最大值
公式：parseInt(Math.random()*(max-min+1)+min)
强调：只要以后网页中某一块带有随机的功能，他的底层一定用到了随机数
三、Date对象
1.创建
1、*创建一个当前日期
var now=new Date();
2、*创建一个自定义时间
var birth=new Date("yyyy/MM/dd hh:mm:ss");
3、创建一个自定义时间
var birth=new Date(yyyy,MM,dd,hh,mm,ss);//修改月份，从0~11月，0代表是1月
4、*复制一个日期：
为什么：日期的所有的API都是直接修改原日期的，无法获得修改之前的日期
所以，在执行API之前先进行复制，然后再操作复制后的日期
var end=new Date(start);
2.使用
1、两个日期对象之间，可以相减，得到一个毫秒差（大-小），换算出自己想要的任何一部分 - 日期的本质
其实就是保存了一个毫秒数 - 做倒计时的关键点
2.创建日期的最后一种方式，绝对没人使用：var date=new Date(毫秒数);//计算机元年：1970年1月1日 8点整
3.API
(1)分量：时间的单位
年月日星期：FullYear Month Date Day
时分秒毫秒：Hours Minutes Seconds Milliseconds
(2)每一个分量都有一对儿getXXXX/setXXXX
其中getXXX负责获取一个分量的值
其中setXXX复制设置一个分量的值
注：
1、取值范围：
FullYear - 当前年份的数字
Month - 0~11
Date - 1~31
Hours - 0~23
Minutes、Seconds：0~59
Day - 0~6；0代表星期天，外国人的眼里星期天才是一个星期的第一天
2、任何人都有set操作，唯独Day没有set
3、如果希望对某个分量进行加减操作的话
date.setXXXX(date.getXXXX()+/-n)
4、格式化日期为本地字符串：
date.toLocaleString() - 具有兼容性问题，我们一般会选择自己封装一个format函数来进行格式化
缺点：日期的自动进制、日期的所有的API不能用
优点：可使用字符串的API，如替换、切割、截取...
四、定时器
1、周期性定时器：每过一段时间会执行一次，先等后做，会反复执行，需要自己写停止才能停止
开启：timer=setInterval(callback,间隔毫秒数);
停止：clearInterval(timer);
2、一次性定时器：等待一段时间，只会做一次就结束了
开启：timer=setTimeout(callback,间隔毫秒数);
停止：clearTimeout(timer);
注：两个定时器，看起不同的操作，可以相互的转换，两者的底层一样
(1)同步技术：代码必须一行一行的执行，前面的没做完，后面的就只能等着，目前为止几乎所有的代码，都属于同步技术
(2)异步技术：无论我们这一块代码多么好事，也不会卡住后续代码，目前这个技术只有定时器，最牛逼的异步技术（AJAX）
五、BOM (Brower Object Model) 浏览器对象模型
1、window对象
- 代替全局对象global，保存全局变量和全局函数
- 表示当前窗口
属性
1.获取当前浏览器的完整大小
outerWidth outerHeight
2.获取浏览器的文档显示区域大小
innerWidth innerHeight
3.获取屏幕完整大小(用于桌面应用)
screen.width screen.height
方法
(1)打开链接的新方式
1.当前窗口打开，可以后退
HTML： <a href="url">内容</a>
JS： open("url","_self");
2.当前窗口打开，禁止后退，使用场景：比如电商网站，结账后禁止后退
location.replace("新url");//叫做替换，不叫作跳转，不会产生历史记录，自然也就不能前进后退，但是网址都替换，网页必然会发生变化
history：当前【窗口的历史记录】，他其实可以做的事儿就是前进后退
location：当前【窗口的正在打开的url】
3.新窗口打开，可以打开多个：
HTML：<a href="url" target="_blank">内容</a>
JS：open("url","_blank");
4.新窗口打开，只能打开一个，使用场景：比如电商网站，只允许用户打开一个结账界面
HTML：<a href="url" target="自定义一个name">内容</a>
JS： open("url","自定义一个name");
解释：其实窗口的底层都有一个名字，如果打开了一个已经开着的名字的窗口，新打开的就会把旧的给替换掉，
但是给大家的感觉有一点像是刷新的感觉
补：
1.以后的跳转，任何标签都可以
2.提升了用户的体验感
3.a标签的其他用途：
(1)跳转
(2)锚点
(3)下载：<a href="xx.exe/rar/zip/7z...">内容</a>
(4)打开图片和txt文件：<a href="xx.图片的后缀/txt">内容</a>
(5)直接书写JS - 不需要绑定点击事件：<a href="javascript:js代码;">内容</a>
(2) 打开新窗口/新连接：var newW=open("url","target","width=?,height=?,left=?,top=?");
注：
1、如果你没有传入第三个参数，那么窗口回合浏览器融为一体，浏览器有多大，窗口就有多大
2、如果你传入第三个参数，那么窗口回合浏览器分离开，独立存在
3、可以拿个变量接住这个窗口，以后用于做其他操作
(3)关闭窗口：window/newW.close()
(4)改变新窗口的大小：newW.resizeTo(新宽,新高)
(5)改变新窗口的位置：newW.moveTo(新X,新Y)
(6)window提供的三个框：- 换一个浏览器，样式就不一样了
警告框：alert("警告文字");
输入框：var user=prompt("提示文字");
确认框：var bool=confirm("提示文字");
(7)定时器也是window的
(8)window的专属事件：
1、window.onload事件 - load：加载：等待其他所有的资源加载完毕后才会执行的代码，放在里面的代码其实是要最后才会执行 - 只要把js放在HTML的后面，就不需要此操作
2、*window.onresize事件 - 窗口如果大小发生了变化，就会触发，搭配上上面的判断innerWidth可以理解为这是JS版本的css媒体查询
3、***window.onscroll事件 - 滚动事件，一旦滚动就会触发
(1)获取滚动条当前的位置：window.scrollY
(2)获取元素距离页面顶部有多远：elem.offsetTop/offsetLeft
(9)本地/客户端存储技术：保存着在浏览器里面的数据
1、cookie：淘汰了，存储大小只有2kb，而且操作极其复杂，尤其要到处切割的，最多只能保存30天
2、webStorage：H5（概念统称）带来的一个新特性，存储的大小由8mb，永久保存，操作简单
(1)sessionStorage - 会话级，只要浏览器一旦关闭，数据就会死亡
(2)localStorage - 本地级，只要不你清空他，他就永远存在两者的用法是一摸一样的，不用创建，可以直接使用
操作：
1、添加：xxxxStorage.属性名="属性值";
2、读取：xxxxStorage.属性名
3、删除：xxxxStorage.removeItem("属性名");
4、清空：xxxxStorage.clear();//删全部
2.history对象：保存了当前窗口的历史记录（过去的url）
- 前进：history.go(1);
- 后退：history.go(-1);
- 刷新：history.go(0);
3.location对象：保存了当前窗口的正在打开的url（现在的url）
(1)url :统一资源定位器
1、协议：https（加密）/http（未加密）/ftp(传输文件) /ws（直播） - 前两个都属于叫做 请求 - 响应 模型，专门用于实现网站开发
2、主机号|ip地址|域名：域名是需要花钱购买的，主机号|ip地址是免费的，127.0.0.1才真的叫主机号，只能自己访问自己
3、端口号：https默认端口为443，http默认端口为80，只有默认端口可以省略不写！
4、文件的相对路径|路由：百度加密了 - 如果以后学习了服务器端，我们可以配置好一些选项，用户就可以在自己电脑上，看到我们的东西了
5、查询字符串|请求消息：前端传输到后端的东西，前端对后端说的话，就是form表单get提交带来的东西
(2)属性：获取url的5个部分的内容，直接输出location对象即可查看
- 协议：location.protocal
- 域名：location.hostname
- 端口号：location.port
- 路由：location.pathname
- 请求消息：location.search
(3)方法：
- 跳转：location="新url" - 替换当前窗口，可以后退
- 跳转后，禁止后退：location.replace("新url");
- 刷新：location.reload();
七、DOM补充
1.DOM分类
(1) 核心DOM：无敌的，既可以操作HTML又可以操作XML，但是语法相对比较复杂
(2) HTML DOM：只能操作HTML，不能访问一切自定义的东西，但是语法简单
(3) XML DOM：只能操作XML数据格式，被淘汰了，被JSON数据格式代替了
2.查找元素
(1) 通过关系找元素：前提：至少要找到一个元素，才可以调用关系网
1. 父：xx.parentNode;
2. 子：xx.children; - 集合
3. 第一个儿子：xx.firstElementChild;
4. 最后一个儿子：xx.lastElementChild;
5. 前一个兄弟：xx.previousElementSibling;
6. 后一个兄弟：xx.nextElementSibling;
(2) 直接找元素：2大类：通过HTML的特点去查找元素
直接找元素：2大类：通过HTML的特点去查找元素
1、var elems=document.getElementsByXXXXXX();//返回的是一个动态集合HTMLCollection
2、第二大类：2个：通过CSS选择器去查找元素
(1) var elem=document.querySelector("任意css选择器");
缺陷：只能找到单个元素，如果匹配到多个，返回第一个，没找到，返回null一次只能操作一个元素
(2)***var elems=document.querySelectorAll("任意css选择器");
优点：
1、找到了是一个集合，没找到是一个空集合
2、复杂查找时，非常简单
3、返回的是一个静态集合NodeList
面试题：document.getXXX 和 document.queryXXX的区别？
1、后者更适合复杂查找
2、动态集合和静态集合的区别？
(1) 动态集合：每一次DOM发生变化，都会再次查找页面元素，让页面和数据保存一致，但是效率也较低 - 不支持forEach
(2) 静态集合：每一次DOM发生变化，都不会再次查找页面元素，让页面和数据保存不一致，但是效率高 - 支持forEach
3.操作样式：
(1) 内联样式：
- 获取：elem.style.css属性名; - 只能获取内联样式
- 设置：elem.style.css属性名="css属性值";
(2) 样式表样式 - 此生不见
1.获取你想要操作的样式表
var sheet=document.styleSheets[i];
2.获取此样式表中所有的样式规则
var rules=sheet.cssRules;
3.数出你想要操作的那个样式规则
var rule=rules[i];
4.操作
console.log(rule.style.background);
rule.style.background="purple"
(3) 操作属性：
1、获取属性值：
核心DOM：elem.getAttribute("属性名");
HTML DOM：elem.属性名
2、*设置属性值：
核心DOM：elem.setAttribute("属性名","属性值");
HTML DOM：elem.属性名="属性值"
3、删除属性：设置属性值为空字符串，确实某些属性可以算是删除，但是只是删除了属性值，属性名还在，而有的属性哪怕只有一个属性名，也会具有作用（checked、href、readonly...）
*核心DOM：elem.removeAttribute("属性名");
HTML DOM：elem.属性名="";
4、判断有没有：只能判断有没有，不能判断是什么，推荐用elem.getAttribute("属性名");去获取到属性值，自己再写比较运算进行判断
核心DOM：elem.hasAttribute("属性名");
HTML DOM：elem.属性名!="";
(4) 操作内容 ：innerHTML/innerText/value
(5) 如何创建元素以及上树：3步
1、创建空标签：
var elem=document.createElement("标签名");
2、为其设置必要的属性和事件
elem.属性名="属性值";
elem.on事件名=function(){操作}
3、上树：3种
(1)父元素.appendChild(elem);//在父元素末尾追加一个子元素elem
(2)父元素.insertBefore(elem,已有子元素);//在父元素里面追加一个子元素elem，但是会放在已有子元素的前面
(3)父元素.replaceChild(elem,已有子元素);//在父元素里面追加一个子元素elem，但是elem会替换掉已有子元素
(6) 删除元素：elem.remove();
扩展：
1、input的两个专属事件：onfocus（获取焦点）和onblur（失去焦点）
2、创建变量：在ES6新增了一个let关键字 - 建议忘掉var
let 变量名=值;
作用：
(1) 解决了声明提前，一定要先创建再使用
(2) 带来了块级作用域：一个{}就是一个快，此变量只能在那个{}里面使用！
(3) 如果用let去当作下标绑定事件，那么他会记录着你当前元素的下标，不再需要自定义下标了！其实forEach的那个形参i就是用let创建的！
3、将类数组对象变为普通数组！ES5提供了此API
接住=Array.from(类数组);
4、DOM的作用：增、删、改、查（元素、内容、属性、样式）
八、递归
1.定义：在函数之中再一次调用了函数自己 2.何时使用：专门用于【遍历层级不明确的情况】 - DOM树和【数据】 3.如何使用：2步
function 函数名(root){
1、第一层要做什么直接做！
2、判断有没有下一层，如果有下一层则再次调用此方法，只不过传入的实参是自己的下一层
}
函数名(实际的根元素/根数据)
1.算法：深度优先！优先遍历当前节点的子节点，子节点遍历完毕才会跳到兄弟节点
2.缺陷：不要过多使用，性能相对较差，同时开启大量的函数调用，浪费内存，我们只在一个情况：【遍历层级不明确的情况】
递归 vs 纯循环：
递归：优点：简单易用
缺点：性能低
纯循环：优点：几乎不占用内存
缺点：难得很
九、绑定事件
1.在HTML页面上书写事件属性：
<elem on事件名="函数名(实参)"></elem>
缺点：
1、不符合内容（HTML）与样式（CSS）与行为（JS）的分离
2、无法动态绑定，一次只能绑定一个元素
3、不支持绑定多个函数对象
2.在JS中使用事件处理函数属性：
elem.on事件名=function(){操作}
优点：
1、符合内容（HTML）与样式（CSS）与行为（JS）的分离
2、可以动态绑定
缺点：
1、不支持绑定多个函数对象
3.在js中使用事件API
1.主流：elem.addEventListener("事件名",callback);
2.老IE：elem.attachEvent("on事件名",callback);
3.兼容：
if(elem.addEventListener){
elem.addEventListener("事件名",callback);
}else{
elem.attachEvent("on事件名",callback);
}
1.优点：
1、符合内容（HTML）与样式（CSS）与行为（JS）的分离
2、动态绑定
3、支持绑定多个函数对象
2.缺点：有兼容性问题
4.扩展：
1.select\&option简化创建元素&上树
select.add(new Option("innerHTML","value"))
十、 event（事件对象）
1.事件周期：从事件发生，到所有事件处理函数执行完毕的全过程
分为三个阶段
1、捕获阶段：由外向内，记录着要发生的事件有哪些
2、目标优先触发：目标元素->当前点击的实际发生事件的元素
3、冒泡触发：由内向外，依次执行我们之前记录着的要发生的事件
2.获取事件对象event
主流：会自动作为事件处理函数的第一个形参传入e
老IE：event; - 老IE全局有这个变量
兼容：event;老IE可用，主流也可用
(1)event对象的作用
1、获取鼠标的坐标/位置
(1) 获取鼠标相对于屏幕的坐标：e.screenX/Y
(2) 获取鼠标相对于浏览器窗口/客户端/文档显示区域的坐标：e.clientX/Y
(3) 获取鼠标相对于网页的坐标：e.pageX/Y
2、阻止事件冒泡 - 笔试面试中
主流：e.stopPropation();
老IE：e.cancelBubble=true;
兼容：e.cancelBubble=true;
3、事件委托/利用事件冒泡：提升网页性能，事件函数可以简化为箭头函数
(1)使用：如果多个子元素定义了相同 或 相似的事件操作，只给【父元素定义一次】
(2)认识一个【目标元素】target：实际触发事件的元素
主流：e.target;
老IE：e.srcElement;
兼容：e.srcElement;
4、阻止浏览器的默认行为：
如：a标签默认就可以跳转，提交按钮可以提交表单，右键自带一个弹出框，F12自带一个控制台，F5自带刷新，F11自带全屏...
主流：e.preventDefault();
老IE：e.returnValue=false;
兼容：e.returnValue=false;
3.新事件：
1、右键事件 - window.oncontextmenu
2、键盘事件：一般用于游戏开发比较多 + 都要搭配上键盘的键码
(1)window.onkeydown - 按下和按住都会触发，任何键盘按键都可以触发
(2)window.onkeypress - 按下和按住都会触发，但是只有数字、字母、回车、空格可以触发，
(3)window.onkeyup - 松开按键才会触发，任何键盘按键都可以触发
4、获取键盘的键码 e.keyCode; 获取按键的code
