DOM节点分类
1.元素节点（获取元素节点：querySelector;querySelectorAll）
2.文本节点（innerHTML）
3.属性节点（element.src;element.id）
innerHTML
在ul中添加li标签
ul.innerHTML=
<li>香蕉</li>
<li>苹果</li>
<li>鸭梨</li>
节点操作
创建元素节点：createElement
创建文本节点：createTextNode
添加节点：appendChild
删除节点：removeChild
事件对象
事件监听函数的形参可以获取事件对象
通过事件对象可以获取鼠标坐标
1.获取x坐标：e.clientX；
2.获取y坐标：e.clientY；
随鼠标显示图片的大图
事件绑定
1.addEventListener("eventType",fun)
2.element.onEventType=fun
区别：
1.addEventListenner在同一元素上的同一事件类型添加多个事件，不会被覆盖，而onEventType会覆盖。
2.addEventListenner可以设置元素在捕获阶段触发事件，而onEventType不能
事件流
三个div嵌套，都绑定click事件，点击最内层的元素，事件如何执行。
a：只执行最内层
b：从内到外都执行
c：从外到内都执行
事件捕获与事件冒泡
默认情况下，事件会在冒泡阶段执行
addEventListener（eventType，fun，boolean）；//默认false：冒泡阶段触发；true：捕获阶段触发
阻止事件冒泡
实现下面功能：
点击一个按钮，显示一个容器盒子；
点击容器，容器背景颜色改变；
点击容器中的按钮，容器隐藏。
e.stopPropagation（）；
事件默认行为
为一个可以跳转到百度的a标签设置点击事件；
去掉事件默认行为
e.preventDefault（）
or
return false
事件委托
通过e.target将子元素的时间委托给父级处理。
事件类型
1.鼠标事件
2.键盘事件
3.触屏事件
键盘事件
let box = document.querySelector(".box")
document.onkeydown = function(e){
let code = e.keyCode;
switch(code){
case 37:box.style.left = box.offsetLeft-5+"px";break;
case 38:box.style.top = box.offsetTop-5+"px";break;
case 39:box.style.left = box.offsetLeft+5+"px";break;
case 40:box.style.top = box.offsetTop+5+"px";break;
}
}
触屏事件
let box = document.querySelector(".box");
box.ontouchstart = function(){
console.log("start")
}
box.ontouchend = function(){
console.log("end")
}
box.ontouchmove = function(){
console.log("I'm moving!")
}
计时器方法
1.setInterval与clearInterval
2.setTimeout与clearTimeout
setInterval
setInterval
clearInterval
1.在网页中显示时间。
2.在网页中制作一个秒表（开始功能、停止功能、重置）。
setTimeout
setTimeout
clearTimeout
1.3秒跳转到百度。
防抖与节流
解决性能问题，开发中常会遇到。
防抖：对于短时间内多次触发事件的情况，可以使用防抖停止事件持续触发。
节流：防止短时间内多次触发事件的情况，但是间隔事件内，还是需要不断触发。
window.onscroll事件
防抖（debounce）
滚轮滚动的事件不会连续触发
let timer = null;
window.onscroll = function(){
if(timer !==null){
clearTimeout(timer);
}
timer = setTimeout() =>{
console.log("hello world")
timer = null;
),2000)
}
节流
BOM对象
window对象（全局对象）
screen对象包含有关用户屏幕的信息。
location对象用于获得当前页面的地址（URL），并把浏览器重定向到新的页面。
history对象包含浏览器的历史。
navigator对象包含有关访问者浏览器的信息。
https://www.w3cschool.cn/javascript/js-window-screen.html
window对象
window对象是全局对象，所有在浏览器可以直接使用的方法，都是window对象的方法。
1.计时器方法
2.弹出框方法
猜数字
1.随机生成一个1-100的数字。
2.在prompt弹出框中猜数字。
3.提示【大于目标结果】【小于目标结果】【恭喜你回答正确】。
水果列表删除提示功能
1.制作一个水果列表。
2.删除选中的水果。
3.删除时，使用confirm提示是否确认删除。
lacation对象
- location.href - 属性返回当前页面的URL - "https://www.baidu.com/"
- location.hostname - 主机的域名 - "www.baidu.com"
- location.pathname - 当前页面的路径和文件名 "/s"
- location.port - 端口 - “8080"
- location.protocol - 协议 - "https:"
数据类型分类
六种数据类型：
数值（Number）、字符串（String）、布尔（Boolean）、空（Null）、未定义（Undefined）、对象（Object）
原始类型与引用类型的区别
一、赋值的区别：原始类型赋值，引用类型赋的是引用。
二、比较的区别：原始类型比较的是值，引用类型比较的是引用是否指向同一个对象。
三、传参的区别
原始类型与引用类型的类型检测
一、原始数据类型检测：typeof（值）
二、引用数据类型检测：值instranceof类型
数组存储学生列表
1.数组StudentList
2.点击按钮，将表单中的【姓名】和【年龄】赋值给Student对象，并push到StudentList中。
同步与异步
例子：打电话与发短信（微信）；
异步可以多条任务线去执行程序，一条任务卡顿不影响其他任务。
CSS
CSS outline:none;表示使outline属性无效，使绘制于元素周围的一条线无效。
outline属性包括：outline-color、outline-style、outline-width：
outline-color ：设置元素轮廓的颜色，其取值与border-color类似。只有当outline-style不为none时才有效。默认为transparent。
outline-style ：设置元素轮廓的格式，其取值与border-style类似，但没有hidden值。默认为none，无轮廓。
outline-width：设置元素轮廓的宽度，其取值与border-width类似。只有当outline-style不为none时才有效。
因此，CSS设置 outline:none时，outline-color、outline-style、outline-width都会无效，即元素轮廓的颜色、元素轮廓的格式、元素轮廓的宽度都无效，即达到不显示元素轮廓的效果。
quot在html里是源代码里“"(引号)的意思，用法：& quot;(去掉&后的空格)
mask-type属性功能上和mask-mode类似，都是设置不同的遮罩模式。但还是有个很大的区别，那就是mask-type只能作用在SVG元素上，本质上是由SVG属性演变而来，因此，Chrome等浏览器都是支持的。但是mask-mode是一个针对所有元素的CSS3属性，Chrome等浏览器并不支持，目前仅Firefox浏览器支持。
由于只能作用在SVG元素上，因此默认值表现为SVG元素默认遮罩模式，也就是默认值是luminance，亮度遮罩模式。如果需要支持透明度遮罩模式，可以这么设置：mask-type: alpha;
预加载的基本使用
<link> 标签最常见的应用情形就是被用来加载CSS文件，进而装饰你的页面
但是在这里，我们将使用 preload 作为 rel 属性的属性值。这种做法将把 <link> 元素塞入一个预加载器中，
这个预加载器也将用于其他我们所需要的，各种各样的，任意类型的资源。为了完成基本的配置，
你还需要通过 href 和 as 属性指定需要被预加载资源的资源路径及其类型。
165
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
