JavaScript中BOM和DOM詳解
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)文章希望大家以后多多支持腳本之家!
- JavaScript中BOM,DOM和事件的用法詳解
- JavaScript的DOM與BOM的區(qū)別與用法詳解
- JavaScript學(xué)習(xí)總結(jié)(一) ECMAScript、BOM、DOM(核心、瀏覽器對(duì)象模型與文檔對(duì)象模型)
- 實(shí)現(xiàn)JavaScript的組成----BOM和DOM詳解
- javascript bom是什么及bom和dom的區(qū)別
- javascript學(xué)習(xí)筆記(三)BOM和DOM詳解
- Javascript基礎(chǔ)知識(shí)(三)BOM,DOM總結(jié)
- 解析DHTML,JavaScript,DOM,BOM以及WEB標(biāo)準(zhǔn)的描述
- JavaScript中DOM和BOM原理詳析
相關(guān)文章
JavaScript基礎(chǔ)語(yǔ)法、dom操作樹(shù)及document對(duì)象
本文介紹了學(xué)習(xí)javascript重要的3個(gè)內(nèi)容基礎(chǔ)語(yǔ)法、dom操作樹(shù)及document對(duì)象,小伙伴們一定要弄明白才行2014-12-12IE8 新增的Javascript 開(kāi)發(fā)接口說(shuō)明
IE8 新增的Javascript 對(duì)象 (Object),需要的朋友可以參考下。2011-01-01關(guān)于不同頁(yè)面之間實(shí)現(xiàn)參數(shù)傳遞的幾種方式討論
下面小編就為大家?guī)?lái)一篇關(guān)于不同頁(yè)面之間實(shí)現(xiàn)參數(shù)傳遞的幾種方式討論。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02表單元素的submit()方法和onsubmit事件應(yīng)用概述
表單元素?fù)碛衧ubmit方法,同時(shí)也具有onsubmit事件句柄,用于監(jiān)聽(tīng)表單提交??梢允褂胑lemForm.submit();方法觸發(fā)表單提交,感興趣的朋友可以了解下,或許對(duì)你有所幫助2013-02-02javaScript NameSpace 簡(jiǎn)單說(shuō)明介紹
命名空間,一看就知道主要目的是為了避免沖突。下面就來(lái)說(shuō)一下如何打造自己的JavaScript命名空間。2013-07-07微信小程序訪問(wèn)node.js接口服務(wù)器搭建教程
這篇文章主要給大家分享了微信小程序訪問(wèn)node.js接口服務(wù)器的搭建教程,文中介紹的非常詳細(xì),對(duì)大家具有一定的參考價(jià)值,需要的朋友們下面來(lái)跟著小編一起看看吧。2017-04-04JavaScript中函數(shù)的常用寫(xiě)法及調(diào)用方法
這篇文章介紹了JavaScript中函數(shù)的常用寫(xiě)法及調(diào)用方法,文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-06-06