BOM（browser object model）浏览器对象模型
window
每打开一个浏览器，就会创建一个window对象（全局对象），所有bom的顶层对象就是window
window 可以直接使用全局变量（必须var声明）和全局函数（自变量函数）。
全局属性和window属性的区别
-
在删除的时候，可以删除（以window属性进行创建的变量），但是无法删除全局属性（var，）
例如
var i=3；
window.name=10;
delete.window.name 可以删除
delet.var.i不可以删除
window的属性
-
window.screenX; (当前浏览器离X轴屏幕的距离)；window.screenY;((当前浏览器离X轴屏幕的距离)；
-
window.innerwidth;(当前浏览器的高)；window.innerhight;(当前浏览器的宽)；浏览器的尺寸不包含控制台。
-
window.outerwidth;(当前浏览器的高);window.outerhight;(当前浏览器的宽)；浏览器的尺寸包含控制台。
-
window.pageXoffset;当前浏览器水平滚动条的位置；
window.pageYoffset;当前浏览器垂直滚动条的位置；多用与广告和回到顶部等用处。
window的方法
-
提示框 window.alert("");
-
确定框 window.confirm("");
-
输入框 window.prompt("");
-
打开一个新窗口
window.open（"参数一","参数二","参数三","参数四",""）
参数一：打开新页面地址
参数二：以什么方式打开。默认新页面打开（blank），当前页面打开（self）.
参数三：设置新窗口 的尺寸。
参数四：是否替换当前的历史记录（true，false）。
关闭新窗口
winEle.close(); 关闭页面。
设置新页面的展示位置
winEle.moveTo(200,200) 起点是（0，0）点起，第一个是X偏移量，第二个Y偏移量；
winEle.moveBy(200,200);起点是原来的位置，新页面出现。
时间函数
功能：在设定的时间内，重复执行同一段代码。
setInterval（参数一，参数二，参数三，..）。
格式：
参数一：调用函数或者代码款。
参数二：以多长的时间执行参数一，时间单位毫秒（）
参数三以后的参数，都是给函数快传参。
关闭时间函数
clearInterval（变量）。
倒计时时间函数
当到达设置的时间后，执行，参数一的代码块。
格式：
setTimeout（参数一，参数二）；
参数一，调用函数或者代码块
参数二，以多长的时间结束。
BOM与DOM的关系
子元素包含：
-
screen。
-
navigator
-
location
-
history
-
document
-
-
1，screen（获取屏幕尺寸）不包含任务栏。
let screenwidth=screen.availwidth 获取屏幕的宽。
2，navigtor（获取浏览器的名字）
let BName=navigator.appName 获取当前浏览器的名字
let BVer=navigator.appVersion 获取当前浏览器的版本号
let NLang=navigator.languge; 获取浏览器当前的语言
3，Location
let info1=location.search 获取地址栏？以后的信息（用户提交的信息）
let info2=location.href 获取地址栏所有的信息
let info3=location.port 获取当前端口号
let info4= location.hash;获取锚点的信息。
location 的方法
replace：加载新页面，换成新页面（公用一个窗口）。
replace是没有返回功能的 lacation.replace("地址")
assign：加载新页面，换成新页面（不是共同一个窗口）
assign是有返回功能的 lacation.assign("地址")、
history
后一页
history.foward()
前一页
history.back();
history.go(-1):前一页
history.go(0):当前页面
history.go(1):后一页
history.length 当前浏览器历史记录条数
快速查询节点
1，通过id值获取元素节点
document.getElementById("id值")。
2，通过标签名获取元素节点
document.getElementByTagName（“标签值”）
3，通过name值获取元素节点
document.getElementByName（“标签名字”）
4，通过class值获取元素节点
document.getElementClassName（class值）
2-4都是0到多个 获取到的是数组形式。需要具体的值，要加下标获取
HTML5新增
通过css选择器来获取第一个满足的节点
document.querySelector("")
通过css选择器来获取所有满足的节点
document.querySelectorAll("")
HTML5新增的问题：删除某个元素和添加某个元素 不是实时的效果 ie8以上不支持
DOM（增，删，改，查）
查的部分
关系层次的查询
1，查找父节点： (当前节点.parentNode)
2,查找兄弟节点
方式一( 会出现text的文本节点 例如：回车)
向前查找兄弟节点： 当前节点.previousSibling
向后查找兄弟节点: 当前节点.nextSibling
方式二( 不 会出现text的文本节点 例如：回车)
向前查找兄弟节点： 当前节点.previousElementSibling
向后查找兄弟节点: 当前节点.nextElementSibling
3,查找子节点
当前节点.children
4,
查找第一个子节点
方式一
当前节点.firstChildren
当前节点.lastChildren
方式二
当前节点.firstElementChildren
当前节点.lastElementChildren
新增的部分
步骤：1，先创建一个元素节点。2，元素节点添加内容（文本节点）。3，新增节点的存放位置。
document.creatElement('"p"') 创建一个元素
document.creatTextNode'"123"') 创建一个文本
添加元素（添加的内容放在最后一个元素节点）； 当前节点.appendChild(参数) 参数一：添加的内容。
添加一个元素到任意位置：
步骤：1，创建新元素。2.获取父元素。3.获取以有元素。4，把新元素添加到已有元素之前。
格式： 父元素.insertBefore( 新元素，已有元素)。
删除的部分
步骤：1，获取要删除的元素。2，获取父元素的节点。
格式： 父元素节点.removeChild(要删除的节点)
替换的部分（replace）
步骤：1，获取父元素。2，获取要替换的节点。3，创建新元素节点。
格式：父元素节点.replaceChild(参数一，参数二) 参数一：新节点 参数二：要替换的节点
快速替换元素内容
步骤：先获取要替换的内容的元素节点，2，进行内容替换。
格式一： 元素节点.innerText=""
格式二：元素节点.innerHTML="";
innerText与innerHTML 的区别
.innerHTML是可以解读HTML的代码
innerText替换文本
将整个页面替换： document.body.inner="";
克隆节点
格式：复制节点.cloneNode(布尔值)
深克隆（包含复制节点的子节点）
g格式：复制节点.cloneNode(ture)
浅克隆（只复制元素节点 ，子节点不复制）
g格式：复制节点.cloneNode(false)
属性节点（AttributNode）
如何获取属性节点的值
格式：元素节点.getAttributNode("属性名") 获取不存在的属性值 ，会得到null
设置元素节点的值（set）
格式：元素节点.setAttributNode(参数一，参数二) 参数一：属性名，参数二：属性值。
对元素属性的新增
元素节点.setAttributNode(参数一，参数二) 参数一：新增的属性名，参数二：新增属性值。
对属性节点的删除
当前节点.removeAttribut（“属性”）
快速对属性的操作方式。
当前节点.className="属性值"
Type="属性值" id="属性值"
由于class在JS是关键字，无法直接使用，为了能够修改元素class的属性，必须提供className进行修改
label中的for 不能进行更改，必须提供htmlFor进行设置
"属性值" data_xx开头
格式： 当前节点.data.XX="属性值"
来源：https://www.cnblogs.com/feng-lin/p/12446786.html