JavaScript——BOM操作、DOM操作

一、BOM操作

1.1 window相关操作

/*
	BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”
*/
// 1、打开新窗口
window.open('url','','width=800px,left=200px')
// 2、关闭当前浏览器窗口
window.close()
// 3、标识自己是一个浏览器（爬虫中需要使用）
navigator.userAgent
// 4、前进
history.forward()
// 5、后退
history.back()
// 6、获取当前页面所在的地址、也可再加赋值符号和网址跳转
window.location.href()
// 7、刷新当前页面
window.location.reload()
// 8、警告框
alert()
// 9、确认框
confirm()
// 10、提示框
prompt()

1.2计时器相关操作 (important)

let time = setTimeout(showMsg,3000)

clearTimeout(time)
setTimeOut(()=>{},延迟时间) 设置一个定时器，时间到后执行回调函数，只执行一次
可以同时定义多个定时器，定时器回调函数到期自动执行无需手动调用

clearTimeOut(timeOutID) 清除定时器

setInterval(()=>{},间隔时间) 设置一个定时器，每间隔多少时间就执行一次，可以同时定义多个

clearInterval(timeOutID) 清除定时器

1.3 全面总结

# 概念
浏览器对象模型，提供了独立于内容而与浏览器窗口进行交互的对象，核心对象是window
DOM顶级对象是document BOM顶级对象是window
BOM比DOM更大，包含DOM
window 包含document location navigation screen history

# 2.window对象
1.它是JS访问浏览器窗口的一个接口
2.它是一个全局对象，定义在全局作用域中的变量、函数都会变成window对象的属性和方法(在调用时我们通常省略window)

# 3.窗口加载事件
window.onload=()=>{}
window.addEventListener('load',()=>{})
窗口(页面)加载事件，当文档内容完全加载完成时会触发该事件(包括图像，脚本文件，CSS文件等)，并调用该事件的回调函数
触发条件：1.a标签链接跳转 2.刷新 3.前进后退

pageshow事件 在页面显示时触发(比如在火狐浏览器内，有个往返缓存的特点，此时前进后退无法触发onload事件，所以使用pageshow事件)
经测试，火狐会前进后退实际会执行onload事件

document.addEventListener('DOMContentloaded',()=>{})
DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等

如果页面图片很多，加载完图片比较耗时，此时推荐使用DOMContentLoaded事件

# 4.调整窗口大小事件
window.addEventListener('resize',()=>{})
窗口大小每次改变自动触发

# 5.定时器
setTimeOut(()=>{},延迟时间) 设置一个定时器，时间到后执行回调函数，只执行一次
可以同时定义多个定时器，定时器回调函数到期自动执行无需手动调用

clearTimeOut(timeOutID) 清除定时器

setInterval(()=>{},间隔时间) 设置一个定时器，每间隔多少时间就执行一次，可以同时定义多个

clearInterval(timeOutID) 清除定时器

# 6.JS同步异步
1.同步任务都在主线程上执行，形成一个执行栈
2.异步任务通过回调函数实现，放在一个异步任务队列里面
执行流程：
先执行同步执行栈中的同步任务
异步任务(回调函数)放入任务队列中
执行栈中所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务的回调函数
异步任务的回调函数进入执行栈开始执行，执行完成后再次读取任务队列，看是否有新的回调函数
主线程不断获取任务、执行任务、获取任务、执行任务，这就是事件循环(event loop)

# 7.location对象
window对象给我们提供了一个location属性用于获取或设置窗体url，并且可以解析url
因为这个属性返回的是一个对象，所以我们成为location对象

1.URL是互联网上标准资源的地址。互联网上每个文件都有一个唯一的URL，它包含的信息指出文件位置以及浏览器如何处理它
组成：
protocol 通信协议：http、ftp、maito等
host 主机名(域名)
port 端口
path 路由
query 参数 以键值对形式&符号分开
fragment #后面的内容 常见于链接锚点

2.location对象属性 location.href 返回整个URL location.host 返回主机域名 port返回端口号
pathname 返回路径 search 返回参数 hash 返回#后面片段
重点：href 和 search

3.location常见方法
location.assign() 跟href 可以重定向页面(跳转页面)
location.replace() 替换当前页面
location.reload() 重新加载页面相当于F5刷新 里面参数为true就是强制刷新(不加载缓存直接从服务器读取)

# 8.navigator对象
navigator对象包含有关浏览器的信息，它有很多属性
最常见的是userAgent 该属性可以返回由客户机发送服务器的uer-agent头部的值

# 9.history对象
history对象 与浏览器历史记录进行交互 该对象包含用户在浏览器窗口中访问过的URL
forward() 前进功能
back() 后退功能
go() 前进后退功能

# 10.PC端网页特效
1.offset系列属性
element.offsetParent 返回该元素具有定位的父级元素 如果父级都没有定位则返回body
offsetTop/Left 返回元素相对带有定位属性父元素上方/左方偏移
offsetWidth/Height 返回自身包括padding、边框、内容区的宽度/高度，返回数值不带单位
offset与style属性的区别：offset能获得所有的样式，style只能获得行内样式表的样式
获取元素大小使用offset，改变元素样式使用style

2.client系列
clientTop/Left 返回元素上边框/左边框大小
clientHeight/Width 返回元素包括padding、内容区的长宽，不含边框，返回数值不带单位

3.立即执行函数
主要用于创建一个独立作用域,里面所有变量都是局部变量
一般来说JS都要先声明函数再调用执行它，而立即执行函数不需要调用，直接执行
写法一 (函数)()
写法二 ((函数)())

4.scroll系列
scrollTop/Left 返回被卷去的上侧/左侧距离 返回数值不带单位
scrollWidth/Height 返回自身实际高度，不含边框，返回数值不带单位
(和clinet的区别在于盒子不够内容超出时，clinet返回盒子的宽高而scroll会把超出部分的内容一起返回)

三个系列主要分别就是带不带边框和内容超出的部分的长度是否显示

# 11.动画函数
1.JS动画原理就是通过setInterval不断移动盒子
加判定条件关闭定时器，注意此元素需要添加定位才能使用element.style.left/top等

# 12.移动端网页特效
1.触屏事件
touchstart 手指触摸到一个DOM元素时触发
touchmove 手指在一个DOM元素上滑动时触发
touchend 手指从一个DOM元素上移开时触发
2.触摸事件对象
touches 正在触摸屏幕的手指的列表
targetTouches 正在触摸当前DOM元素的手指列表
如果侦听的是一个DOM元素，他们两个是一样的
changedTouches 手指状态发生了改变的列表，从无到有，从有到无变化

最常使用的是e.targetTouches[0]，触摸的第一根手指,里面含有坐标等参数

# 13.本地存储
1.特征
数据存储在浏览器中
设置、读取方便，页面刷新不丢失数据
容量较大
只能存储传统的值，可以将对象JSON.stringfy()编码后存储

2.window.sessionStorage
生命周期为关闭浏览器窗口
在同一个窗口页面下数据可以共享
以键值对的形式存储
sesstionStorage.setItem(key,value) 保存数据
sesstionStorage.getItem(key) 获取数据
sesstionStorage.removeItem(key) 删除数据
sesstionStorage.clear() 移除所有数据

3.window.localStorage
永久存在，除非手动删除
可以多窗口共享
以键值对的形式存储
API同上

二、DOM操作

2.1 概念

	DOM （Document Object Model）是指文档对象模型，通过它可以访问HTML文档的所有元素

	既然DOM操作是通过js代码来操作标签 所以我们需要先学习如何查找标签之后才能给标签绑定一些JS代码(DOM操作)

2.2 查找标签

/*
1.js中变量名的命名风格推荐是驼峰体
2.js代码查找到的标签如果需要反复使用可以用变量接收 规律 xxxEle
*/
// 结果就是标签对象本身
document.getElementById('')
// 结果是数组里面多个标签对象
document.getElementByClassName('')
document.getElementByTagName('')

// 父节点标签元素
parentElement
// 所有子标签
children
// 第一个子标签
firstElementChild
// 最后一个子标签
lastElementChild
// 下一个兄弟标签
nextElementSibling
// 上一个兄第标签
previousElementSibling

2.3操作节点

// js代码创建一个标签
let aEle = document.createElement('a')
// js代码操作标签属性 (只能添加默认属性)
aELe.href = 'url'
// 兼容默认属性和自定义属性
setAttribute()
getAttribute("")
removeAttrubute("")
// js代码操作标签文本
aELe.innerText = '文本信息'
// js代码查找div标签并将a追加进div内部
let divEle = document.getElementByTagName("div")[0]
divEle.appendChild(aEle)

// 获取标签内部所有的文本内容
.innerText
// 替换/设置标签内部的文本（不识别标签语法）
.innerText = '文本信息'
// 获取标签内部所有的标签 （包括文本）
.innerHTML
//  替换/设置标签内部的文本（识别标签语法）
innerHTML = '文本信息'

2.4 获取值的操作

// 针对用户输入和用户选择的标签
	标签对象.value
// 针对用户上传的文件数据
	标签对象.files
	fileList [文件对象、文件对象、文件对象]
	标签对象.files[0]  文件对象

2.5 class与css操作

// 1、 js操作标签css样式
标签对象.style.属性名
// 2、js操作标签class属性
标签对象.classList.add()
标签对象.classList.contains()
标签对象.classList.remove()
标签对象.classList.toggle()

2.6 事件

// 事件可以简单的理解为通过js代码给html标签绑定一些自定义的功能
// 常见事件

// 1. 单击事件
onclick 
// 2. 元素获取焦点
onfocus
// 3. 元素失去焦点
onblur
// 4. 文本域内容被更改
onchange

// 绑定事件的多种方式
// 方式1
<button onclick=''> </button>
// 方式2
<input type="button" value="按钮" id='but'>
    <script>
		function showMsg(){
            let msg = prompt('Are you ok?');
            console.log(msg)
        }
        
        let inputEle = document.getElementById('but');
        inputEle.onclick = function(){
            alert("where is who?")
        }
	</script>
<!--事件函数中的this关键字-->
<!--
	this指代的就是当前被操作的标签对象本身
	如果事件函数内有多层嵌套，那么最好在一开始就用变量存储一下，防止后续变化

onload方法
	xxx.onload 等待xxx加载完毕之后在执行后面的代码
-->

三、事件实战案例

<input type="text" value="username：" id="userName">
<script>
	let inputEle = document.getElementById('userName')
    inputEle.onfocus = function(){
        this.value = ''
    }
    inputEle.onblur = function(){
        this.value = 'username:'
    }
</script>

<p>
    username:<input type="text" id='userName'>
    <span style='color: red'></span>
</p>

<p>
    password:<input type='password' id='passWord'>
    <span style='color: orange'></span>
</p>

<button id='suBtn'>
    登录
</button>

<script>
//1.查找提交按钮的标签、
    suEle=document.getElementById('suBtn')
// 2.给按钮标签绑定点击事件
    subEle.onclick = function(){
        // 3.查找获取用户输入的标签并获取数据
        let userNameEle = document.getElementById('userName')
        let passWordEle = document.getElementById('passWord')
        if(userNameEle.value === 'jason'){
            userNameEle.nextElementSibling.innerText = '用户名不能是jason'
        }
        if(passWordEle.value ==='123'){
            passWord.nextElementSibling.innerText = '密码不能是123'
        }
    }
</script>

<!--省:-->
<select name="" id="province">
    
</select>

<!--市:-->
<select name="" id="city">
    
</select>

<script>
	let data = {
        "河北": ["廊坊市", "邯郸市"],
        "北京": ["朝阳区", "海淀区"],
        "山东": ["威海市", "烟台市"],
        "安徽": ["芜湖市", "合肥市"],
        "上海": ["浦东新区", "静安区"]
    }
    
// 提前查找好省和市的select标签
    let provinceEle = document.getElementById("province");
    let cityEle = document.getElementById('city');
    // 获取所有省份信息
    for (let pro in data) {
        // 创建好option标签
        let proOpEle = document.creatElement('option');
        // 添加文本以及属性
        proOpEle.innerText = pro;
        proOpEle.setAttribute('value',pro)
        // 将创建好的option标签添加到省的下拉框中
        proSeEle.appendChild(proOpEle)
    }
    // 给省标签绑定文本域变化事件  onchange
    proOpEle.onchange = function(){
        // 每次操作市之前清空市的数据
        cityEle.innerHTML = '';
        // 获取用户选择的省信息，根据省信息获取市信息
        let targeyProData = this.value;
        let cityDataList = data[targetProData];
        // 循环获取每一个市信息，创建option标签，添加到市下拉框中
        for (let i = 0; i < cityDataList.lenth; i++){
            let cityOpEle = document.createElement('option');
            cityOpEle.innerText = cityDataList[i];
            cityOpEle.setAttribute('value',cityDataList[i]);
            cityEle.appendChild(cityOpEle)
        }
    }
</script>

四、DOM总结

 1.DOM （Document Obejct Model），是W3C推荐的处理可扩展标记语言的标准编程接口，通过DOM接口改变网页样式等
DOM树：
文档：一个页面就是一个文档，DOM中用document表示
元素：页面中所有标签都是元素，DOM中使用element表示
节点：网页中的所有内容都是节点（标签，属性等），DOM中用node表示
DOM把以上所有内容都看作对象

console.dir()打印里面的对象

# 2.一些获取元素的方法
getElementById() 通过id名得到某元素

getElementsByTagName() 返回带有指定标签名对象的集合 伪数组形式存储(即便只有一个元素或者没有对应元素也是以伪数组形式存储)
element.getElementsByTagName() 从指定元素获取元素内部标签对象的集合


getElementByClassName() 通过类名获得某元素集合

querySelect 返回指定选择器(id选择器，类选择器，标签选择器)的第一个元素对象
document.querySelect(".div1")

querySelectAll() 返回指定选择器的所有元素对象（伪数组）

# 3.获取特殊元素的方法
document.body 获取body元素
document.documentElemeny 获取html元素

# 4.事件处理
事件是可以被JS检测到的一种行为
事件由3部分组成 事件源 事件类型 事件处理程序
事件源：事件被触发的对象
事件类型：如何触发
事件处理程序： 通过一个函数赋值的方式完成

执行事件的步骤
1.获取事件源
2.注册事件（绑定事件）
3.添加事件处理程序

除了onclick还有许多鼠标事件，可以自行查找相关API

# 5.操作元素
1.元素里面的innerHTML和innerText属性可以改变元素内部的内容
innerHTML和innerText的区别：
前面一个识别html标签 后一个不识别如div.innerHTML="<p>你好</p>"
前面一个读取时会把HTML标签一起读取下来 后一个读取时只读取文字

2.改变元素其他属性
title src id 等等都可以改变

3.操作表单元素属性 利用DOM可以操作的表单元素的属性：type、value、checked、selected、disabled

4.操作元素大小、颜色、位置等(更改样式产生的是行内样式，权重比style高)
element.style 行内样式操作 （样式比较少或功能简单使用style属性）
element.className 类名样式操作（其实就是先定义好类的样式，再通过JS改获取的元素的类名让它拥有样式）
示例：element.style.backgroundColor="red"

5.获取元素的属性
element.属性
element.getAttribute('属性') (可以用来获取自定义属性)
element.setAttribute('属性','值') (用来更改自定义属性,原生属性也能改)
element.removeAttribute('属性')(移除属性)

操作元素隐藏显示 在于元素的style的display属性

表单元素的获取焦点和失去焦点事件 onfocus onblur

总结：操作元素是DOM的核心部分
1.操作元素内容
2.操作普通元素属性
3.操作表单元素属性
4.操作元素样式 className element.style

自定义属性：
H5规定自定义属性以data-开头作为属性名并且赋值 如：data-index=1
设置自定义属性可以在标签上添加或者element.setAttribute()
H5新增获取自定义属性的方法 element.dataset.自定义属性(记得去除data-) 如 div.dataset.index

# 6.DOM 节点操作
获取元素有两种方式：
利用DOM提供的方法获取元素 利用节点层级获取元素

利用节点父兄子关系获取元素：逻辑性强，兼容性稍差
网页中所有内容都是节点

节点一般拥有nodeType nodeName nodeValue三个属性 nodeType是规定好的
元素节点 nodeType为1
属性节点 nodeType为2
文本节点（包含空格换行等） nodeType为3
实际操作时通常只用的是元素节点

1.element.parentNode 拿到离元素最近的父节点

2.element.childNodes 拿到元素所有的子节点包括文本节点(一般不提倡)
element.children （非标准）拿到元素的所有子元素节点

3.element.firstElementChild 拿到子节点的第一个元素节点
element.lastElementChild 最后一个元素节点（这两个API只支持IE9以上）
实际开发中我们使用element.children[0]和element.children[element.children.length-1]拿到第一个或最后一个元素节点

4.element.nextSibling 下一个兄弟节点
element.nextElementSibling element.previousElementSibling 下一个或上一个元素兄弟节点

5.document.createElement("")创建一个节点
element.appendChild(child)添加一个子节点
element.insertBefore(child,指定元素) 指定元素指某个已经存在的子元素 将child插在它的前面

6.node.removeChild(parent
.) 删除一个子节点并返回此节点

7.node.cloneNode() 复制一个节点并返回此节点 括号参数为空 则只拷贝此节点，不拷贝里面的内容
括号内部为true，则将节点本身以及内部子节点一起拷贝

三种动态创建元素的区别
document.write() 会导致页面重绘 element.innnerHTML 创建多个元素效率会更高 document.createElement("") 第三种效率最好使用最多

## DOM重点核心
W3C组织推荐的处理可标记语言的标准编程接口，W3C已经定义了一系列的DOM接口，通过操作这些接口可以改变网页的内容和样式
对于DOM操作，我们主要针对于元素的操作，实现创建、增、删、改、查、属性操作、样式操作、事件操作

# 7.事件高级
1.注册事件的两种方式 ：传统方式和方法监听注册事件
传统注册方式 <button onlick="alert('你好')">或onlcik=...
特点 注册事件的唯一性 后一个注册事件会覆盖前一个

2.方法监听注册方式
特点 同一个元素同一个事件可以注册多个监听器,可以触发多个事件
elementTarget.addEventListener('type',listener[,useCapture])
type 为类型
listener 为事件处理函数
useCapture 为一个布尔值 默认为false

3.删除事件(解绑事件)
传统方式 btn.onclick=()=>{alert("1);btn.onclick=null;}
方法监听删除事件 elementTarget.removeEventListener('type',listener[,useCapture])

4.DOM事件流
事件流描述的是从页面中接收事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流
捕获阶段 很少使用
冒泡阶段
onclick和attachEvent只能得到冒泡阶段 addEventListener第三个参数如果是true，表示在事件捕获阶段调用事件处理程序
如果是false 表示在事件冒泡阶段调用事件处理程序

onblur onfocus onm ouseenter onmouoseleave没有冒泡阶段

5.事件对象
div.onclick = funtion(event){}
event就是一个事件对象 写到侦听函数的小括号里面
事件对象只有有了事件才会存在 是系统给我们自动创建的 不需要我们传递参数
事件对象 我们事件的一系列相关数据的集合 跟事件相关的 鼠标事件就包含了鼠标坐标等 键盘事件就包含了键盘事件的信息

事件对象的兼容性问题 ie678通过 window.event兼容性写法

事件对象的常见属性和方法
e.target 返回触发事件的对象（元素）
e.type 返回触发事件的类型 如click
e.preventDefault() 阻止事件默认行为，如不让链接跳转
e.stopPropagation() 阻止冒泡

6.事件委托
利用事件冒泡的原理，如多个子元素含有事件，直接将事件绑定在父元素上，并且使用父元素的事件对象来区分每个子元素触发时的不同事件处理效果

7.常用鼠标事件
onclick
onmouseover(鼠标经过触发) 和onmouseenter事件的区别：
mouseover经过自身盒子会触发，经过子盒子还会触发，mouseenter只会在经过自身盒子时触发，原因：一个会冒泡另一个不会
onmouseout(鼠标离开触发)
onfocus(获得鼠标焦点)
onblur(失去鼠标焦点)
onmousemove(鼠标移动)
onmouseup(鼠标弹起)
onmousesedown(鼠标按下)

contextmenu(控制何时显示鼠标右键菜单)，主要和阻止默认事件共同使用阻止某段话被右键打开菜单等
selectstart(鼠标开始选中)，可以完全阻止某个元素内容被选中

8.鼠标事件对象
e.clientX/Y 鼠标相对于浏览器窗口可视区的X/Y坐标
e.pageX/Y 鼠标对于文档界面的X/Y坐标(重要)
e.screenX/Y 鼠标对于电脑桌面的X/Y坐标

跟随鼠标移动的人物案例：
用mousemove为document注册鼠标移动事件，用事件对象拿到鼠标坐标，并同时更改图片的绝对定位值

9.常用键盘事件
onkeyup 某个键盘按键被松开时触发
onkeydown 某个键盘按键被按下时触发
onkeypress 某个鼠标按键被按下时触发(不识别功能键如ctrl shift等)
在键盘事件对象中可以拿到对应的键，e.key拿到键 e.keyCode拿到键对应的ASCII码值