前端基礎學習（4） BOM DOM 節點操作 事件
前端基礎學習（4） BOM DOM 節點操作 事件
一、今日內容
- BOM (Browser Object Model)
- DOM (Documentaty Object Model)
- 事件
二、BOM
BOM，即瀏覽器物件模型，顧名思義，就是利用 JavaScript 實現一些對瀏覽器物件的操作；主要包含 window 物件、計時器、彈出框等，以及 window 物件的子物件 navigator 物件、screen 物件、history 物件、location 物件；
-
window 物件
當我們在瀏覽器控制檯宣告一個新變數
var name = 'hello world';，我們可以發現通過window.name獲取到與name相同的結果，這是因為其實我們在控制檯宣告的所有變數，其實都是在 window 物件下宣告的，下面介紹的其他物件，也都是 window 物件的子物件；window 物件表示瀏覽器視窗，它具備如下一些方法：window.innerHeight // 瀏覽器視窗的內部高度 window.innerWidth // 瀏覽器視窗的內部寬度 window.open(); // 開啟新視窗 window.open(); // 關閉當前視窗（只能關閉由window.open()開啟的頁面） -
navigator 物件
navigator 物件指的是瀏覽器物件，通過這個物件可以判定使用者所使用的瀏覽器，包含了瀏覽器相關資訊。
navigator.appName // Web瀏覽器全稱 navigator.appVersion // Web瀏覽器廠商和版本的詳細字元表 navigator.userAgent // 客戶端絕大部分資訊 navigator.platform // 瀏覽器執行所在的作業系統 -
screen 物件
screen 物件代表螢幕物件。
screen.availWidth // 可用的螢幕亮度 screen.availHeight // 可用的螢幕高度 -
history 物件
history 物件包含瀏覽器的歷史，通過瀏覽歷史物件，我們無法檢視具體的URL，只能簡單的用來前進或者後退一個頁面。
history.forward() // 前進一頁 history.back() // 後退一頁 -
location 物件
location 物件可以獲取當前頁面的URL，並且把瀏覽器重新定向到新的頁面。
location.href // 獲取URL location.href = "URL"; // 跳轉到指定頁面 location.reload(); // 重新載入頁面，就是重新整理一下頁面 -
彈出框
可以通過 JavaScript 建立三種訊息框：警告框、確認框、提示框；
-
警告框
alert("這是一個警告框"); -
確認框
如果點選確認，返回值為 true，如果點選取消，返回值為 false；
confirm("這是一個確認框"); -
提示框
如果點選確認，那麼返回值為輸入的值。如果使用者點選取消，那麼返回值為預設值，就是第二個引數，如果沒有預設值返回 null；
prompt("這是一個提示框", '預設返回值'); -
計時相關
在 JavaScript 中，我們可以設定一個時間計時物件，來實現一定時間間隔後執行部分程式碼，而不是函式被呼叫後立即執行，我麼稱之為計時事件；
-
setTimeout 一段時間後執行
var t = setTimeout("console.log('hello world');", 1000); // 第一個引數為執行語句，第二個引數為延遲時間，以ms為單位 // 注意：第一個引數js語句最好是寫一個函式，不然一般的js語句到這裡就會直接執行，先用函式封裝一下，返回的為id值 setTimeout(confirm(), 3000); // 會立即執行 setTimeout("confirm();", 3000); // 延遲後執行 setTimeout(confirm, 3000); // 延遲執行 setTimeout(function () {confirm();}, 3000); // 推薦使用方式，與上面的那種等價（無引數情況下）利用 clearTimeout 清除計時事件：
var a = setTimeout(confirm, 3000); clearTimeout(a); -
setInterval 每隔一段時間執行
用法與 setTimeout 相同，同樣利用 clearInterval 可以清除計時事件；
-
-
三、DOM
DOM，即文件物件模型是一套對文件的內容進行抽象和概念化的方法。當網頁被載入時，瀏覽器會建立頁面的文件物件模型，DOM 描繪了一個層次化的節點樹，允許開發人員新增、移除和修改頁面的某一部分。
-
節點層次
DOM 可以將任何 HTML 檔案描繪成一個由多層節點構成的結構。節點可以分為幾種不同的型別，每種型別分別表示文件中不同的資訊及標記，每個節點都擁有各自的特點、資料和方法，另外也與其他節點存在某種關係。下面以一個 HTML 為例：
<html> <head> <title>Sample Page</title> </head> <body> <p>hello world!</p> </body> <html>可以將這個簡單的 HTML 文件表示為一個層次結構：
-
查詢標籤
DOM 支援通過節點層級結構尋找節點的操作，同時也可以根據節點的位置尋找關聯的節點；
-
直接查詢
document.getElementsById('id'); // 根據ID獲取一個標籤，返回標籤物件 document.getElementsByClassName('className'); // 根據class屬性獲取(獲取多個值以列表形式返回) document.getElementByTagName('tagName'); // 根據標籤名獲取（獲取多個值以列表形式返回） -
間接查詢
var a = document.getElementById('ID'); a.parentElement; // 父節點標籤元素 a.children; // 所有子標籤 a.firstElementChild; // 第一個子標籤元素 a.lastElementChild; // 最後一個子標籤元素 a.nextElementSibling; // 下一個兄弟標籤元素 a.previousElementSibling; // 上一個兄弟標籤元素
-
-
節點操作
-
建立節點（即建立標籤）
// 後插法 var a = document.createElement('a'); var dd = document.getElementById('dd'); dd.appendChild(a); // 將建立的a標籤新增到dd標籤的最後 // 前插法 var d = document.getElementById('div'); // 父級標籤 var a = document.createElement('a'); // 建立一個新的a標籤 var d2 = d.children[0]; // 找到父級標籤的某個兒子標籤 d.insertBefore(a, d2); // 將a標籤插入到d2兒子標籤的前面 // 刪除節點 d.remove(a); // 兒子替換 d.replaceChild(a, d2); // 用a替換d2節點 -
文字操作
// 修改節點內文字 d.innerText = "hello world"; // 中間新增html內容 d.innerHTML = "<a href='https://www.baidu.com'>百度</a>";
-
-
屬性值操作
var d = document.getElementById('div'); d.setAttribute('href', 'http://www.baidu.com'); // 設定屬性值 d.getAttribute('href'); // 獲取屬性值 d.removeAttribute('href'); // 移除屬性 -
class 屬性操作
var d = document.getElementById('div'); d.classList; // 獲取d的class屬性 d.classList.add('cls_demo'); // 增加對應的class值 d.classList.remove('cls_demo'); // 刪除對應的class值 d.classList.contains('cls_demo'); // 判別有無該class值，返回boolean值 d.classList.toggle('cls_demo'); // 如果有對應class值就刪除，如果沒有就新增 -
CSS 操作
var d = document.getElementById('div'); d.style.backgroundColor = 'deeppink'; // 有橫槓的CSS屬性，寫法改為駱駝法； d.style.height = '1000px';
四、事件
JavaScript 和 HTML 之間的互動是通過事件來實現的，事件處理程式（事件偵聽器）即相應某個時間的函式，他們都以 on 開頭，如 onclick 是處理 click 時間的事件處理程式：
<!--繫結事件方式1-->
<div id="d1" class="c1" onclick="f1();"></div>
<script>
function f1() {
var d = document.getElemetnById('d1');
d.style.backgroundColor = 'yellow';
}
</script>
<!--繫結事件方式2-->
<div id="d1" class="c1"></div>
<script>
var d = document.getElemetnById('d1');
d.onclick = function f1() {
d.style.backgroundColor = 'yellow';
}
</script>
<!--繫結的函式還可以傳參-->
<div id="d1" class="c1" onclick="f1(this);"></div>
<script>
function f1(ths){
// var d = document.getElementById('d1');
ths.style.backgroundColor = 'yellow';
}
</script>
除了 onclick 外，事件處理程式還包括：
// onclick事件，單擊某個物件觸發
// ondblclick事件，雙擊某個物件觸發
// onfocus事件，獲取游標觸發
// onblur事件，失去游標觸發
// onchange事件，內容發生變化時觸發的事件
// onkeydown 某個鍵盤按鍵被按下
// onkeypress 某個鍵盤按鍵被按下並鬆開
// onkeyup 某個鍵盤按鍵被鬆開
// onload 一張頁面或者一副影象完成載入
// onmousedown 滑鼠按鈕被按下
// onmousemove 滑鼠被移動
// onmouseout 滑鼠從某元素移開
// onmouseover 滑鼠移動到某元素上
// onselect 在文字框中的文字被選中
// onsubmit 確認按鈕被點選