前端之 BOM 和 DOM
前戲
到目前為止，我們已經(jīng)學(xué)過了JavaScript的一些簡(jiǎn)單的語法。但是這些簡(jiǎn)單的語法，并沒有和瀏覽器有任何交互。也就是我們還不能制作一些我們經(jīng)常看到的網(wǎng)頁的一些交互，我們需要繼續(xù)學(xué)習(xí)BOM和DOM相關(guān)知識(shí)。
JavaScript分為 ECMAScript，DOM，BOM。
- BOM（Browser Object Model）是指瀏覽器對(duì)象模型，它使 JavaScript 有能力與瀏覽器進(jìn)行“對(duì)話”。
- DOM （Document Object Model）是指文檔對(duì)象模型，通過它，可以訪問HTML文檔的所有元素。
Window對(duì)象是客戶端JavaScript最高層對(duì)象之一，由于window對(duì)象是其它大部分對(duì)象的共同祖先，在調(diào)用window對(duì)象的方法和屬性時(shí)，可以省略window對(duì)象的引用。例如：window.document.write()可以簡(jiǎn)寫成：document.write()。
window對(duì)象
所有瀏覽器都支持?window?對(duì)象。它表示瀏覽器窗口。
*如果文檔包含框架（frame 或 iframe 標(biāo)簽），瀏覽器會(huì)為 HTML 文檔創(chuàng)建一個(gè) window 對(duì)象，并為每個(gè)框架創(chuàng)建一個(gè)額外的 window 對(duì)象。
*沒有應(yīng)用于 window 對(duì)象的公開標(biāo)準(zhǔn)，不過所有瀏覽器都支持該對(duì)象。
所有 JavaScript 全局對(duì)象、函數(shù)以及變量均自動(dòng)成為 window 對(duì)象的成員。
全局變量是 window 對(duì)象的屬性。全局函數(shù)是 window 對(duì)象的方法。
接下來要講的HTML DOM 的 document 也是 window 對(duì)象的屬性之一。
一些常用的Window方法：
- window.innerHeight - 瀏覽器窗口的內(nèi)部高度
- window.innerWidth - 瀏覽器窗口的內(nèi)部寬度
- window.open() - 打開新窗口
- window.close() - 關(guān)閉當(dāng)前窗口
window的子對(duì)象
navigator對(duì)象（了解即可）
瀏覽器對(duì)象，通過這個(gè)對(duì)象可以判定用戶所使用的瀏覽器，包含了瀏覽器相關(guān)信息。
- navigator.appName ? ?// Web瀏覽器全稱
- navigator.appVersion // Web瀏覽器廠商和版本的詳細(xì)字符串
- navigator.userAgent ?// 客戶端絕大部分信息
- navigator.platform // 瀏覽器運(yùn)行所在的操作系統(tǒng)
screen對(duì)象（了解即可）
屏幕對(duì)象，不常用。一些屬性：
- screen.availWidth? // 可用的屏幕寬度
- screen.availHeight // 可用的屏幕高度
history對(duì)象（了解即可）
window.history 對(duì)象包含瀏覽器的歷史。但我們無法查看具體的地址，可以簡(jiǎn)單的用來前進(jìn)或后退一個(gè)頁面。
- history.forward()? // 前進(jìn)一頁
- history.back()? ? ? // 后退一頁
- history.go(參數(shù))?? ?加載 history 列表中的某個(gè)具體頁面。
- * 正數(shù)：前進(jìn)幾個(gè)歷史記錄
- * 負(fù)數(shù)：后退幾個(gè)歷史記錄
- history.length?? ?返回當(dāng)前窗口歷史列表中的 URL 數(shù)量。
location對(duì)象
window.location 對(duì)象用于獲得當(dāng)前頁面的地址 (URL)，并把瀏覽器重定向到新的頁面。常用屬性和方法：
- location.href? ? ? ? ? ? ? ?// 獲取URL
- location.href="URL"? ?// 跳轉(zhuǎn)到指定頁面
- location.reload()? ? ? ? ?// 重新加載頁面
彈出框
可以在 JavaScript 中創(chuàng)建三種消息框：警告框、確認(rèn)框、提示框。
警告框
警告框經(jīng)常用于確保用戶可以得到某些信息。當(dāng)警告框出現(xiàn)后，用戶需要點(diǎn)擊確定按鈕才能繼續(xù)進(jìn)行操作。
語法：alert("你看到了嗎？");
確認(rèn)框（了解即可）
- 確認(rèn)框用于使用戶可以驗(yàn)證或者接受某些信息。
- 當(dāng)確認(rèn)框出現(xiàn)后，用戶需要點(diǎn)擊確定或者取消按鈕才能繼續(xù)進(jìn)行操作。
- 如果用戶點(diǎn)擊確認(rèn)，那么返回值為 true。如果用戶點(diǎn)擊取消，那么返回值為 false。
語法：confirm("你確定嗎？")
提示框（了解即可）
- 提示框經(jīng)常用于提示用戶在進(jìn)入頁面前輸入某個(gè)值。
- 當(dāng)提示框出現(xiàn)后，用戶需要輸入某個(gè)值，然后點(diǎn)擊確認(rèn)或取消按鈕才能繼續(xù)操縱。
- 如果用戶點(diǎn)擊確認(rèn)，那么返回值為輸入的值。如果用戶點(diǎn)擊取消，那么返回值為 null。
語法：prompt("請(qǐng)?jiān)谙路捷斎?#34;,"你的答案")
計(jì)時(shí)相關(guān)
通過使用 JavaScript，我們可以在一定時(shí)間間隔之后來執(zhí)行代碼，而不是在函數(shù)被調(diào)用后立即執(zhí)行。我們稱之為計(jì)時(shí)事件。
setTimeout()
語法：var t=setTimeout("JS語句",毫秒)
- setTimeout() 方法會(huì)返回某個(gè)值。在上面的語句中，值被儲(chǔ)存在名為 t 的變量中。假如你希望取消這個(gè) setTimeout()，你可以使用這個(gè)變量名來指定它。
- setTimeout() 的第一個(gè)參數(shù)是含有 JavaScript 語句的字符串。這個(gè)語句可能諸如 "alert('5 seconds!')"，或者對(duì)函數(shù)的調(diào)用，諸如 alertMsg()"。
- 第二個(gè)參數(shù)指示從當(dāng)前起多少毫秒后執(zhí)行第一個(gè)參數(shù)（1000 毫秒等于一秒）。
clearTimeout()
語法：clearTimeout(setTimeout_variable)
// 在指定時(shí)間之后執(zhí)行一次相應(yīng)函數(shù) var timer = setTimeout(function(){alert(123);}, 3000) // 取消setTimeout設(shè)置 clearTimeout(timer);setInterval()
- setInterval() 方法可按照指定的周期（以毫秒計(jì)）來調(diào)用函數(shù)或計(jì)算表達(dá)式。
- setInterval() 方法會(huì)不停地調(diào)用函數(shù)，直到 clearInterval() 被調(diào)用或窗口被關(guān)閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數(shù)。
語法：setInterval("JS語句",時(shí)間間隔)
返回值：一個(gè)可以傳遞給 Window.clearInterval() 從而取消對(duì) code 的周期性執(zhí)行的值。
clearInterval()
- clearInterval() 方法可取消由 setInterval() 設(shè)置的 timeout。
- clearInterval() 方法的參數(shù)必須是由 setInterval() 返回的 ID 值。
語法：clearInterval(setinterval返回的ID值)
// 每隔一段時(shí)間就執(zhí)行一次相應(yīng)函數(shù) var timer = setInterval(function(){console.log(123);}, 3000) // 取消setInterval設(shè)置 clearInterval(timer);稍微大一點(diǎn)的示例：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>定時(shí)器</title><script>var intervalId;function f() {var timeStr = (new Date()).toLocaleString();var inputEle = document.getElementById("i1");inputEle.value = timeStr;}function start() {f();if (intervalId === undefined) {intervalId = setInterval(f, 1000);}}function end() {clearInterval(intervalId);intervalId = undefined;}</script> </head> <body><input type="text" id="i1"> <input type="button" value="開始" id="start" onclick="start();"> <input type="button" value="結(jié)束" id="end" onclick="end();"> </body> </html>DOM
DOM（Document Object Model）是一套對(duì)文檔的內(nèi)容進(jìn)行抽象和概念化的方法。當(dāng)網(wǎng)頁被加載時(shí)，瀏覽器會(huì)創(chuàng)建頁面的文檔對(duì)象模型（Document Object Model）。HTML DOM 模型被構(gòu)造為對(duì)象的樹。
W3C DOM 標(biāo)準(zhǔn)被分為 3 個(gè)不同的部分：
- ?? ??? ?* 核心 DOM - 針對(duì)任何結(jié)構(gòu)化文檔的標(biāo)準(zhǔn)模型
- ?? ??? ?* XML DOM - 針對(duì) XML 文檔的標(biāo)準(zhǔn)模型
- ?? ??? ?* HTML DOM - 針對(duì) HTML 文檔的標(biāo)準(zhǔn)模型
HTML DOM 樹
DOM標(biāo)準(zhǔn)規(guī)定HTML文檔中的每個(gè)成分都是一個(gè)節(jié)點(diǎn)(node)：
- 文檔節(jié)點(diǎn)(document對(duì)象)：代表整個(gè)文檔
- 元素節(jié)點(diǎn)(element 對(duì)象)：代表一個(gè)元素（標(biāo)簽）
- 文本節(jié)點(diǎn)(text對(duì)象)：代表元素（標(biāo)簽）中的文本
- 屬性節(jié)點(diǎn)(attribute對(duì)象)：代表一個(gè)屬性，元素（標(biāo)簽）才有屬性
- 注釋是注釋節(jié)點(diǎn)(comment對(duì)象)
JavaScript 可以通過DOM創(chuàng)建動(dòng)態(tài)的 HTML：
- JavaScript 能夠改變頁面中的所有 HTML 元素
- JavaScript 能夠改變頁面中的所有 HTML 屬性
- JavaScript 能夠改變頁面中的所有 CSS 樣式
- JavaScript 能夠?qū)撁嬷械乃惺录龀龇磻?yīng)
查找標(biāo)簽
直接查找
- document.getElementById? ? ? ? ? ? ? ? ? // 根據(jù)id屬性值獲取元素對(duì)象。id屬性值一般唯一
- document.getElementsByClassName // 根據(jù)Class屬性值獲取元素對(duì)象們。返回值是一個(gè)數(shù)組
- document.getElementsByTagName? ? //?根據(jù)元素名稱獲取元素對(duì)象們。返回值是一個(gè)數(shù)組
- getElementsByName()? ? ? ? ? ? ? ? ? ? ? ? // 根據(jù)name屬性值獲取元素對(duì)象們。返回值是一個(gè)數(shù)組
間接查找
- parentElement? ? ? ? ? ? ?// 父節(jié)點(diǎn)標(biāo)簽元素
- children? ? ? ? ? ? ? ? ? ? ? ? // 所有子標(biāo)簽
- firstElementChild? ? ? ? ? // 第一個(gè)子標(biāo)簽元素
- lastElementChild? ? ? ? ? // 最后一個(gè)子標(biāo)簽元素
- nextElementSibling? ? ? ?//?下一個(gè)兄弟標(biāo)簽元素
- previousElementSibling //?上一個(gè)兄弟標(biāo)簽元素
節(jié)點(diǎn)操作
創(chuàng)建節(jié)點(diǎn)
//語法： createElement(標(biāo)簽名)//示例： var divEle = document.createElement("div");添加節(jié)點(diǎn)
// 語法： // 追加一個(gè)子節(jié)點(diǎn)（作為最后的子節(jié)點(diǎn)） somenode.appendChild(newnode)； // 把增加的節(jié)點(diǎn)放到某個(gè)節(jié)點(diǎn)的前邊。 somenode.insertBefore(newnode,某個(gè)節(jié)點(diǎn));// 示例： var imgEle=document.createElement("img"); imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg"); var d1Ele = document.getElementById("d1"); d1Ele.appendChild(imgEle);刪除節(jié)點(diǎn)：
// 獲得要?jiǎng)h除的元素，通過父元素調(diào)用該方法刪除。 somenode.removeChild(要?jiǎng)h除的節(jié)點(diǎn))替換節(jié)點(diǎn)：
// 語法： somenode.replaceChild(newnode, 某個(gè)節(jié)點(diǎn));屬性節(jié)點(diǎn)操作
// 獲取文本節(jié)點(diǎn)的值： var divEle = document.getElementById("d1") divEle.innerText divEle.innerHTML// 設(shè)置文本節(jié)點(diǎn)的值： var divEle = document.getElementById("d1") divEle.innerText="1" divEle.innerHTML="<p>2</p>"// attribute操作 var divEle = document.getElementById("d1"); divEle.setAttribute("age","18") divEle.getAttribute("age") divEle.removeAttribute("age")// 自帶的屬性還可以直接.屬性名來獲取和設(shè)置 imgEle.src imgEle.src="..."獲取值操作
語法：elementNode.value
適用于以下標(biāo)簽：
- .input
- .select
- .textarea
class的操作
var c1Ele=document.getElementsByClassName('c1')[0]c1Ele.className 獲取所有樣式類名(字符串) c1Ele.classList.remove(cls) 刪除指定類 c1Ele.classList.add(cls) 添加類 c1Ele.classList.contains(cls) 存在返回true，否則返回false c1Ele.classList.toggle(cls) 存在就刪除，否則添加指定CSS操作
obj.style.backgroundColor="red"JS操作CSS屬性的規(guī)律：
1.對(duì)于沒有中橫線的CSS屬性一般直接使用style.屬性名即可。如：
- obj.style.margin
- obj.style.width
- obj.style.left
- obj.style.position
2.對(duì)含有中橫線的CSS屬性，將中橫線后面的第一個(gè)字母換成大寫即可。如：
- obj.style.marginTop
- obj.style.borderLeftWidth
- obj.style.zIndex
- obj.style.fontFamily
事件
HTML 4.0 的新特性之一是有能力使 HTML 事件觸發(fā)瀏覽器中的動(dòng)作（action），比如當(dāng)用戶點(diǎn)擊某個(gè) HTML 元素時(shí)啟動(dòng)一段 JavaScript。下面是一個(gè)屬性列表，這些屬性可插入 HTML 標(biāo)簽來定義事件動(dòng)作。
常用事件
點(diǎn)擊事件 onclick 當(dāng)用戶點(diǎn)擊某個(gè)對(duì)象時(shí)調(diào)用的事件句柄。 ondblclick 當(dāng)用戶雙擊某個(gè)對(duì)象時(shí)調(diào)用的事件句柄。焦點(diǎn)事件 onfocus 元素獲得焦點(diǎn)。 // 練習(xí)：輸入框 onblur 元素失去焦點(diǎn)。 應(yīng)用場(chǎng)景：用于表單驗(yàn)證,用戶離開某個(gè)輸入框時(shí),代表已經(jīng)輸入完了,我們可以對(duì)它進(jìn)行驗(yàn)證.鍵盤事件 onkeydown 某個(gè)鍵盤按鍵被按下。 應(yīng)用場(chǎng)景: 當(dāng)用戶在最后一個(gè)輸入框按下回車按鍵時(shí),表單提交. onkeypress 某個(gè)鍵盤按鍵被按下并松開。 onkeyup 某個(gè)鍵盤按鍵被松開。加載事件 onload 一張頁面或一幅圖像完成加載。鼠標(biāo)事件 onmousedown 鼠標(biāo)按鈕被按下。 onmousemove 鼠標(biāo)被移動(dòng)。 onmouseout 鼠標(biāo)從某元素移開。 onmouseover 鼠標(biāo)移到某元素之上。選擇和改變 onselect 在文本框中的文本被選中時(shí)發(fā)生。 onchange 域的內(nèi)容被改變。 應(yīng)用場(chǎng)景：通常用于表單元素,當(dāng)元素內(nèi)容被改變時(shí)觸發(fā).（select聯(lián)動(dòng)）表單事件 onsubmit 確認(rèn)按鈕被點(diǎn)擊，使用的對(duì)象是form。 onreset 重置按鈕被點(diǎn)擊?綁定方式：
方式一：
<div id="d1" onclick="changeColor(this);">點(diǎn)我</div> <script>function changeColor(ths) {ths.style.backgroundColor="green";} </script>i注意：this 是實(shí)參，表示觸發(fā)事件的當(dāng)前元素。函數(shù)定義過程中的ths為形參。
方式二：
<div id="d2">點(diǎn)我</div> <script>var divEle2 = document.getElementById("d2");divEle2.onclick=function () {this.innerText="呵呵";} </script>搜索框示例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>搜索框示例</title></head> <body><input id="d1" type="text" value="請(qǐng)輸入關(guān)鍵字" onblur="blur()" onfocus="focus()"><script> function focus(){var inputEle=document.getElementById("d1");if (inputEle.value==="請(qǐng)輸入關(guān)鍵字"){inputEle.value="";} }function blur(){var inputEle=document.getElementById("d1");var val=inputEle.value;if(!val.trim()){inputEle.value="請(qǐng)輸入關(guān)鍵字";} } </script> </body> </html>select聯(lián)動(dòng)
<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>select聯(lián)動(dòng)</title> </head> <body> <select id="province"><option>請(qǐng)選擇省:</option> </select><select id="city"><option>請(qǐng)選擇市:</option> </select><script>data = {"河北省": ["廊坊", "邯鄲"], "北京": ["朝陽區(qū)", "海淀區(qū)"], "山東": ["威海市", "煙臺(tái)市"]};var p = document.getElementById("province");var c = document.getElementById("city");for (var i in data) {var optionP = document.createElement("option");optionP.innerHTML = i;p.appendChild(optionP);}p.onchange = function () {var pro = (this.options[this.selectedIndex]).innerHTML;var citys = data[pro];// 清空optionc.innerHTML = "";for (var i=0;i<citys.length;i++) {var option_city = document.createElement("option");option_city.innerHTML = citys[i];c.appendChild(option_city);}} </script> </body> </html>window.onload
當(dāng)我們給頁面上的元素綁定事件的時(shí)候，必須等到文檔加載完畢。因?yàn)槲覀儫o法給一個(gè)不存在的元素綁定事件。
window.onload事件在文件加載過程結(jié)束的時(shí)候觸發(fā)。此時(shí)，文檔中的所有對(duì)象都位于DOM中，并且所有圖像，腳本，鏈接和子框架都已完成加載。
注意：.onload()函數(shù)存在覆蓋現(xiàn)象。
總結(jié)
以上是生活随笔為你收集整理的前端之 BOM 和 DOM的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【杨中科解惑】我该怎么选择？选择就是放弃
- 下一篇： 【智慧城市】-GIS数据获取SHP建筑数