欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript中BOM和DOM詳解

 更新時(shí)間:2021年08月27日 15:26:15   作者:大鵬_yp  
本文主要講解了JavaScript中BOM和DOM,BOM為瀏覽器對(duì)象模型,DOM 為文檔對(duì)象模型,兩者之間有很大的區(qū)別,感興趣的小伙伴可以閱讀一下這篇文章,了解相關(guān)內(nèi)容

BOM(瀏覽器對(duì)象模型)

所有瀏覽器都支持window對(duì)象,他表示瀏覽器窗口。
所有js全局對(duì)象,函數(shù),變量均自動(dòng)成為window對(duì)象的成員。
全局變量是window對(duì)象的屬性。
全局函數(shù)是window對(duì)象的方法。
基于html dom的document也是window對(duì)象的屬性之一。

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

1. window 獲取瀏覽器c窗口尺寸

瀏覽器窗口的內(nèi)部高度(不包括滾動(dòng)條,菜單欄,工具欄)

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 獲取電腦屏幕大小

屬性返回訪問(wèn)者屏幕的寬/高度,以像素計(jì),減去界面特性,比如窗口任務(wù)欄。

screen.availWidth
screen.availHeight

3. window 開(kāi)啟關(guān)閉窗口

開(kāi)啟:window.open()
關(guān)閉:window.close()

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

4. 瀏覽器事件

名稱(chēng) 描述
window.onload 瀏覽器加載事件
window.onscroll 瀏覽器滾動(dòng)監(jiān)聽(tīng)
window.onresize 瀏覽器縮放監(jiān)聽(tīng)
window.open 打開(kāi)事件
window.close 關(guān)閉

5. location 

名稱(chēng) 描述
location.herf 當(dāng)前url
location.hostname 主機(jī)域名
location.pathname 當(dāng)前頁(yè)面路徑和文件名
location.port 端口
location.protocol 協(xié)議(http/https)
location.assign 加載新的文檔
location.search url參數(shù)

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

6. history

瀏覽器歷史,可以不用寫(xiě)window這個(gè)前綴

名稱(chēng) 描述
history.length 次數(shù)
history.back 上一頁(yè)
history.forward 下一頁(yè)
history.go

小括號(hào)中,設(shè)定數(shù)值和 正負(fù)號(hào),+數(shù)值 向下一個(gè)跳轉(zhuǎn)的次數(shù),-數(shù)值

向上一個(gè)跳轉(zhuǎn)的次數(shù),次數(shù)計(jì)算 : 結(jié)束頁(yè)面 - 起始頁(yè)面 ,錯(cuò)誤跳轉(zhuǎn)次數(shù),沒(méi)有執(zhí)行效果

window.history.back();

7. navigator 獲取瀏覽器相關(guān)信息

window.navigator

名稱(chēng) 描述
navagator.userAgent 型號(hào),內(nèi)核,版本,平臺(tái)
navagator.appVersion 瀏覽器版本信息
navagator.appName 瀏覽器名稱(chēng)
navagator.platform 操作系統(tǒng)
navagator.geolocation 位置信息包括經(jīng)度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()將字母轉(zhuǎn)小寫(xiě)
    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參數(shù)  返回對(duì)象
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內(nèi)核
            presto: u.indexOf('Presto') > -1, // opera內(nèi)核
            webKit: u.indexOf('AppleWebKit') > -1, // 蘋(píng)果、谷歌內(nèi)核
            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') === -1, // 火狐內(nèi)核
            mobile: !!u.match(/AppleWebKit.*Mobile.*/), // 是否為移動(dòng)終端
            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應(yīng)該程序,沒(méi)有頭部與底部
            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、確認(rèn)框: Window.confirm()

DOM (文檔對(duì)象模型)

通過(guò) HTML DOM,使用 JavaScript訪問(wèn) HTML 文檔的所有元素。
當(dāng)網(wǎng)頁(yè)被加載時(shí),瀏覽器會(huì)創(chuàng)建頁(yè)面的文檔對(duì)象模型

DOM 分類(lèi)

定義了訪問(wèn)和操作 HTML 文檔的標(biāo)準(zhǔn)方法。DOM 將 HTML 文檔表達(dá)為樹(shù)結(jié)構(gòu)

html中,一切都是節(jié)點(diǎn)

  • 元素節(jié)點(diǎn)
  • 文本節(jié)點(diǎn)
  • 屬性節(jié)點(diǎn)

各個(gè)節(jié)點(diǎn)關(guān)系為:父子關(guān)系\兄弟關(guān)系
通過(guò)可編程的對(duì)象模型,JavaScript 獲得了足夠的能力來(lái)創(chuàng)建動(dòng)態(tài)的 HTML

  • JavaScript 能夠改變頁(yè)面中的所有 HTML 元素。
  • JavaScript 能夠改變頁(yè)面中的所有 HTML 屬性。
  • JavaScript 能夠改變頁(yè)面中的所有 CSS 樣式。
  • JavaScript 能夠?qū)?yè)面中的所有事件做出反應(yīng)。

DOM對(duì)象

對(duì)象 描述
Document:文檔對(duì)象 每個(gè)載入瀏覽器的 HTML 文檔都會(huì)成為 Document 對(duì)象
Element:元素對(duì)象 Element 對(duì)象可以擁有類(lèi)型為元素節(jié)點(diǎn)、文本節(jié)點(diǎn)、注釋節(jié)點(diǎn)的子節(jié)點(diǎn)。
Attribute:節(jié)點(diǎn)屬性對(duì)象 Attr 對(duì)象表示 HTML 屬性
Event:事件對(duì)象 事件在其中發(fā)生的元素、鍵盤(pán)按鍵的狀態(tài)、鼠標(biāo)的位置、鼠標(biāo)按鈕的狀

Document文檔對(duì)象

Document對(duì)象所有屬性

屬性 描述
document.body 獲取body
document.Head 獲取head
document.Element 獲取html
document.cookie 獲取cookie
document.domain 當(dāng)前文檔域名,可做跨域操作
document.lastModified 文檔最后修改日期時(shí)間
document.referrer 當(dāng)前文檔的url
document.title 標(biāo)題
document.URL 當(dāng)前文檔的URL

Document常用方法

方法 描述
document.write() 文檔寫(xiě)入內(nèi)容
document.open() 打開(kāi)一個(gè)流,以收集來(lái)自任何 document.write() 或 document.writeln() 方法的輸出。
document.close() 關(guān)閉用 document.open() 方法打開(kāi)的輸出流,并顯示選定的數(shù)據(jù)。
document.writeIn() 等同于 write() 方法,不同的是在每個(gè)表達(dá)式之后寫(xiě)一個(gè)換行符
獲取元素
document.getElementById() 通過(guò)id獲取元素
document.getElementsByName() 通過(guò)name獲取相關(guān)元素?cái)?shù)組
document.getElementsByTagName() 通過(guò)標(biāo)簽獲取相關(guān)元素?cái)?shù)組 不能使用forEach循環(huán)
document.getElementsByClassName() 通過(guò)class獲取相關(guān)元素?cái)?shù)組 不能使用forEach循環(huán)
document.querySelector() 獲取第一個(gè)匹配條件的標(biāo)簽對(duì)象 --- 只會(huì)獲取一個(gè)標(biāo)簽對(duì)象
document.querySelectorAll() 獲取所有匹配條件的標(biāo)簽對(duì)象 執(zhí)行結(jié)果是偽數(shù)組
創(chuàng)建元素
document.createAttribute() 創(chuàng)建屬性對(duì)象
document.createElement() 創(chuàng)建元素對(duì)象
document.createTextNode() 創(chuàng)建文本對(duì)象
document.createComment() 創(chuàng)建注釋

element文檔對(duì)象

element元素對(duì)象常用的方法

方法 描述
元素增,刪,改,克隆
appendChild(doc) 插入節(jié)點(diǎn)到最后
insertBefore(ndoc, oldoc) 插入節(jié)點(diǎn)到某個(gè)節(jié)點(diǎn)之前
removeChild(doc) 移除該節(jié)點(diǎn)
replaceChild(doc) 替換節(jié)點(diǎn)
cloneNode() 克隆節(jié)點(diǎn)
cloneNode(true) 克隆節(jié)點(diǎn)及其內(nèi)容
屬性相關(guān)
getAttribute() 獲取屬性
setAttribute() 設(shè)置屬性
removeAttribute() 移除屬性
getAttributeNode() 指定屬性節(jié)點(diǎn)
setAttributeNode() 設(shè)置屬性節(jié)點(diǎn)
removeAttributeNode() 移除屬性節(jié)點(diǎn)
getElementsByTagName() 指定標(biāo)簽名的所有子元素的集合
nodelist.item() NodeList 中位于指定下標(biāo)的節(jié)點(diǎn)

element元素對(duì)象常用的屬性

屬性 描述
id 元素id
style 樣式
className class屬性
innerHML 標(biāo)簽內(nèi)容
innerText 文本內(nèi)容
獲取節(jié)點(diǎn)
childNodes 獲取元素子節(jié)點(diǎn)
parentNode 獲取元素父節(jié)點(diǎn)
attributes 獲取所有屬性
children 獲取所有標(biāo)簽子節(jié)點(diǎn)
firstchild 第一個(gè)子節(jié)點(diǎn)
lastchild 最后一個(gè)子節(jié)點(diǎn)
firstElementchild 第一個(gè)標(biāo)簽子節(jié)點(diǎn)
lastElementChild 最后一個(gè)標(biāo)簽子節(jié)點(diǎn)
previousSibling 上一個(gè)兄弟節(jié)點(diǎn)
nextsibling 下一個(gè)兄弟節(jié)點(diǎn)
previousElementsibling 上一個(gè)標(biāo)簽
nextElemntSibling 下一個(gè)標(biāo)簽
parentNode 父級(jí)節(jié)點(diǎn)
parentElement 父級(jí)標(biāo)簽節(jié)點(diǎn)
nodeName 名字:元素節(jié)點(diǎn)--標(biāo)簽名稱(chēng)、屬性節(jié)點(diǎn)--屬性名、文本節(jié)點(diǎn)--#text、注釋節(jié)點(diǎn)--#comment
nodeType 節(jié)點(diǎn)類(lèi)型:1元素, 2屬性 3文本, 8注釋
nodeValue 元素值:屬性值、文本內(nèi)容、注釋內(nèi)容
nodelist.length NodeList 中的節(jié)點(diǎn)數(shù)
尺寸距離
clientHeight 高度-內(nèi)容+padding
Clientwidth 寬度
offsetHeight 高度-內(nèi)容+padding+border
Offsetwidth 寬度
ClientTop 上邊框?qū)挾?/td>
clientLeft 做邊框?qū)挾?/td>
offsetTop 父物體頂部距離
offsetLeft 父物體左側(cè)距離

DOM事件操作

鼠標(biāo)事件

名稱(chēng) 描述
click 點(diǎn)擊事件
dbclick 雙擊事件
contextmenu 右鍵點(diǎn)擊事件
mousedown 按下事件,執(zhí)行一次
mouseup 抬起事件
mousemove 鼠標(biāo)移動(dòng)
mouseover 移入
mouseout 移除
mouseenter 移入,不發(fā)生冒泡
mouseleave 移除,不冒泡

鍵盤(pán)事件

獲取點(diǎn)擊時(shí)的事件對(duì)象

  • 普通版本

E/event

  • IE低版本

Window.event

兼容寫(xiě)法:var e=e||window.event

獲取案件相關(guān)

  • 按鍵名稱(chēng):

e.Key

  • 按鍵編碼:

e.Keycode

  • 兼容火狐:

e.Which

兼容寫(xiě)法: e.Keycode|| e.Which

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

觸屏事件

名稱(chēng) 描述
touchstart 開(kāi)始
touchend 結(jié)束
touchmove 移動(dòng)

特殊事件

名稱(chēng) 描述
animationend 動(dòng)畫(huà)結(jié)束
transitionend 過(guò)度結(jié)束

表單事件

名稱(chēng) 描述
submit 只有提交表單時(shí),觸發(fā)的事件
focus 標(biāo)簽獲取焦點(diǎn)會(huì)處觸發(fā)的事件
input 輸入數(shù)據(jù)時(shí)會(huì)觸發(fā)的事件
change 失去加并且輸入數(shù)據(jù)改變是觸發(fā)事件

瀏覽器兼容處理

1、瀏覽器滾動(dòng)高度

var height=document.documentElement.scrollTop||document.body.scrollTop
var width=document.documentElement.scrollLeft||document.body.scrollLeft
  • 有文檔類(lèi)型聲明
document.documentElement.scrollTop
document.documentElement.scrollLeft
  • 沒(méi)有文檔類(lèi)型聲明
document.body.scrollTop
document.body.scrollLeft

2、獲取非行內(nèi)樣式屬性

實(shí)際效果是,獲取標(biāo)簽執(zhí)行的樣式屬性

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

3、獲取事件對(duì)象

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

4、獲取事件對(duì)象目標(biāo)

兼容低版本火狐瀏覽器,現(xiàn)在基本上不用了

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

5、按鍵數(shù)值

兼容低版本火狐瀏覽器,現(xiàn)在基本上不用了

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

6、事件的監(jiān)聽(tīng)/事件的注冊(cè)

function myAddEvent(ele,type,fun){
    判斷addEventListener這個(gè)方法是否存在
    if(ele.addEventListener){
        ele.addEventListener(type,fun)
    }else{
        ele.attachEvent('on'+type,fun)
    }
}

7、刪除事件處理函數(shù)

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、阻止默認(rèn)事件執(zhí)行

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

10、ajax對(duì)象

let xhr;
try{
    //普通路藍(lán)旗
    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')
//標(biāo)準(zhǔn)瀏覽器
xhr.onload = function(){}
//兼容性寫(xiě)法
xhr.onreadystatechange=function(){
    if(xhr.readystate==4){
        let reg=/^a\d{2}$/
        if(res.test(xhr.status)){
            console.lof(json.parse(xhr.response))
        }
    }
}

兼容性寫(xiě)法,封裝工具

生成驗(yàn)證碼函數(shù)

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;
}

獲取地址欄數(shù)據(jù)信息

function getUrlVal() {
    // 1,獲取地址欄參數(shù)字符串
    let str = decodeURI(window.location.search).substr(1);

    // 創(chuàng)建存儲(chǔ)結(jié)果的對(duì)象
    let obj = {};

    // 2 轉(zhuǎn)化為數(shù)組 根據(jù) 分號(hào)空格轉(zhuǎn)化
    const arr1 = str.split('&')

    // 3 循環(huán)變量數(shù)組,將數(shù)據(jù)字符串,根據(jù)=等號(hào)分割為數(shù)組
    arr1.forEach(v => {
        let arr2 = v.split('=');
        obj[arr2[0]] = arr2[1];
    })

    return obj;

}

生成table表格函數(shù)

// 參數(shù)1:數(shù)組,需要參照的數(shù)據(jù)數(shù)組
// 參數(shù)2:標(biāo)簽,需要寫(xiě)入內(nèi)容的標(biāo)簽對(duì)象
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按鈕綁定刪除效果函數(shù)

// 參數(shù)1,button按鈕數(shù)組
// 參數(shù)2,數(shù)據(jù)數(shù)組
// 參數(shù)3,寫(xiě)入內(nèi)容的標(biāo)簽對(duì)象
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);
            }
        }
    })
}

處理監(jiān)聽(tīng)事件兼容性函數(shù)

// 參數(shù)1:需要綁定事件的標(biāo)簽對(duì)象
// 參數(shù)2:需要綁定的事件類(lèi)型,沒(méi)有on
// 參數(shù)3:需要綁定的事件處理函數(shù)
function myAddEvent(element, type, fun) {
    if (element.addEventListener) {
        // 普通瀏覽器
        element.addEventListener(type, fun);
    } else {
        // 低版本IE瀏覽器
        element.attachEvent('on' + type, fun);
    }
}

獲取css樣式函數(shù)

// 參數(shù)1,需要屬性的標(biāo)簽對(duì)象
// 參數(shù)2,需要屬性的屬性名稱(chēng)

function myGetStyle(element, type) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(element)[type];
    } else {
        return element.currentStyle[type];
    }
}

設(shè)定 cookie 函數(shù)

// 參數(shù)1: cookie 的鍵名
// 參數(shù)2: cookie 的鍵值
// 參數(shù)3: cookie 的時(shí)效(秒數(shù))

function mySetCookie(key, value, time) {
    // 1,獲取當(dāng)前的時(shí)間對(duì)象
    const nowTime = new Date();

    // 2,獲取當(dāng)前時(shí)間的時(shí)間戳 --- 單位是毫秒
    let timeStamp = nowTime.getTime();

    // 3,計(jì)算時(shí)間戳    當(dāng)前時(shí)間戳 - 8小時(shí) + 時(shí)效的時(shí)間(秒)
    // 獲取帶有時(shí)效的時(shí)間戳 是世界標(biāo)準(zhǔn)時(shí)間
    let newTimeStamp = timeStamp - 8 * 60 * 60 * 1000 + time * 1000;

    // 4,將時(shí)間戳設(shè)定回時(shí)間對(duì)象
    nowTime.setTime(newTimeStamp);

    // 5,兼容沒(méi)有傳第三個(gè)參數(shù)的情況
    // 如果 time 是 undefined ,證明沒(méi)有第三個(gè)參數(shù),執(zhí)行會(huì)話時(shí)效,賦值空字符串
    // 如果 time 不是 undefined ,證明沒(méi)有第三個(gè)參數(shù),執(zhí)行 nowTime 時(shí)間對(duì)象中的時(shí)間戳?xí)r效
    let endTime = time === undefined ? '' : nowTime;

    // 6,設(shè)定cookie
    // 給cookie多設(shè)定一個(gè)屬性,path=/
    // 讓www中的所有文件都可以使用設(shè)定的cookie
    document.cookie = `${key}=${value};expires=${endTime};path=/`;

}

獲取 cookie 的具體數(shù)據(jù)

function myGetCookie() {
    // 創(chuàng)建存儲(chǔ)結(jié)果的對(duì)象
    let obj = {};

    // 1 獲取cookie字符串
    let str = document.cookie;

    // 2 轉(zhuǎn)化為數(shù)組 根據(jù) 分號(hào)空格轉(zhuǎn)化
    const arr1 = str.split('; ')

    // 3 循環(huán)變量數(shù)組,將數(shù)據(jù)字符串,根據(jù)=等號(hào)分割為數(shù)組
    arr1.forEach(v => {
        let arr2 = v.split('=');
        obj[arr2[0]] = arr2[1];
    })

    return obj;
}

function fun(){
    console.log('我是新建的js文件中的內(nèi)容,你壓縮我了嗎?')
}

到此這篇關(guān)于JavaScript中BOM和DOM詳解的文章就介紹到這了,更多相關(guān)js BOM和DOM內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論