BOM DOM
BOM
概述：
BOM 浏览器对象模型，对于路由的底层就是bom
六大对象
window 全局对象
location 地址栏（url）*
history 历史页面 *
document 文档对象
navigator 导航（获取浏览器对应的信息）
screen 屏幕对象 （获取对应的宽高 适配兼容）
frames 框架的布局
DOM
概述：
DOM 文档对象模型 他是用于操作对应的html文档（增删改查）
dom树分为
元素节点 （所有的标签都是属于元素节点）
属性节点 （所有标签里面的属性都是属性节点）
文本节点 （所有显示的文本都是文本节点）
元素节点的操作
元素节点的获取
获取元素的方法
document对象加对应的方法来获取元素
getElementByID 根据id选择器获取（元素）
getElementsByClassName 根据class名字获取 （返回一个元素数组 他是一个伪数组 （除了具备对应
的下标 和length属性其他方法都不具备））
getElementsByTagName 根据标签名获取 （返回伪数组 htmlcollection）
getElementsByName 根据name属性获取 （返回伪数组）
querySelector 根据选择器获取（他会获取找到第一个元素）
querySelectorall 根据选择器获取所有匹配的元素 （返回伪数组 nodeList）获取body和head的属性
获取body document.body 属性
获取head document.head 属性
元素所具备的属性（赋值就是对应的设置 反之就是获取）
id 获取对应的id （设置）
className 获取对应的class名字
style 获取样式 （设置）
tagName 获取标签名
title 获取title属性
innerHtml 获取显示的内容 （设置显示的内容 包含html代码）
innerText 获取显示的文本 （设置显示的文本 不包含html代码）
所有的表单元素都具备的属性 value
节点的区分（属性）
nodeType 节点的类型
nodeName 节点名字
nodeValue 节点值
获取子节点
childNodes（获取所有的子元素节点及文本节点（包含空格和换行符））
children （获取所有的子元素节点） *
parentNode 获取对应的父节点
removeChild 移出子节点
Math的方法（静态方法）
abs 绝对值
random 随机数
pow 幂次方
sqrt 开平方
max 最大值
min 最小值
ceil 向上取整floor 向下取整
round 四舍五入
属性
PI 圆周率
E 科学计数法
属性节点的相关的内容（针对元素节点）
获取所有的属性节点 attributes 返回一个伪数组（element）
NamedNodeMap里面的方法
getNamedItem 获取对应属性节点
setNamedItem 设置对应的属性节点
removeNamedItem 移除对应的属性节点
关于属性操作的方法（操作任意属性）
getAttribute 获取属性值
setAttribute 设置属性
removeAttribute 移除属性
var box = document.getElementById("box")
//所有元素都具备的属性 attributes 获取所有里面所有的属性节点 返回的是一个伪数组
namedNodeMap
//map key-value形式的伪数组 object
console.log(box.attributes);
console.log(box.attributes.length);
//通过下标来获取对应的属性节点
var id = box.attributes[0]
//通过key来获取对应的节点(属性名)
console.log(box.attributes['id']);//node对象
console.log(id);//node对象
// 节点的几个属性 nodeType nodeValue nodeName
console.log(id.nodeType); //2
console.log(id.nodeValue); //box
console.log(id.nodeName); //id节点的操作
元素节点的创建 createElement
属性节点的创建 createAttribute
文本节点的创建 createTextNode
增删改的方法
appendChild 添加到后面
insertBefore 添加到前面
remove 移除自身的所有内容
removeChild 移除对应的子节点
replaceChild 替换对应的子节点
replaceChildren 替换里面的所有内容
var div = document.querySelector("div")
//属性操作的三个方法
// 查询 获取 getAttribute(属性名)
var value = div.getAttribute("title") //返回属性值
console.log(value);
// 删除 delete 全删 remove 删内容不删日志 removeAttribute(属性名)
div.removeAttribute("title")
// 添加 添加重复就是修改 setAttribute(属性名,属性值)
div.setAttribute("class","box")
div.setAttribute("class","innerBox")
//创建元素节点 返回的是一个元素节点 createElement(标签名)
var newEle = document.createElement("div")
var newEle1 = document.createElement("div")
//创建属性节点 createAttribute(属性名)
var attr = document.createAttribute("class")
//设置属性值
attr.value = "box"
//创建文本节点 传的是显示的内容 createTextNode(对应的文本)
var text = document.createTextNode("hello world")
//添加子节点 add append
newEle.setAttributeNode(attr) //设置属性节点 setAttribute
newEle.appendChild(text) //添加文本节点 innerText
var span = document.createElement("span")
var a = document.createElement("a")
var span1 = document.createElement("span")
newEle.appendChild(span)
// appendChild 追加到后面 insertBefore appendChild 元素已经添加是不会再次添加
newEle.insertBefore(span1,text)
document.body.appendChild(newEle) //添加元素节点
//删除节点 直接删除对应的节点
document.body.appendChild(newEle1)
newEle1.remove() //把自己所有的都删除 包含里面的内容和自己
//删除子节点 removeChild(传入的是被删除的节点)
newEle.removeChild(span1)
//修改的方法 replace replaceChildren替换所有的 replaceChild(新的节点,原本的子节点) 替
换对应的节点节点克隆的方法
cloneNode
节点之间的关系
父子关系（属性）
childNodes 获取所有的子节点（文本节点及元素节点）
children 获取所有的子元素节点
parentNode 父节点
parentElement 父元素
兄弟关系（属性）
previousSibling 前一个节点
previousElementSibling 前一个元素节点
nextSibling 后一个节点
nextElementSibling 后一个元素节点
firstChild 第一个节点
lastChild 最后一个
newEle.replaceChild(a,span)
newEle.replaceChildren(a) //不常用的
var div = document.querySelector("div")
// deep 是否深入 里面的内容是否全部克隆包含事件
//如果deep是false 那么只能克隆当前的元素 默认为false
var clone = div.cloneNode() //节点克隆 返回的是克隆的元素
document.body.appendChild(clone)
//获取子节点
var div = document.querySelector("div")
//得到所有的子节点
var childs = div.childNodes //返回nodeList
console.log(childs);
//返回所有的子元素节点
console.log(div.children);
//获取第一个子元素 空文本
console.log(childs[0].parentNode);//得到父节点 （节点）
//获取对应的父元素节点
console.log(childs[0].parentElement); //得到父元素（元素节点）
//获取前一个节点
var b = document.querySelector("b")
console.log(b.previousSibling); //前一个节点
console.log(b.nextSibling); //后一个节点
console.log(b.previousElementSibling); //前一个元素节点
console.log(b.nextElementSibling); //后一个元素节点
console.log(document.querySelector("div").firstChild); //获取第一个子节点
console.log(document.querySelector("div").lastChild);//获取最后一个子节点this
this关键词表示自己 指向当前的调用者
//获取所有的按钮
var btns = document.querySelectorAll("button")
//for循环遍历
for (var i=0;i //拿到对应的元素添加点击事件 btns[i].onclick = function(){ //事件是异步 // console.log(i); // btns[i] 显示为undefined 原因是这个地方i为5 //this会指向你点的按钮 // console.log(this); this指向当前调用的元素 console.log(this.innerText); } } setTimeout(function(){ console.log(this); },100) //window 对象 setTimeout属于window对象的 console.log(i); 用户在浏览器上触发一个操作 浏览器上会执行相关的函数进行处理 这个称为事件 示例：用户点击注册按钮 浏览器会完成注册的操作 事件的俩种模式 内联模式 脚本模式 * 事件划分 事件的执行者 元素 事件名 on开头+对应的名字 事件处理函数 function 事件的分类 鼠标事件 （mouse） 点击的事件 click dblcilck mousedown mouseup 移进 mouseenter //执行者 事件名 document.onclick = function(){ //处理函数 }mouseover （子元素也会触发） 移出 mouseleave mouseout （子元素也会触发） 移动 mousemove 键盘事件 （key） keyup 弹起 keydown 按下 keypress （字符键才触发 按下） load 加载事件 unload 卸载 select 选择 change 修改 blur 失去焦点 focus 获取焦点 input 输入内容 scroll 滚动 submit 提交 reset 重置 window.onkeydown = function(){ console.log("键盘按下"); } window.onkeyup = function(){ console.log("键盘弹起"); } //字符键触发的 只有按字符的时候才能触发 tab ctrl window.onkeypress = function(){ console.log("字符按下"); } //窗口加载 window.onload = function(){ console.log("加载"); } window.onunload = function(){ console.log("卸载"); } //html元素的一些事件 // 表单元素所有的函数都具备一个参数 arguments（所有传递参数 他是数组） 处理函数也同样是函数 同样存在这个arguments 通过我们的比对我们发现这个arguments里面只有一个参数 这个参数是一个event对象（事件源对象） 由于我们的arguments[0]是或者对应的arguments数组里面的第一个参数（第一个形参 所以我们可以 在对应的处理函数中直接声明一个形参来接收我们arguments里面的数据） event 事件源对象 （window里面的） // 获取焦点事件 document.querySelector("input").onfocus = function(){ console.log("获取焦点"); // focus方法可以直接获取焦点 document.querySelector("input:nth-child(2)").focus() } // 失去焦点事件 document.querySelector("input").onblur = function(){ console.log("失去焦点"); } document.querySelector("#context").onselect = function(){ console.log("选择了"); } // 修改数据 修改数据 失去焦点 document.querySelector("input:nth-child(2)").onchange = function(){ console.log("修改数据了"); } //vue 双向绑定的原理实现 document.querySelector("input:nth-child(2)").oninput = function(){ console.log("输入数据"); } // 表单元素 form document.querySelector("form").onsubmit = function(){ console.log("数据提交了"); } //重置事件 form document.querySelector("form").onreset = function(){ console.log("数据重置了"); } //scroll 滚动栏 滚动事件 任何具备滚动栏都可以添加 window.onscroll = function(){ //回到顶部 console.log("滚动了"); } setTimeout(function(){ //操作滚动栏滚动 x 轴 y 轴 window.scrollTo(0,0) },5000) document.querySelector("button").onclick = function(e){ //e其实就是我们对应的arguments[0] 所以这个e就是我们的event对象 // 建议形参的写法为 e或event //兼容写法 e = e || window.event //兼容写法 console.log(e.altKey); }event对象里面的属性 位置相关属性 offsetX 鼠标离当前元素的X距离 offsetY 鼠标离当前元素的Y距离 clientX 鼠标离网页最左的距离 （不包含不可见部分） clientY 鼠标离网页最顶部的距离 （不包含不可见部分） pageX 鼠标离网页最左的距离 （包含不可见部分） pageY 鼠标离网页最顶部的距离 （包含不可见部分） screenX 鼠标离屏幕最左部的距离 screenY 鼠标离屏幕最顶部的距离 按键相关属性 //event中的属性 //位置属性 console.log(e.x);//当前鼠标离对应的最顶部的距离（不包含滚动栏的距离）不包含不可见距离 console.log(e.y); console.log(e.clientX); console.log(e.clientY); console.log(e.offsetX);//对应在div里面的鼠标位置X console.log(e.offsetY);//对应在div里面的鼠标位置Y console.log(e.pageX);//当前鼠标离对应的最顶部的距离（包含滚动栏的距离） 包含不可见距离 console.log(e.pageY); console.log(e.layerX);//在定位的时候基于自己 不定位的时候基于最顶部距离 包含不可见距离 console.log(e.layerY); console.log(e.screenX);//离屏幕最坐标的X距离 console.log(e.screenY);//离屏幕最上面的y距离ctrlKey altKey shiftKey button （只针对于点击事件） 左键是0 中间为1 右键为2 type 事件触发类型 target 当前触发事件的对象 currentTarget 当前加事件的对象 键盘的输入的相关属性 key 获取对应的按下的键 keyCode 获取按下的键的ascii码 charCode 获取keypress事件中按键的ascii码 事件委托机制 将原本元素需要做的事件 交给他的父元素 1.加事件给对应的父元素 2.在父元素的事件中进行判断 e.target //三个按键是否按下(长按) 先按下再操作 布尔类型的值 console.log(e.ctrlKey); //是否按下ctrl console.log(e.shiftKey);//是否按下shift console.log(e.altKey);//是否按下alt window.onkeydown = function(e){ //兼容 ie e = e || window.event //key 获取对应的按下的键 console.log(e.key);//兼容问题 //keyCode 获取对应按下键的ascii码 console.log(e.keyCode); //不管是大写还是小写获取的都是大写的ascii码 } //只支持字符 window.onkeypress = function(e){ console.log(e.keyCode); //将ascii转为对应的字符串 console.log(String.fromCharCode(e.keyCode)); //只在onkeypress 里面才有用 也返回是ascii码 console.log(e.charCode); } //事件委托 （里面有多个相同的元素需要同样的事件） //获取父元素 利用的父元素的事件及对应的e.target进行判断 当前你操作的元素是哪一个 document.querySelector("ul").onclick = function(e){ e = e || window.event //获取当前操作的元素 liif(e.target.nodeName == "LI"){ //操作 //排他思想 for(var j=0;j this.children[j].style.backgroundColor = "" } e.target.style.backgroundColor = "red" } } 从里到外冒泡 里面有一个按钮添加了点击事件 外面有个盒子也添加了点击事件 在你触发对应的按钮的 点击的时候 同时他会自动调用对应盒子的点击事件 而这个机制就叫做事件冒泡 事件捕获 直接进行捕获处理 阻止事件冒泡 e.stoppropagation() * e.cancelBubble = true (兼容ie的写法) 兼容写法 阻止默认行为 概述：元素自身拥有的一些行为 form的submit按钮会自动提交 然后跳转页面 a标签 直接默认跳转页面 鼠标右键点击 会出现菜单栏 ..... document.querySelector("div").onclick = function(){ console.log("大盒子被点击了"); } document.querySelector("button").onclick = function(e){ e = e || window.event // // 阻止事件冒泡 // e.stopPropagation() //适用大多数的浏览器 * // //兼容ie 取消冒泡 // e.cancelBubble = true //兼容写法 if(e.stopPropagation){ e.stopPropagation() }else{ e.cancelBubble = true } //三目运算写法 e.stopPropagation?e.stopPropagation():e.cancelBubble = true console.log("按钮被点击了"); } e.stopPropagation?e.stopPropagation():e.cancelBubble = true阻止a标签默认跳转的行为 e.preventDefault() 适用所有符合w3c规则的浏览器 * e.returnValue = false 适用ie浏览器 同样适用于高版本浏览器（可能会被废弃） return false //都适用 1.鼠标按下 mousedown （获取点击在元素上的位置） 2.鼠标移动 mousemove （获取在文档上移动的位置 控制对应的元素移动） 3.鼠标弹起 mouseup （将弹起事件和移动事件清除） 实现代码 document.oncontextmenu事件上
事件概述
HTML事件
事件下
事件的俩个行为
事件冒泡
右键菜单栏事件
拖拽
思路
//获取样式 获取所有的地方的样式 给定都是默认值 使用window对象
console.log(window.getComputedStyle($("h1")).backgroundImage);//返回的是一个样式对
象 里面包含所有的样式
// 兼容ie 都是属性 直译 元素对象
console.log($("h1").currentStyle);
// 兼容写法 获取样式对象
function getStyle(element){
return window.getComputedStyle?
window.getComputedStyle(element):element.currentStyle
}
1.采用了观察者模式（observer）
2.同一个事件可以有多个处理函数
3.在添加事件的时候对应的处理函数不能是匿名函数（不然是不能被移除的）
添加事件监听 addEventListener
addEventListener(监听事件名,处理函数,冒泡false 还是捕获 true)
移除事件监听 removeEventListener
removeEventListener(事件名,处理函数)
封装的兼容方法
var btn = document.querySelector("button")
function hanlder(){
console.log("123");
}
//添加监听 同一个事件可以有多个处理函数
btn.addEventListener('click',hanlder,false)
btn.addEventListener('click',function(){
console.log("456");
},false) //是否捕获
//移除事件监听 函数的指向不一样 开辟俩个内存空间 地址是不一样 移除不了
//移除对应的事件名中某个匹配处理函数
btn.removeEventListener('click',hanlder)
//兼容 ie8以下
// btn.attachEvent("onclick",fn) 添加
// btn.detachEvent("onclick",fn) 移除
//事件监听器的兼容
//添加事件的元素 事件类型 处理函数
function addEvent(element,type,fn){
element.addEventListener?
element.addEventListener(type,fn):element.attachEvent(`on${type}`,fn)
}
function removeEvent(element,type,fn){
element.removeEventListener?
element.removeEventListener(type,fn):element.detachEvent(`on${type}`,fn)
}
Cookie
http（网络传输协议）https（安全）
特点：
无状态 （不知道访问者是谁）
无连接 （连接完成后会断开）
长连接/短连接 （key-alive属性来指定的）
既然我们的http协议是无状态的 那么我们怎么区分对应的访问者（孕育而出了一个sessionID 来做区
分）
他访问了我 我给你一个对应的sessionID 他访问了我我同样给他一个sessionID （这个时候我们就可以
通过这个sessionID来做区分）
这个sessionID是怎么给到你的呢？
他是通过在访问的时候 给你分发一个sessionID 保存到你的机器上 （存在于你的浏览器上 cookie）
sessionID是依赖于cookie进行存储的
cookie会随请求一起过去
这个时候我们的http的无状态就解决了
cookie
刚才在上面我们已经知道了对应的cookie是存储对应的sessionID 那么是不是就证明了我们的cookie是
一个容器的（这个容器的大小只有4k） 是一个容器我们就有对应的增删改查的方法
cookie里面是什么样
对应的属性有
键=值 （名字=值）
expires 过期时间（关闭浏览器失效）*
path 访问路径（指定对应的路径携带cookie）
domain 跨域 （可以跨域的域名）
secure 安全
URI编码和解码
encodeURIComponent 编码
decodeURIComponent 解码
增删改查
添加 直接赋值
//name是对应的cookie的名字 key=value expires 过期日期 path 访问路径（才携带cookie）
domain 跨域操作 secure 安全获取 采用读取字符串的形式
删除 设置过期时间
修改 重新设置就是修改
cookie的特性
1.为了解决http无状态的问题
2.存储只有4k左右
3.他是存储在浏览器上
4.他会随请求携带
5.他可以被伪造和修改（不安全）
cookie和localStorage的区别
localStorage容量大于cookie
localStorage存储的位置和cookie不是一个地方
localStorage对应的不会随请求携带（本地缓存）
cookie 在后续的框架中也会使用 但是他使用的是对应的库（cookie.js）
https://www.mianshigee.com/project/cookie-js/
localStorage的方法
getItem(key) 获取元素
setItem(key,value) 设置元素
removeItem(key) 移除元素
JSON
JSON是一种数据格式（json字符串） 他通用我们对应的网络传输（xml）他是一种数据格式 而在对应
的JavaScript他是一种数据类型
json俩种显示方式
对象 {} .key
数组 [] 使用下标
document.cookie = "key=value;"
console.log(document.cookie.split(";")[0].split("=")[1]) //拿到value值
document.cookie = "key=value;expires="+new Date()
document.cookie = "key=hello;"反序列化操作 (将字符串变成对象)
JSON.parse() *
eval()
序列化操作 （将对象变成json格式的字符串）
JSON.stringify() *
localstorage和cookie存储的格式（字符串）以后再存储数据的时候直接存储json格式字符串 取出的
时候利用反序列化转为对象
var jsonObj = {}
var jsonArray =[]
正则
正则表达式是什么
正则表达式是用于字符串匹配的 （四个支持正则的方法 search 查找 下标 macth 查找 数组 split 切割
replace 替换）
正则表达式对象声明
1.new关键词声明
2.字符模板 声明 （*）
g 全局搜索
i 忽略大小写
正则对象的方法
exec 执行方法 他返回对应的执行对象数组 （没有匹配的返回null）
test 判断是否匹配 （boolean 匹配为true 不匹配为false）
正则表达式的使用
^ 开头
$ 结尾
[] 表示其中一个元素
{} 表示对应的个数 （相当于重复写n次）
var regx = new RegExp("a")
var regex = /a/gi
var regx = /^[abcdef]$/ //表示其中一个元素 a | b | c | d | e | f
var str = "a"
var str1 = "b"
var str2 = "c"
var str3 = "abc"
console.log(regx.test(str));//true
console.log(regx.test(str1));//true
console.log(regx.test(str2));//true
console.log(regx.test(str3));//false
var regx = /^[abc]{2}$/ //俩个元素
var regx1 = /^[abc]{2,3}$/ //俩个到三个
var regx2 = /^[abc]{2,}$/ //俩个或俩个以上
var str = "accc"
var str1 = "bc"
var str2 = "cb"
var str3 = "abc"() 分组 集成到一起
字母的表示
[A-Za-z]
数字的表示
[0-9]
\d 表示数字
\D 表示非数字
空白字符
\s 表示空白字符 空格回车制表符等
\S 表示非空白字符串
所有的字母数字加下划线 \w
\W 不是字母数字下滑线
console.log(regx.test(str));//false
console.log(regx.test(str1));//true
console.log(regx.test(str2));//true
console.log(regx.test(str3));//false
console.log(regx1.test(str));//false
console.log(regx1.test(str1));//true
console.log(regx1.test(str2));//true
console.log(regx1.test(str3));//true
console.log(regx2.test(str));//true
var regx = /^([ab][cd]){2}$/ //acac adad bcbc bdbd
var str = "abcd"
var str1 = "bbcc"
var str2 = "ab"
var str3 = "ad"
console.log(regx.test(str));//false
console.log(regx.test(str1));//false
console.log(regx.test(str2));//false
console.log(regx.test(str3));//false
//字母的表现 ascii码进行排序
var regx10 = /^[A-z]$/ //匹配大写的字母和小写的字母 另外包含对应的字符
var regx10 = /^[A-Za-z]$/ //匹配大写的字母和小写的字母
var regx11 = /^[0-9]$/ //匹配0-9的数字
// \d 小写表示这个东西 \D 大写表示不是这个东西
var regx11 = /^\d$/ //匹配0-9的数字
var regx12 = /^\D$/ //不是数字的内容
var regx16 = /\w/. 表示所有的内容
修饰符
+ 一个到多个相当于 {1,}
? 零个到一个 相当于 {0,1}
* 零个到多个相当于 {0,}
注意事项：点号在对应的[]中显示为. 而不是所有的内容 在对应的{} 后面不能直接接修饰符 如果要接先
要分组括起来
中文匹配的正则
[\u4e00-\u9fa5]
针对于上面的修饰符我们要将他变成对应的字符 转义符号 \
需要转义的内容 [] () {} . + ? / ^ $
捕获性分组 及 非捕获性分组 ?: 非捕获性 体现到对应的数组 exec执行完的数组里面（默认会捕获）
var regx15 = /./
// 匹配 (.) 使用\来进行转义
// 需要转义的内容 [] () {} . + ? / ^ $ ..
var regx = /\(\.\)/
console.log(regx.test("(.)"));//true
console.log(regx.test("a"));//false
var pattern = /(\d+)(?:[a-z])/; //一个或多个数字,和一个a-z的字母
var str = "123abc";
console.log(pattern.exec(str)); //"123a,123,a" //如果没有加上?: 就有a 加上了就没有了