目录

• BOM（浏览器对象模型）
• 1. window 获取浏览器c窗口尺寸
  
• 2. screen 获取电脑屏幕大小
  
• 3. window 开启关闭窗口
  
• 4. 浏览器事件
  
• 5. location 
• 6. history
  
• 7. navigator 获取浏览器相关信息
  
• 8. 弹窗
  
• DOM (文档对象模型)
• DOM 分类
  
• DOM对象
  
• Document文档对象
  
• element文档对象
  
• DOM事件操作
  
• 鼠标事件
  
• 键盘事件
  
• 触屏事件
  
• 特殊事件
  
• 表单事件
  
• 浏览器兼容处理
• 兼容性写法，封装工具
  

BOM（浏览器对象模型）

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

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

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

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

window.innerHeight
window.innerWidth

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

document.documentElement.clientHeight
document.documentElement.clientWidth

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

var width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth
var 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 os
export 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

• IE低版本

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.scrollTop
var width=document.documentElement.scrollLeft||document.body.scrollLeft

• 有文档类型声明
  

document.documentElement.scrollTop
document.documentElement.scrollLeft

• 没有文档类型声明
  

document.body.scrollTop
document.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内容请搜索hwidc以前的文章或继续浏览下面的相关文章希望大家以后多多支持hwidc！

【出处：恩施网站优化 转载请说明出处】