前端基礎之BOM和DOM

七、月發表於2019-02-17
前端

到目前為止，我們已經學過了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)：

1.文件節點(document物件)：代表整個文件

2.元素節點(element 物件)：代表一個元素（標籤）

3.文字節點(text物件)：代表元素（標籤）中的文字

4.屬性節點(attribute物件)：代表一個屬性，元素（標籤）才有屬性

5.註釋是註釋節點(comment物件)　

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

1.JavaScript 能夠改變頁面中的所有 HTML 元素

2.JavaScript 能夠改變頁面中的所有 HTML 屬性

3.JavaScript 能夠改變頁面中的所有 CSS 樣式

4.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" onclick="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>
複製程式碼

事件示例：前端基礎之BOM和DOM


前端基礎之BOM和DOM

前端基礎之BOM和DOM前端基礎之BOM和DOM

window.onload

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

window.onload事件在檔案載入過程結束的時候觸發。此時，文件中的所有物件都位於DOM中，並且所有影象，指令碼，連結和子框架都已完成載入。

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

相關文章