|
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.availWidth
screen.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. 浏览器事件
| 名称 | 描述 | | window.onload | 浏览器加载事件 | | window.onscroll | 浏览器滚动监听 | | window.onresize | 浏览器缩放监听 | | window.open | 打开事件 | | window.close | 关闭 |
5. location | 名称 | 描述 | | location.herf | 当前url | | location.hostname | 主机域名 | | location.pathname | 当前页面路径和文件名 | | location.port | 端口 | | location.protocol | 协议(http/https) | | location.assign | 加载新的文档 | | location.search | url参数 | console.log(location.href);console.log(location.hostname);console.log(location.pathname);console.log(location.port);console.log(location.protocol);
6. history
浏览器历史，可以不用写window这个前缀 | 名称 | 描述 | | history.length | 次数 | | history.back | 上一页 | | history.forward | 下一页 | | history.go | 小括号中,设定数值和 正负号,+数值 向下一个跳转的次数,-数值 向上一个跳转的次数,次数计算 : 结束页面 - 起始页面 ,错误跳转次数,没有执行效果 | 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.]+/gi var 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]; } //firefox if (agent.indexOf("firefox") > 0) { return agent.match(regStr_ff); } //Chrome if (agent.indexOf("chrome") > 0) { return agent.match(regStr_chrome); } //Safari if (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.appVersion return { 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, // 是否iPad webApp: 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:文档对象 | 每个载入浏览器的 HTML 文档都会成为 Document 对象 | | Element:元素对象 | Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。 | | Attribute:节点属性对象 | Attr 对象表示 HTML 属性 | | Event:事件对象 | 事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状 |
Document文档对象
Document对象所有属性
| 属性 | 描述 | | document.body | 获取body | | document.Head | 获取head | | document.Element | 获取html | | document.cookie | 获取cookie | | document.domain | 当前文档域名，可做跨域操作 | | document.lastModified | 文档最后修改日期时间 | | document.referrer | 当前文档的url | | document.title | 标题 | | document.URL | 当前文档的URL | Document常用方法
| 方法 | 描述 | | document.write() | 文档写入内容 | | document.open() | 打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。 | | document.close() | 关闭用 document.open() 方法打开的输出流，并显示选定的数据。 | | document.writeIn() | 等同于 write() 方法，不同的是在每个表达式之后写一个换行符 | | 获取元素 | | | document.getElementById() | 通过id获取元素 | | document.getElementsByName() | 通过name获取相关元素数组 | | document.getElementsByTagName() | 通过标签获取相关元素数组 不能使用forEach循环 | | document.getElementsByClassName() | 通过class获取相关元素数组 不能使用forEach循环 | | document.querySelector() | 获取第一个匹配条件的标签对象 --- 只会获取一个标签对象 | | document.querySelectorAll() | 获取所有匹配条件的标签对象 执行结果是伪数组 | | 创建元素 | | | document.createAttribute() | 创建属性对象 | | document.createElement() | 创建元素对象 | | document.createTextNode() | 创建文本对象 | | document.createComment() | 创建注释 |
element文档对象
element元素对象常用的方法
| 方法 | 描述 | | 元素增，删，改，克隆 | | | appendChild(doc) | 插入节点到最后 | | insertBefore(ndoc, oldoc) | 插入节点到某个节点之前 | | removeChild(doc) | 移除该节点 | | replaceChild(doc) | 替换节点 | | cloneNode() | 克隆节点 | | cloneNode(true) | 克隆节点及其内容 | | 属性相关 | | | getAttribute() | 获取属性 | | setAttribute() | 设置属性 | | removeAttribute() | 移除属性 | | getAttributeNode() | 指定属性节点 | | setAttributeNode() | 设置属性节点 | | removeAttributeNode() | 移除属性节点 | | getElementsByTagName() | 指定标签名的所有子元素的集合 | | nodelist.item() | NodeList 中位于指定下标的节点 | element元素对象常用的属性
| 属性 | 描述 | | id | 元素id | | style | 样式 | | className | class属性 | | innerHML | 标签内容 | | innerText | 文本内容 | | 获取节点 | | | childNodes | 获取元素子节点 | | parentNode | 获取元素父节点 | | attributes | 获取所有属性 | | children | 获取所有标签子节点 | | firstchild | 第一个子节点 | | lastchild | 最后一个子节点 | | firstElementchild | 第一个标签子节点 | | lastElementChild | 最后一个标签子节点 | | previousSibling | 上一个兄弟节点 | | nextsibling | 下一个兄弟节点 | | previousElementsibling | 上一个标签 | | nextElemntSibling | 下一个标签 | | parentNode | 父级节点 | | parentElement | 父级标签节点 | | nodeName | 名字:元素节点--标签名称、属性节点--属性名、文本节点--#text、注释节点--#comment | | nodeType | 节点类型:1元素, 2属性 3文本, 8注释 | | nodeValue | 元素值：属性值、文本内容、注释内容 | | nodelist.length | NodeList 中的节点数 | | 尺寸距离 | | | clientHeight | 高度-内容+padding | | Clientwidth | 宽度 | | offsetHeight | 高度-内容+padding+border | | Offsetwidth | 宽度 | | ClientTop | 上边框宽度 | | clientLeft | 做边框宽度 | | offsetTop | 父物体顶部距离 | | offsetLeft | 父物体左侧距离 |
DOM事件操作
鼠标事件
| 名称 | 描述 | | click | 点击事件 | | dbclick | 双击事件 | | contextmenu | 右键点击事件 | | mousedown | 按下事件,执行一次 | | mouseup | 抬起事件 | | mousemove | 鼠标移动 | | mouseover | 移入 | | mouseout | 移除 | | mouseenter | 移入,不发生冒泡 | | mouseleave | 移除，不冒泡 |
键盘事件
获取点击时的事件对象
E/event
Window.event
兼容写法：var e=e||window.event
获取案件相关
e.Key e.Keycode e.Which
兼容写法： e.Keycode|| e.Which altkey ctrlkey shiftkey 判断是否按下 alt ctrl shift
触屏事件
| 名称 | 描述 | | touchstart | 开始 | | touchend | 结束 | | touchmove | 移动 |
特殊事件
| 名称 | 描述 | | animationend | 动画结束 | | transitionend | 过度结束 |
表单事件
| 名称 | 描述 | | submit | 只有提交表单时，触发的事件 | | focus | 标签获取焦点会处触发的事件 | | input | 输入数据时会触发的事件 | | change | 失去加并且输入数据改变是触发事件 |
浏览器兼容处理
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.event var target=e.target||e.srcElement}5、按键数值
兼容低版本火狐浏览器，现在基本上不用了 document.onkeyup=function(e){ e=e||window.event var 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中的所有文件都可以使用设定的cookie document.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文件中的内容,你压缩我了吗?')}到此这篇关于JavaScript中BOM和DOM详解的文章就介绍到这了,更多相关js BOM和DOM内容请搜索wanshiok.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持wanshiok.com！
学习笔记编写vue的第一个程序
Vue使用canvas实现图片压缩上传 |
