BOM: Browser Object Model

什么是: 专门操作或访问浏览器软件的一批函数和对象何时: 只要想获取浏览器软件的信息，或操作浏览器窗口时如何: 包括:

1个最大的对象: window

3个角色
1. 代替ECMAScript中的global充当全局作用域对象。

所以，所有我们自己声明的全局变量和全局函数默认都是在window中。

2. 包含了所有ECMAScript，DOM和BOM的函数和对象:

比如: window.Arraywindow.documentwindow.alert

**3. 代表着当前正在打开的浏览器窗口**

(1). 获得窗口大小: 2组:
a. 完整窗口大小: window.outerWidth   .outerHeight小技巧: 如何判断浏览器窗口被最小化:window.outerHeight<36px
b. 仅文档显示区大小: window.innerWidth  .innerHeight
(2). 监控窗口大小变化: window.onresize=function(){ … }
(3). 控制窗口滚动条的滚动: window.scrollTo(0, 垂直方向滚动到的位置)window.scrollBy(0, 垂直方向上滚动距离的变化量)
(4). 监控窗口的滚动: window.onscroll=function(){//获得当前页面滚动过的距离var scrollTop=document.documentElement.scrollTop||document.body.scrollTop}
(5). 打开和关闭窗口:window.open()window.close()

打开和关闭窗口:

1. 打开新窗口: 4种需求:

1. 在当前窗口打开，可后退:html: <a href="url" target="_self">js: window.open("url", "_self")
2. 在当前窗口打开，禁止后退:js: location.replace("新url")
3. 在新窗口打开，可打开多个:html: <a href="url" target="_blank">js: window.open("url", "_blank")
4. 在新窗口打开，只能打开一个:html: <a href="url" target="自定义窗口名">js: window.open("url", "自定义窗口名")

原理:

1. 每个窗口在内存中都有一个name属性来唯一标识这个窗口
2. 浏览器规定: 相同name名的窗口，只能打开一个。后打开的同名窗口会覆盖先打开的同名窗口。
3. 指定name属性: 3种:(1). _self: 自动获得当前窗口自己的name名，作为新窗口的name名。因为同名窗口只能打开一个，所以可实现在当前窗口打开。(2). _blank: 不指定窗口的name名，浏览器就会自动给每个窗口随机分配窗口名。因为随机分配的窗口名肯定不重复，所以可实现打开多个窗口的效果。(3). 自定义name名: 这个名称的窗口，只能打开一个！
4. 如何指定name属性: <a href="url" target="新窗口的name名"window.open("url", "新窗口的name名")
5. 冲突: 一定不要用"name" 当变量名，会和BOM中的window.name属性冲突！

三. history:

1. 什么是history: 当前窗口中保存成功访问过的url的历史记录数组。
2. 何时: 只能用于前进和后退
3. 如何: history.go(1)  前进一步history.go(-1) 后退一步history.go(0)  刷新

四. location:

1. 什么是location: 专门保存浏览器地址栏信息，并提供跳转操作的函数的对象
2. 何时: 获取浏览器地址栏信息，或执行跳转操作时
3. 获得浏览器地址栏信息: location提供了一系列属性，来分段获得浏览器地址栏中url的各个部分信息
.href 完整url
.protocol 协议
.host 主机名+端口号
.hostname 仅主机名
.port 端口号
.pathname 相对路径
.hash 锚点地址
.search 查询字符串
4. 执行特殊的跳转操作:
(1). 也可像window.open()一样实现在当前窗口打开，可后退：
location.assign(“新url”)
location.href=“新url”
location=“新url”
(2). 可实现禁止后退: location.replace(“新url”)
(3). 刷新: 2种:
a. 普通刷新: 优先使用浏览器本地缓存中的资源文件来刷新。

浏览器缓存:
浏览器为了避免反复下载重复的文件，在每次下载.html、.css
、.js、图片等静态文件时，都会在本地硬盘开辟一块区域，专门保存本次下载的静态文件。当用户频繁刷新时，不用频繁去服务器下载文件，提高加载速度，并且减轻服务器负担。
只有当要请求的文件，缓存中没有，或者过期时，浏览器才会被迫从服务器下载新的资源。

包括: history.go(0) location.reload()
b. 强制刷新: 跳过浏览器缓存，总是从服务器端获取新资源
何时: 当网页中包含实时数据时: 股票价格，天气预报，生产监控
如何: location.reload(true)
强迫

五. 事件:

1. 什么是事件: 浏览器自动触发的，或用户手动触发的页面元素内容或状态的改变
2. 什么是事件处理函数: 当事件发生时希望自动执行的函数
3. 什么是事件绑定: 提前将事件处理函数赋值给元素的事件属性。当事件发生时，浏览器会找到这个元素的事件属性，自动执行提前保存在事件属性上的事件处理函数。
4. 如何绑定事件: 3种:
(1). 在HTML中绑定:

<元素 onclick="函数()">
function 函数(){…
}

问题: 不符合内容与行为分离的原则，不便于维护。

(2). 在js中，一个事件只能绑定一个处理函数

a.
元素.onclick=function(){… …}

b. 问题: 因为采用赋值方式，保存事件处理函数，所以，一个事件属性上只能绑定一个处理函数。
如果希望一个事件上能绑定多个处理函数，又采用赋值方式，则后赋值的处理函数，
会覆盖先赋值的处理函数。事件属性上只能保存一个处理函数。

c. 原理:1). btnShoot.onclick=function(){…}也会添加事件监听对象。每个事件监听对象中包含三个值: 元素是谁，什么事件，处理函数是什么。也会将事件监听对象添加到浏览器的事件监听对象数组中2). 当事件发生时，浏览器使用遍历的方式，用触发事件的元素名和事件名作为查找条件，去事件监听对象数组中查找符合条件的监听对象，执行其处理函数。找到几个匹配的，就执行几个处理函数。3). 当第二次btnShoot.onclick=function(){ … }时，浏览器会先查找是否已经有了btnShoot元素上的click事件监听对象。如果找到，就不再重复创建监听对象。而仅仅用新函数覆盖原监听对象中的处理函数。结果，只有一个新的处理函数可以留下来。(3). 在js中，一个事件可以绑定多个处理函数：

添加事件监听对象的方式:

a. 事件监听对象: 集中保存一个事件的元素、事件名和处理函数的一个对象。
b. 如何添加事件监听对象:
元素.addEventListener("事件名", 处理函数)//添加事件 监听
强调: 1).事件名，不要带on前缀！2). 处理函数不要加()，因为处理函数不是立刻执行！只是暂时赋值给事件属性，保存起来。只有当用户触发事件时，才调用事件处理函数。
c. 原理: 1). addEventListener()无论任何情况下都会添加事件监听对象。所以，每调用一次addEventListener()就会创建一个新的事件监听对象，保存当前元素，当前事件名以及当前新处理函数。然后，再将新的事件监听对象加入浏览器的事件监听对象数组中。2). 因为浏览器每次触发事件时，都会完整遍历事件监听对象数组。如果数组中包含多个该元素的该事件的处理函数监听对象，则会触发多个处理函数。

d. 移除事件监听: 1). 元素.removeEventListener("事件名",原处理函数)2). 问题: 移除事件监听，必须使用原处理函数的引用才行。不能用匿名函数。因为function是创建一个新函数的意思。两个匿名函数就算写的完全一样，可是也不是同一个函数对象。所以，如果添加事件监听时，使用的是匿名函数，则移除事件监听时，是不可能找到原处理函数对象的。3). 解决: 只要一个事件处理函数可能被移除，就不应该用匿名函数绑定。应该用有名称的函数来绑定。这样，在移除时，才能通过函数名变量中的地址，找到原处理函数。4). 强调: 一旦使用有名称的函数添加事件监听，会导致该监听对象只能添加一次。因为浏览器规定，事件监听数组中不能有完全相同的两个监听对象(元素相同，事件名相同，处理函数地址都是同一个函数地址！)

5. 事件模型:

(1). 什么是事件模型: 事件模型是指从事件发生开始，到所有处理函数执行完，所经历的过程
(2). 包括: 3个阶段
a. 捕获阶段: 从顶级父元素<html>，到当前出发事件的元素，进行遍历。记录各级父元素上绑定的事件处理函数
b. 目标触发: 优先触发目标元素上的事件处理函数:
目标元素: 我们心里实际想点的那个元素。
c. 冒泡阶段: 从当前目标元素向上，依次触发捕获阶段记录的各级父元素上的处理函数。

6. 事件对象:

(1). 什么是事件对象: 当事件发生时自动创建的，保存所有事件信息的对象。
(2). 何时: 2个场景
a. 要获得事件相关的信息时
b. 要改变事件的默认行为时
(3). 如何获得事件对象: 不用自己创建！自动创建的！
当事件发生时，事件对象总是作为处理函数的第一个实参值自动传入处理函数中，所以，我们只要在定义处理函数时，添加第一个形参，等着接就好了！
//当事件发生时  event
//               ↓ 信任
btn.onclick=function(e){//e=event对象
}

(4). 事件提供的属性和方法:

a. 取消冒泡/停止漫延: e.stopPropagation()//停止  漫延
强调: e.stopPropagation()不会阻止自己的代码执行。只会阻止自己的父元素上的处理函数执行。
b. 利用冒泡/事件委托/事件代理(delegate)1). 优化: 尽量减少事件监听对象的个数。因为浏览器查找事件监听对象是采用遍历方式。如果监听对象很多，会导致遍历速度慢，进一步会导致事件响应慢。2). 何时用事件委托: 如果多个平级子元素需要绑定相同的事件时，都必须用事件委托来优化。3). 如何: 3步: i. 将事件只绑定在父元素上一份即可，所有子元素通过冒泡共用父元素上的一个处理函数问题: 因为事件是绑定在父元素上的。所以执行也是在父元素上执行。所以，父元素上事件处理函数中的this，早就不指子元素了。而是统一指父元素。但是我们又希望获得实际点击的那个目标元素，执行不同的操作。ii. 解决: 用e.target代替thise.target是当事件发生时牢牢记住目标元素的事件属性，且不会随冒泡而改变。问题: e.target不总是想要的元素。比如: 点在父元素上，或点在哪些装饰性的子元素上，也会触发事件，导致错误。iii. 解决: 在开始编写正式逻辑之前，必须先验证e.target是否想要的！只要e.target是想要的，才能继续执行正常的逻辑。否则，就什么也不干！
c. 阻止默认行为: (1). HTML中有些元素带有默认行为:i. <a href="#xxx">点击后会擅自修改地址栏，在url结尾加#xxx。ii. <input type="submit">点击后会自动以form方式提交表单。(2). e.preventDefault()//阻止  默认
d. 鼠标位置: 3组:(1). 相对于屏幕左上角的距离e.screenX   e.screenY(2). 相对于文档显示区左上角的距离e.clientX    e.clientY(3). 相对于当前事件所在的元素左上角的距离e.offsetX    e.offsetY

DOM 增删改查:

1. 查找:

(1). 不需要查找就可直接获得的元素document.documentElement  ——  <html>document.headdocument.bodydocument.forms[i]
(2). 按节点间关系查找：元素.parentNode元素.children元素.firstElementChild元素.lastElementChild元素.previousElementSibling元素.nextElementSibling
(3). 按HTML查找: var 元素=document.getElementById("id")var 类数组对象=父元素.getElementsByTagName("标签名")var 类数组对象=父元素.getElementsByClassName("class名")var 类数组对象=document.getElementsByName("name名")
(4). 按选择器查找：var 元素=父元素.querySelector("选择器")var 类数组对象=父元素.querySelectorAll("选择器")

2. 修改:

(1). 内容: 元素.innerHTML  元素.textContent  元素.value
(2). 属性:
a. 字符串类型的HTML标准属性:1). 核心DOM: 元素.getAttribute("属性名")元素.setAttribute("属性名","值")2). HTML DOM: 元素.属性名特例:  class -> classNameHTML5: 元素.classList.add()元素.classList.remove()
b. bool类型的HTML标准属性:1). 不能用核心DOM2) 只能用元素.属性名
c. 自定义扩展属性:1). 只能用核心DOM2). 不能用.修改3). HTML5: <元素  data-自定义属性="值">元素.dataset.自定义属性
(3).样式: 1). 修改样式: 元素.style.css属性名="值"元素.style.cssText="属性名:值; 属性名: 值; …"2). 获取样式: var style=getComputedStyle(元素)style.css属性

3. 添加元素:

(1). 添加一个元素: 3步:
var a=document.createElement("a")
a.href="http://tmooc.cn"
a.innerHTML="go to tmooc"
父元素.appendChild(a);
或
父元素.insertBefore(a, 现有元素)
或
父元素.replaceChild(a, 现有元素)
(2). 同时添加多个元素: 借助文档片段
var frag=document.createDocumentFragment();
frag.appendChild(子元素)
父元素.appendChild(frag)

4. 删除: 父元素.removeChild(子元素)

5. HTML DOM:

(1). var img=new Image();
(2). select 和 option:
a. select:  .selectedIndex  .options    .length
b. option: var opt=new Option(内容, 值)
(3). table:
a. table管着行分组: 1). 添加: var 行分组=table.createTHead()  .createTBody()   .createTFoot()2). 删除: table.deleteTHead()  .deleteTFoot()3). 获取: table.tHead   table.tFoot    table.tBodies[i]
b. 行分组管着行: 1). 添加: var tr=行分组.insertRow(i)2). 删除: table.deleteRow(tr.rowIndex)3). 获取: 行分组.rows[i]
c. 行管着格: 1). 添加: var td=tr.insertCell()2). 删除: tr.deleteCell(i)3). 获取: tr.cells[i]
(4). form 和 表单元素:1). form属性:  .elements   .length2). 表单元素: a. 获取: form.elements[i/id/name]如果有name属性可简写为: form.nameb. 方法: 表单元素.focus()

DOM优化: 4处

1. 查找:(1). 如果只用一个条件就可找到想要的元素，首选按HTML查找返回动态集合——首次查找，效率高！(2). 如果查找条件复杂，就用选择器查找易用
2. 修改样式: 尽量减少修改样式的次数——减少重排重绘(1). 如果批量应用多个css属性，首选用class修改(2). 如果必须用style修改，也可用元素.style.cssText一句话代替多句话修改样式。
3. 添加元素: 尽量减少操作DOM树的次数——减少重排重绘(1). 如果同时添加父元素和子元素，则先在内存中将子元素添加到父元素。最后再一次性将父元素添加到DOM树(2). 如果同时添加多个平级子元素，则先在内存中将子元素添加到文档片段中。最后再一次性将文档片段添加到DOM树

前端 DOM、BOM（二）相关推荐

JavaScript一线大厂面试秘籍：面向对象+dom\bom+事件+特性\动画+面试题+基础
JavaScript(简称"JS")是一种具有函数优先的轻量级,解释型或即时编译型的高级编程语言.虽然它是作为开发Web页面的脚本语言而出名的,但是它也被用到了很多非浏览器环境中, ...
前端批量生成二维码并打包下载
前端批量生成二维码并打包下载项目中遇到一个紧急需求在没有后端配合的情况下,前端独自实现生成二维码并打包下载生成二维码:下载 qrcodejs2 批量打包下载:下载 JSZip 和 FileSave ...
js(Dom+Bom)第一天（1）
JavaScript-DOM(BOM)操作核心知识获取页面元素事件设置样式学习目标能够使用id名,标签名等方式获取页面中元素能够给标签注册点击事件,并实现对应效果能够给标签通过js方式 ...
前端开发 —— BOM
0. BOM vs. DOM BOM:Browser Object Model,浏览器对象模型,是在 web 中使用 JavaScript 的绝对核心: BOM:提供了独立于内容而与浏览器窗口进行交互 ...
web前端知识总结二（css（其他）+移动web网页开发）
web前端知识总结二(css(其他)+移动web网页开发) 文章目录 web前端知识总结二(css(其他)+移动web网页开发) 字体图标平面转换-位移位移:绝对定位居中开门效果旋转转换原点 ...
web前端技术（二）之动画进阶
web前端技术(二)之动画进阶目录 web前端技术(二)之动画进阶前言一.web前端动画是什么二.2D转换标签(transforms) 1. translate() 2.rotate() 3. ...
如何使用前端DOM操作制作一个便签：
如何使用前端DOM操作制作一个便签: 当你看到这张要实现功能的图片时,不知道你现在的心情如何?反正我看到这张图片的时候心情就跟着张图片的背景颜色一样灰暗! 只要你在动手敲代码前想好各大功能应该要怎么实 ...
什么是BOM?,什么是DOM? BOM跟DOM之间的关系
什么是BOM? BOM是browser object model的缩写,简称浏览器对象模型.是用来获取或设置浏览器的属性.行为,例如:新建窗口.获取屏幕分辨率.浏览器版本号等. 比如 alert(); ...
前端之 BOM 和 DOM
前戏到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互.也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DOM ...
前端之BOM和DOM
BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行"对话". DOM (Document Object Model ...

前端 DOM、BOM（二）