前戲

到目前為止，我們已經學過了JavaScript的一些簡單的語法。但是這些簡單的語法，并沒有和瀏覽器有任何交互。

也就是我們還不能制作一些我們經常看到的網頁的一些交互，我們需要繼續學習BOM和DOM相關知識。

JavaScript分為 ECMAScript，DOM，BOM。

?

BOM（Browser Object Model）是指瀏覽器對象模型，它使 JavaScript 有能力與瀏覽器進行“對話”。

DOM （Document Object Model）是指文檔對象模型，通過它，可以訪問HTML文檔的所有元素。

?

Window對象是客戶端JavaScript最高層對象之一，由于window對象是其它大部分對象的共同祖先，在調用window對象的方法和屬性時，可以省略window對象的引用。例如：window.document.write()可以簡寫成：document.write()。

window對象

所有瀏覽器都支持?window?對象。它表示瀏覽器窗口。

*如果文檔包含框架（frame 或 iframe 標簽），瀏覽器會為 HTML 文檔創建一個 window 對象，并為每個框架創建一個額外的 window 對象。

*沒有應用于 window 對象的公開標準，不過所有瀏覽器都支持該對象。

所有 JavaScript 全局對象、函數以及變量均自動成為 window 對象的成員。

全局變量是 window 對象的屬性。全局函數是 window 對象的方法。

接下來要講的HTML DOM 的 document 也是 window 對象的屬性之一。

一些常用的Window方法：

• window.innerHeight - 瀏覽器窗口的內部高度
• window.innerWidth - 瀏覽器窗口的內部寬度
• window.open() - 打開新窗口
• window.close() - 關閉當前窗口

window的子對象?

navigator對象（了解即可）

瀏覽器對象，通過這個對象可以判定用戶所使用的瀏覽器，包含了瀏覽器相關信息。

navigator.appName　　// Web瀏覽器全稱 navigator.appVersion　　// Web瀏覽器廠商和版本的詳細字符串 navigator.userAgent　　// 客戶端絕大部分信息 navigator.platform　　　// 瀏覽器運行所在的操作系統

?

screen對象（了解即可）

屏幕對象，不常用。

一些屬性：

• screen.availWidth - 可用的屏幕寬度
• screen.availHeight - 可用的屏幕高度

history對象（了解即可）

window.history 對象包含瀏覽器的歷史。

瀏覽歷史對象，包含了用戶對當前頁面的瀏覽歷史，但我們無法查看具體的地址，可以簡單的用來前進或后退一個頁面。

history.forward() // 前進一頁 history.back() // 后退一頁

?

location對象

window.location 對象用于獲得當前頁面的地址 (URL)，并把瀏覽器重定向到新的頁面。

常用屬性和方法：

location.href 獲取URL location.href="URL" // 跳轉到指定頁面 location.reload() 重新加載頁面

?

彈出框

可以在 JavaScript 中創建三種消息框：警告框、確認框、提示框。

警告框

警告框經常用于確保用戶可以得到某些信息。

當警告框出現后，用戶需要點擊確定按鈕才能繼續進行操作。

語法：

alert("你看到了嗎？");

?

確認框（了解即可）

確認框用于使用戶可以驗證或者接受某些信息。

當確認框出現后，用戶需要點擊確定或者取消按鈕才能繼續進行操作。

如果用戶點擊確認，那么返回值為 true。如果用戶點擊取消，那么返回值為 false。

語法：

confirm("你確定嗎？")

?

提示框（了解即可）

提示框經常用于提示用戶在進入頁面前輸入某個值。

當提示框出現后，用戶需要輸入某個值，然后點擊確認或取消按鈕才能繼續操縱。

如果用戶點擊確認，那么返回值為輸入的值。如果用戶點擊取消，那么返回值為 null。

語法：

prompt("請在下方輸入","你的答案")

?

計時相關

通過使用 JavaScript，我們可以在一定時間間隔之后來執行代碼，而不是在函數被調用后立即執行。我們稱之為計時事件。

setTimeout()

語法：

var t=setTimeout("JS語句",毫秒)

?

setTimeout() 方法會返回某個值。在上面的語句中，值被儲存在名為 t 的變量中。假如你希望取消這個 setTimeout()，你可以使用這個變量名來指定它。

setTimeout() 的第一個參數是含有 JavaScript 語句的字符串。這個語句可能諸如 "alert('5 seconds!')"，或者對函數的調用，諸如 alertMsg()"。

第二個參數指示從當前起多少毫秒后執行第一個參數（1000 毫秒等于一秒）。

clearTimeout()

語法：

clearTimeout(setTimeout_variable)

?

舉個例子：

// 在指定時間之后執行一次相應函數 var timer = setTimeout(function(){alert(123);}, 3000) // 取消setTimeout設置 clearTimeout(timer);

?

setInterval()

setInterval() 方法可按照指定的周期（以毫秒計）來調用函數或計算表達式。

setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數。

語法：

setInterval("JS語句",時間間隔)

?

?

返回值

一個可以傳遞給 Window.clearInterval() 從而取消對 code 的周期性執行的值。

clearInterval()

clearInterval() 方法可取消由 setInterval() 設置的 timeout。

clearInterval() 方法的參數必須是由 setInterval() 返回的 ID 值。

語法：

clearInterval(setinterval返回的ID值)

舉個例子：

// 每隔一段時間就執行一次相應函數 var timer = setInterval(function(){console.log(123);}, 3000) // 取消setInterval設置 clearInterval(timer);

?

DOM

DOM（Document Object Model）是一套對文檔的內容進行抽象和概念化的方法。?

當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）。

HTML DOM 模型被構造為對象的樹。

HTML DOM 樹

DOM標準規定HTML文檔中的每個成分都是一個節點(node)：

• 文檔節點(document對象)：代表整個文檔
• 元素節點(element 對象)：代表一個元素（標簽）
• 文本節點(text對象)：代表元素（標簽）中的文本
• 屬性節點(attribute對象)：代表一個屬性，元素（標簽）才有屬性
• 注釋是注釋節點(comment對象)　

JavaScript 可以通過DOM創建動態的 HTML：

• JavaScript 能夠改變頁面中的所有 HTML 元素
• JavaScript 能夠改變頁面中的所有 HTML 屬性
• JavaScript 能夠改變頁面中的所有 CSS 樣式
• JavaScript 能夠對頁面中的所有事件做出反應

查找標簽

直接查找

document.getElementById 根據ID獲取一個標簽 document.getElementsByClassName 根據class屬性獲取 document.getElementsByTagName 根據標簽名獲取標簽合集

?

注意：

涉及到DOM操作的JS代碼應該放在文檔的哪個位置。

間接查找

parentElement 父節點標簽元素 children 所有子標簽 firstElementChild 第一個子標簽元素 lastElementChild 最后一個子標簽元素 nextElementSibling 下一個兄弟標簽元素 previousElementSibling 上一個兄弟標簽元素

?

節點操作

創建節點

語法：

createElement(標簽名)

示例：

var divEle = document.createElement("div");

?

添加節點

語法：

追加一個子節點（作為最后的子節點）

somenode.appendChild(newnode)；

把增加的節點放到某個節點的前邊。

somenode.insertBefore(newnode,某個節點);

示例：

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

?

刪除節點：

語法：

獲得要刪除的元素，通過父元素調用該方法刪除。

somenode.removeChild(要刪除的節點)

替換節點：

語法：

somenode.replaceChild(newnode, 某個節點);

屬性節點

獲取文本節點的值：

var divEle = document.getElementById("d1") divEle.innerText divEle.innerHTML

?

設置文本節點的值：

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")// 自帶的屬性還可以直接.屬性名來獲取和設置 imgEle.src imgEle.src="..."

?

獲取值操作

語法：

elementNode.value

適用于以下標簽：

• .input? ?
• .select
• .textarea?

var iEle = document.getElementById("i1"); console.log(iEle.value); var sEle = document.getElementById("s1"); console.log(sEle.value); var tEle = document.getElementById("t1"); console.log(tEle.value);

?

class的操作

className 獲取所有樣式類名(字符串)classList.remove(cls) 刪除指定類 classList.add(cls) 添加類 classList.contains(cls) 存在返回true，否則返回false classList.toggle(cls) 存在就刪除，否則添加

?

指定CSS操作

obj.style.backgroundColor="red"

?

JS操作CSS屬性的規律：

1.對于沒有中橫線的CSS屬性一般直接使用style.屬性名即可。如：

obj.style.margin obj.style.width obj.style.left obj.style.position

?

2.對含有中橫線的CSS屬性，將中橫線后面的第一個字母換成大寫即可。如：

obj.style.marginTop obj.style.borderLeftWidth obj.style.zIndex obj.style.fontFamily

?

事件

HTML 4.0 的新特性之一是有能力使 HTML 事件觸發瀏覽器中的動作（action），比如當用戶點擊某個 HTML 元素時啟動一段 JavaScript。下面是一個屬性列表，這些屬性可插入 HTML 標簽來定義事件動作。

常用事件

onclick 當用戶點擊某個對象時調用的事件句柄。 ondblclick 當用戶雙擊某個對象時調用的事件句柄。onfocus 元素獲得焦點。 // 練習：輸入框 onblur 元素失去焦點。 應用場景：用于表單驗證,用戶離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證. onchange 域的內容被改變。 應用場景：通常用于表單元素,當元素內容被改變時觸發.（select聯動）onkeydown 某個鍵盤按鍵被按下。 應用場景: 當用戶在最后一個輸入框按下回車按鍵時,表單提交. onkeypress 某個鍵盤按鍵被按下并松開。 onkeyup 某個鍵盤按鍵被松開。 onload 一張頁面或一幅圖像完成加載。 onmousedown 鼠標按鈕被按下。 onmousemove 鼠標被移動。 onmouseout 鼠標從某元素移開。 onmouseover 鼠標移到某元素之上。onselect 在文本框中的文本被選中時發生。 onsubmit 確認按鈕被點擊，使用的對象是form。

?

?綁定方式：

方式一：

<div id="d1" οnclick="changeColor(this);">點我</div> <script>function changeColor(ths) {ths.style.backgroundColor="green";} </script>

?

注意：

this是實參，表示觸發事件的當前元素。

函數定義過程中的ths為形參。

方式二：

<div id="d2">點我</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</title><meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <input type="text" id="i1"> <button id="b1">開始</button> <button id="b2">結束</button><script>var t;function showTime() {var i1Ele = document.getElementById('i1');var time = new Date();i1Ele.value = time.toLocaleString();}showTime();var b1Ele = document.getElementById('b1');b1Ele.onclick = function (ev) {if (!t){t = setInterval(showTime,1000)}};var b2Ele = document.getElementById('b2');b2Ele.onclick = function (ev) {clearInterval(t);t = undefined};</script> </body> </html> 定時器示例 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>搜索框示例</title></head> <body><input id="d1" type="text" value="請輸入關鍵字" οnblur="blur()" οnfοcus="focus()"><script> function focus(){var inputEle=document.getElementById("d1");if (inputEle.value==="請輸入關鍵字"){inputEle.value="";} }function blur(){var inputEle=document.getElementById("d1");var val=inputEle.value;if(!val.trim()){inputEle.value="請輸入關鍵字";} } </script> </body> </html> 搜索框示例 搜索框示例 <!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聯動</title> </head> <body> <select id="province"><option>請選擇省:</option> </select><select id="city"><option>請選擇市:</option> </select><script>data = {"河北省": ["廊坊", "邯鄲"], "北京": ["朝陽區", "海淀區"], "山東": ["威海市", "煙臺市"]};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> select聯動

?

window.onload

當我們給頁面上的元素綁定事件的時候，必須等到文檔加載完畢。因為我們無法給一個不存在的元素綁定事件。

window.onload事件在文件加載過程結束的時候觸發。此時，文檔中的所有對象都位于DOM中，并且所有圖像，腳本，鏈接和子框架都已完成加載。

注意：.onload()函數存在覆蓋現象。

轉載于:https://www.cnblogs.com/Ryan-Yuan/p/11492746.html

總結

以上是生活随笔為你收集整理的前端基础之BOM和DOM的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。