Detailed explanation of BOM and DOM in JavaScript

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

window.innerHeight
window.innerWidth

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

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

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

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 and below if (agent.indexOf("msie") > 0) {
        return agent.match(regStr_ie);
    }
    // The MSIE field is not included in the IE11 version 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() converts letters to lowercase 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 bit'
    } else {
        return '32 bits'
    }
}
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;
}
//Get the URL parameters and return the object export function GetRequest() {
    var url = location.search; //Get the string after the "?" character in the 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 kernel presto: u.indexOf('Presto') > -1, // Opera kernel webKit: u.indexOf('AppleWebKit') > -1, // Apple, Google kernel gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') === -1, // Firefox kernel mobile: !!u.match(/AppleWebKit.*Mobile.*/), // Is it a mobile terminal ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios terminal android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, // android terminal iPhone: u.indexOf('iPhone') > -1, // Is it an iPhone or QQHD browser iPad: u.indexOf('iPad') > -1, // Is it an iPad
            webApp: u.indexOf('Safari') === -1, // Is it a web application, without header and footer weixin: u.indexOf('MicroMessenger') > -1, // Is it WeChat qq: u.match(/\sQQ/i) === 'qq' // Is it QQ
        }
    }()),
    language: (navigator.browserLanguage || navigator.language).toLowerCase()
}

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

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

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

dom.event = function() {
    e=e||window.event
    var target = e.target || e.srcElement
}

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

function myAddEvent(ele,type,fun){
    Determine whether the addEventListener method exists if(ele.addEventListener){
        ele.addEventListener(type, fun)
    }else{
        ele.attachEvent('on'+type,fun)
    }
}

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

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

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

let xhr;
try{
    //Normal blue flag xhr=new XMLHttpRequest()
}catch(e){
    //Compatible with lower versions of 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')
//Standard browser xhr.onload = function(){}
//Compatibility writing 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, get the address bar parameter string let str = decodeURI(window.location.search).substr(1);

    // Create an object to store the results let obj = {};

    // 2 Convert to array according to semicolon and space conversion const arr1 = str.split('&')

    // 3 loop variable array, split the data string into arrays according to the = equal sign arr1.forEach(v => {
        let arr2 = v.split('=');
        obj[arr2[0]] = arr2[1];
    })

    return obj;

}

// Parameter 1: array, the data array to be referenced // Parameter 2: label, the label object to be written 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}">Delete</button></td>`
        str += '</tr>';
    });
    element.innerHTML = str;
    var oBtns = document.querySelectorAll('button');

    mySetButton(oBtns, array, element);
}

// Parameter 1, button array // Parameter 2, data array // Parameter 3, label object to write content function mySetButton(BtnArray, array, element) {
    BtnArray.forEach(function (v) {
        v.onclick = function () {
            var bool = window.confirm('OK, do you want to delete');
            if (bool) {
                var index = v.getAttribute('index');
                array.splice(index, 1);
                mySetTable(array, element);
            }
        }
    })
}

// Parameter 1: the tag object to which the event needs to be bound // Parameter 2: the event type to be bound, no on
// Parameter 3: event processing function to be bound function myAddEvent(element, type, fun) {
    if (element.addEventListener) {
        // Ordinary browser element.addEventListener(type, fun);
    } else {
        // Low version IE browser element.attachEvent('on' + type, fun);
    }
}

// Parameter 1, the tag object whose attributes are needed // Parameter 2, the attribute name whose attributes are needed function myGetStyle(element, type) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(element)[type];
    } else {
        return element.currentStyle[type];
    }
}

// Parameter 1: cookie key name // Parameter 2: cookie key value // Parameter 3: cookie expiration (seconds)

function mySetCookie(key, value, time) {
    // 1, get the current time object const nowTime = new Date();

    // 2, get the timestamp of the current time --- the unit is milliseconds let timeStamp = nowTime.getTime();

    // 3, calculate the timestamp current timestamp - 8 hours + expiration time (seconds)
    // Get the timestamp with expiration time, which is the world standard time let newTimeStamp = timeStamp - 8 * 60 * 60 * 1000 + time * 1000;

    // 4, set the timestamp back to the time object nowTime.setTime(newTimeStamp);

    // 5. Compatible with the case where the third parameter is not passed // If time is undefined, it proves that there is no third parameter, executes session validity, and assigns an empty string // If time is not undefined, it proves that there is no third parameter, and executes the timestamp validity in the nowTime time object let endTime = time === undefined ? '' : nowTime;

    // 6, set cookie
    // Set an additional attribute for the cookie, path=/
    // Let all files in www use the set cookies
    document.cookie = `${key}=${value};expires=${endTime};path=/`;

}

function myGetCookie() {
    // Create an object to store the results let obj = {};

    // 1 Get the cookie string let str = document.cookie;

    // 2 Convert to array according to semicolon and space conversion const arr1 = str.split('; ')

    // 3 loop variable array, split the data string into arrays according to the = equal sign arr1.forEach(v => {
        let arr2 = v.split('=');
        obj[arr2[0]] = arr2[1];
    })

    return obj;
}

function fun(){
    console.log('I am the content of the newly created js file, did you compress me?')
}