基础知识

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > 基础知识 > js BOM和DOM

JavaScript中BOM和DOM详解

作者:大鹏_yp

本文主要讲解了JavaScript中BOM和DOM,BOM为浏览器对象模型,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

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

您可能感兴趣的文章:
阅读全文