BOM（浏览器对象模型）

所有浏览器都支持window对象，他表示浏览器窗口。所有js全局对象，函数，变量均自动成为window对象的成员。全局变量是window对象的属性。全局函数是window对象的方法。基于html dom的document也是window对象的属性之一。

window.document.getElementById("header");document.getElementById("header");

1. window 获取浏览器c窗口尺寸

浏览器窗口的内部高度（不包括滚动条，菜单栏，工具栏）

window.innerHeightwindow.innerWidth

适用于Internet Explorer 8、7、6、5浏览器的window如下：

document.documentElement.clientHeightdocument.documentElement.clientWidth

兼容方案获取浏览器宽高`

var width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidthvar height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight

2. screen 获取电脑屏幕大小

属性返回访问者屏幕的宽/高度，以像素计，减去界面特性，比如窗口任务栏。

screen.availWidthscreen.availHeight

3. window 开启关闭窗口

开启:window.open()关闭:window.close()

<script type="text/javascript">var newWindows;function newWindow() {newWindows = window.open("https://www.baidu.com/","baidu");}function closeWindow() {newWindows.close();}</script>

4. 浏览器事件

5. location

获取当前网页地址，吧浏览器从定向到新的网页（当前页打开）可以不用写window这个前缀

console.log(location.href);console.log(location.hostname);console.log(location.pathname);console.log(location.port);console.log(location.protocol);

6. history

浏览器历史，可以不用写window这个前缀

window.history.back();

7. navigator 获取浏览器相关信息

window.navigator名称|描述:–:|:–:navagator.userAgent|型号，内核，版本，平台navagator.appVersion|浏览器版本信息navagator.appName|浏览器名称navagator.platform|操作系统navagator.geolocation|位置信息包括经度longitude和纬度latitude

export function GetCurrentBrowser() {var agent = navigator.userAgent.toLowerCase();var regStr_ie = /msie [\\d.]+;/gi;var regStr_ff = /firefox\\/[\\d.]+/givar regStr_chrome = /chrome\\/[\\d.]+/gi;var regStr_saf = /safari\\/[\\d.]+/gi;//IE11以下if (agent.indexOf("msie") > 0) {return agent.match(regStr_ie);}//IE11版本中不包括MSIE字段if (agent.indexOf("trident") > 0 && agent.indexOf("rv") > 0) {return "IE " + agent.match(/rv:(\\d+\\.\\d+)/)[1];}//firefoxif (agent.indexOf("firefox") > 0) {return agent.match(regStr_ff);}//Chromeif (agent.indexOf("chrome") > 0) {return agent.match(regStr_chrome);}//Safariif (agent.indexOf("safari") > 0 && agent.indexOf("chrome") < 0) {return agent.match(regStr_saf);}}// get osexport function GetOs() {let userAgent = navigator.userAgent.toLocaleLowerCase() //toLocaleLowerCase()将字母转小写let wins = [{sys: \'windows nt 5.0\',alias: \'windows 2000\',name: \'Win2000\'},{sys: \'windows nt 5.1\',alias: \'windows xp\',name: \'WinXP\'},{sys: \'windows nt 5.2\',alias: \'windows 2003\',name: \'Win2003\'},{sys: \'windows nt 6.0\',alias: \'Windows Vista\',name: \'WinVista\'},{sys: \'windows nt 6.1\',alias: \'Windows 7\',name: \'Win7\'},{sys: \'windows nt 6.2\',alias: \'Windows 8\',name: \'Win8\'},{sys: \'windows nt 10.0\',alias: \'Windows 10\',name: \'Win10\'},]for (let win of wins) {if (userAgent.indexOf(win.sys) > -1 || userAgent.indexOf(win.alias) > -1) {return win.name}}}export function getEdition() {var userAgent = navigator.userAgent.toLocaleLowerCase()if (userAgent.indexOf("win64") > -1 || userAgent.indexOf("wow64") > -1) {return \'64位\'} else {return \'32位\'}}export function IsPC() {var userAgentInfo = navigator.userAgent;var Agents = ["Android", "iPhone","SymbianOS", "Windows Phone","iPad", "iPod"];var flag = true;for (var v = 0; v < Agents.length; v++) {if (userAgentInfo.indexOf(Agents[v]) > 0) {flag = false;break;}}return flag;}//获取url参数  返回对象export function GetRequest() {var url = location.search; //获取url中"?"符后的字串var theRequest = {}let strs = []if (url.indexOf("?") != -1) {var str = url.substr(1);strs = str.split("&");for (var i = 0; i < strs.length; i++) {theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);}}return theRequest;}export const browser = {versions: (function() {let u = navigator.userAgent// let app = navigator.appVersionreturn {trident: u.indexOf(\'Trident\') > -1, // IE内核presto: u.indexOf(\'Presto\') > -1, // opera内核webKit: u.indexOf(\'AppleWebKit\') > -1, // 苹果、谷歌内核gecko: u.indexOf(\'Gecko\') > -1 && u.indexOf(\'KHTML\') === -1, // 火狐内核mobile: !!u.match(/AppleWebKit.*Mobile.*/), // 是否为移动终端ios: !!u.match(/\\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios终端android: u.indexOf(\'Android\') > -1 || u.indexOf(\'Adr\') > -1, // android终端iPhone: u.indexOf(\'iPhone\') > -1, // 是否为iPhone或者QQHD浏览器iPad: u.indexOf(\'iPad\') > -1, // 是否iPadwebApp: u.indexOf(\'Safari\') === -1, // 是否web应该程序，没有头部与底部weixin: u.indexOf(\'MicroMessenger\') > -1, // 是否微信qq: u.match(/\\sQQ/i) === \'qq\' // 是否QQ}}()),language: (navigator.browserLanguage || navigator.language).toLowerCase()}

8. 弹窗

1、警告框：Window.alert（）

2、输入框：Window.prompt()

3、确认框： Window.confirm（）

DOM (文档对象模型)

通过 HTML DOM,使用 JavaScript访问 HTML 文档的所有元素。当网页被加载时，浏览器会创建页面的文档对象模型

DOM 分类

定义了访问和操作 HTML 文档的标准方法。DOM 将 HTML 文档表达为树结构

html中，一切都是节点

• 元素节点
• 文本节点
• 属性节点

各个节点关系为：父子关系\\兄弟关系

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML

• JavaScript 能够改变页面中的所有 HTML 元素。
• JavaScript 能够改变页面中的所有 HTML 属性。
• JavaScript 能够改变页面中的所有 CSS 样式。
• JavaScript 能够对页面中的所有事件做出反应。

DOM对象

Document文档对象

Document对象所有属性

Document常用方法

element文档对象

element元素对象常用的方法

element元素对象常用的属性

DOM事件操作

鼠标事件

键盘事件

获取点击时的事件对象

• 普通版本
  E/event
• IE低版本
  Window.event

兼容写法：var e=e||window.event

获取案件相关

• 按键名称：e.Key
• 按键编码：e.Keycode
• 兼容火狐：e.Which

兼容写法： e.Keycode|| e.Which

altkey ctrlkey shiftkey 判断是否按下 alt ctrl shift

触屏事件

特殊事件

表单事件

浏览器兼容处理

1、浏览器滚动高度

var height=document.documentElement.scrollTop||document.body.scrollTopvar width=document.documentElement.scrollLeft||document.body.scrollLeft

• 有文档类型声明

document.documentElement.scrollTopdocument.documentElement.scrollLeft

• 没有文档类型声明

document.body.scrollTopdocument.body.scrollLeft

2、获取非行内样式属性

实际效果是，获取标签执行的样式属性

if(window.getComputedStyle){window.getComponentStyle(dom).width}else{doc.currentStyle.width}

3、获取事件对象

dom.onclick=function(e){e=e||window.event}

4、获取事件对象目标

兼容低版本火狐浏览器，现在基本上不用了

dom.事件=function(){e=e||window.eventvar target=e.target||e.srcElement}

5、按键数值

兼容低版本火狐浏览器，现在基本上不用了

document.onkeyup=function(e){e=e||window.eventvar keyNum=e.keyCode||e.which}

6、事件的监听/事件的注册

function myAddEvent(ele,type,fun){判断addEventListener这个方法是否存在if(ele.addEventListener){ele.addEventListener(type,fun)}else{ele.attachEvent(\'on\'+type,fun)}}

7、删除事件处理函数

function delFun(ele,type,fun){if(ele.removeEventListener){ele.removeEventListener(type,fun)}else{ele.detachEvent(\'on\'+type,fun)}}

8、阻止事件传递

function stopBBle(e){if(e.stopPropagation){e.stopPropagation()}else{e.cancelBubble=true}}

9、阻止默认事件执行

if(e.preventDefault){e.preventDefault}else{e.returnValue=false}

10、ajax对象

let xhr;try{//普通路蓝旗xhr=new XMLHttpRequest()}catch(e){//兼容IE低版本xhr=new ActiveXObject(\'Microsoft.XMLHTTP\')}xhr.open(\'post\',\'url\')xhr.setRequestHeader(\'content-type\',\'application/x-www/form-url-encoded\')xhr.send(\'name=111&age=222\')//标准浏览器xhr.onload = function(){}//兼容性写法xhr.onreadystatechange=function(){if(xhr.readystate==4){let reg=/^a\\d{2}$/if(res.test(xhr.status)){console.lof(json.parse(xhr.response))}}}

兼容性写法，封装工具

生成验证码函数

function mySetVc() {var str = \'0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXUZ\';var newStr = \'\';for (var i = 1; i <= 6; i++) {var num = parseInt(Math.random() * str.length)if (newStr.indexOf(str[num]) === -1) {newStr += str[num];} else {i--;}}return newStr;}

获取地址栏数据信息

function getUrlVal() {// 1,获取地址栏参数字符串let str = decodeURI(window.location.search).substr(1);// 创建存储结果的对象let obj = {};// 2 转化为数组 根据 分号空格转化const arr1 = str.split(\'&\')// 3 循环变量数组,将数据字符串,根据=等号分割为数组arr1.forEach(v => {let arr2 = v.split(\'=\');obj[arr2[0]] = arr2[1];})return obj;}

生成table表格函数

// 参数1:数组,需要参照的数据数组// 参数2:标签,需要写入内容的标签对象function mySetTable(array, element) {var str = \'\';array.forEach(function (v, k) {str += \'<tr>\';for (var key in v) {str += `<td>${v[key]}</td>`;}str += `<td><button index="${k}">删除</button></td>`str += \'</tr>\';});element.innerHTML = str;var oBtns = document.querySelectorAll(\'button\');mySetButton(oBtns, array, element);}

给button按钮绑定删除效果函数

// 参数1,button按钮数组// 参数2,数据数组// 参数3,写入内容的标签对象function mySetButton(BtnArray, array, element) {BtnArray.forEach(function (v) {v.onclick = function () {var bool = window.confirm(\'确定,是否删除\');if (bool) {var index = v.getAttribute(\'index\');array.splice(index, 1);mySetTable(array, element);}}})}

处理监听事件兼容性函数

// 参数1:需要绑定事件的标签对象// 参数2:需要绑定的事件类型,没有on// 参数3:需要绑定的事件处理函数function myAddEvent(element, type, fun) {if (element.addEventListener) {// 普通浏览器element.addEventListener(type, fun);} else {// 低版本IE浏览器element.attachEvent(\'on\' + type, fun);}}

获取css样式函数

// 参数1,需要属性的标签对象// 参数2,需要属性的属性名称function myGetStyle(element, type) {if (window.getComputedStyle) {return window.getComputedStyle(element)[type];} else {return element.currentStyle[type];}}

设定 cookie 函数

// 参数1: cookie 的键名// 参数2: cookie 的键值// 参数3: cookie 的时效(秒数)function mySetCookie(key, value, time) {// 1,获取当前的时间对象const nowTime = new Date();// 2,获取当前时间的时间戳 --- 单位是毫秒let timeStamp = nowTime.getTime();// 3,计算时间戳    当前时间戳 - 8小时 + 时效的时间(秒)// 获取带有时效的时间戳 是世界标准时间let newTimeStamp = timeStamp - 8 * 60 * 60 * 1000 + time * 1000;// 4,将时间戳设定回时间对象nowTime.setTime(newTimeStamp);// 5,兼容没有传第三个参数的情况// 如果 time 是 undefined ,证明没有第三个参数,执行会话时效,赋值空字符串// 如果 time 不是 undefined ,证明没有第三个参数,执行 nowTime 时间对象中的时间戳时效let endTime = time === undefined ? \'\' : nowTime;// 6,设定cookie// 给cookie多设定一个属性,path=/// 让www中的所有文件都可以使用设定的cookiedocument.cookie = `${key}=${value};expires=${endTime};path=/`;}

获取 cookie 的具体数据

function myGetCookie() {// 创建存储结果的对象let obj = {};// 1 获取cookie字符串let str = document.cookie;// 2 转化为数组 根据 分号空格转化const arr1 = str.split(\'; \')// 3 循环变量数组,将数据字符串,根据=等号分割为数组arr1.forEach(v => {let arr2 = v.split(\'=\');obj[arr2[0]] = arr2[1];})return obj;}function fun(){console.log(\'我是新建的js文件中的内容,你压缩我了吗?\')}