一、BOM和DOM概述
通過之前的兩篇文章，相信大家已經掌握了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()，
二、BOM
2.1 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() - 關閉當前視窗
2.2 window的子物件
2.2.1 navigator物件（了解）
瀏覽器物件，通過這個物件可以判定用戶所使用的瀏覽器，包含了瀏覽器相關資訊，
navigator.appName // Web瀏覽器全稱
navigator.appVersion // Web瀏覽器廠商和版本的詳細字串
navigator.userAgent // 客戶端絕大部分資訊
navigator.platform // 瀏覽器運行所在的作業系統
2.2.2 screen物件（了解）
螢屏物件，不常用，
一些屬性：
- screen.availWidth - 可用的螢屏寬度
- screen.availHeight - 可用的螢屏高度
2.2.3 history物件（了解）
window.history 物件包含瀏覽器的歷史，
瀏覽歷史物件，包含了用戶對當前頁面的瀏覽歷史，但我們無法查看具體的地址，可以簡單的用來前進或后退一個頁面，
history.forward() // 前進一頁
history.back() // 后退一頁
2.2.4 location物件
window.location物件用于獲得當前頁面的地址（URL），并把瀏覽器重定向到新的頁面，
常用屬性和方法：
location.href 獲取URL
location.href = "https://www.cnblogs.com/JZjuechen/p/URL" // 跳轉到指定頁面
location.reload() 重新加載頁面
2.3 彈出框
可以在JavaScript中創建三種訊息框：警告框、確認框、提示框，
2.3.1 警告框
警告框經常用于確保用戶可以得到某些資訊，
當警告框出現后，用戶需要點擊確定按鈕才能繼續進行操作，
語法：
alert("你看到了嗎？");
2.3.2 確認框
確認框用于使用戶可以驗證或者接收某些資訊，
當確認框出現后，用戶需要點擊確定或者取消按鈕才能繼續進行操作，
如果用戶點擊確認，那么回傳值為true；如果用戶點擊取消，那么回傳值為false，
語法：
confirm("你確定嗎？");
2.3.3 提示框
提示框經常用于提示用戶在進入頁面前輸入某個值，
當提示框出現后，用戶需要輸入某個值，然后點擊確認或取消按鈕才能繼續操縱，
如果用戶點擊確認，那么回傳值為輸入的值；如果用戶點擊取消，那么回傳值為null，
語法：
prompt("請在下方輸入你的答案");
2.4 計時相關
通過使用JavaScript，我們可以在一定時間間隔之后來執行代碼，而不是在函式被呼叫后立即執行，我們稱之為計時事件，
2.4.1 setTimeout()
語法：
var t=setTimeout("JS陳述句",毫秒)
setTimeout() 方法會回傳某個值，在上面的陳述句中，值被儲存在名為 t 的變數中，假如你希望取消這個 setTimeout()，你可以使用這個變數名來指定它，
setTimeout() 的第一個引數是含有 JavaScript 陳述句的字串，這個陳述句可能諸如 "alert('5 seconds!')"，或者對函式的呼叫，諸如 alertMsg()，
第二個引數表示從當前起多少毫秒后執行第一個引數（1000毫秒等于一秒），
2.4.2 clearTimeout()
語法：
clearTimeout(setTimeout_variable)
舉個例子：
// 在指定時間之后執行一次相應函式
var timer = setTimeout(function(){alert(123);}, 3000);
// 取消setTimeout設定
clearTimeout(timer);
2.4.3 setInterval()
setInterval() 方法可按照指定的周期（以毫秒計）來呼叫函式或計算運算式，
setInterval() 方法會不停地呼叫函式，直到 clearInterval() 被呼叫或視窗被關閉，由 setInterval() 回傳的 ID 值可用作 clearInterval() 方法的引數，
語法：
setInterval("JS陳述句",時間間隔)
回傳值：
一個可以傳遞給 Window.clearInterval() 從而取消對 code 的周期性執行的值，
2.4.4 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 模型被構造為物件的樹，
3.1 HTML DOM 樹
DOM標準規定HTML檔案中的每個成分都是一個節點（node）：
- 檔案節點(document物件)：代表整個檔案
- 元素節點(element 物件)：代表一個元素（標簽）
- 文本節點(text物件)：代表元素（標簽）中的文本
- 屬性節點(attribute物件)：代表一個屬性，元素（標簽）才有屬性
- 注釋是注釋節點(comment物件)
JavaScript 可以通過DOM創建動態的 HTML：
- JavaScript 能夠改變頁面中的所有 HTML 元素
- JavaScript 能夠改變頁面中的所有 HTML 屬性
- JavaScript 能夠改變頁面中的所有 CSS 樣式
- JavaScript 能夠對頁面中的所有事件做出反應
3.2 查找標簽
3.2.1 直接查找
document.getElementById 根據ID獲取一個標簽
document.getElementsByClassName 根據class屬性獲取標簽合集
document.getElementsByTagName 根據標簽名獲取標簽合集
注意：
在不使用window.onload的情況下，涉及到DOM操作的JS代碼應該放在檔案的最后，
3.2.2 間接查找
parentElement 父節點標簽元素
children 所有子標簽
firstElementChild 第一個子標簽元素
lastElementChild 最后一個子標簽元素
nextElementSibling 下一個兄弟標簽元素
previousElementSibling 上一個兄弟標簽元素
3.3 節點操作
3.3.1 創建節點
語法：
createElement(標簽名)
示例 ：
var divEle = document.createElement("div");
3.3.2 添加節點
語法：
-
追加一個子節點（作為最后的子節點）：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);
3.3.3 洗掉節點
語法：
獲得要洗掉的元素，通過父元素呼叫該方法洗掉：somenode.removeChild(要洗掉的節點)，
3.3.4 替換節點
語法：
somenode.replaceChild(newnode, 某個節點)，
3.3.5 屬性節點
獲取文本節點的值：
var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML
設定文本節點的值：
var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"
innerText：
-
不加賦值符號是獲取內部文本
-
加了賦值符號是設定內置文本
-
不可以識別HTML標簽
innerHTML：
- 不加賦值符號是獲取內部標簽+文本
- 加了賦值符號是設定內置標簽+文本
- 可以識別HTML標簽
attribute操作：
var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")
// 自帶的屬性還可以直接通過.屬性名來獲取和設定
imgEle.src
imgEle.src = "https://www.cnblogs.com/JZjuechen/p/..."
3.3.6 獲取值操作
語法：
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);
特殊的檔案資料獲取：
標簽物件.value —— 僅獲取一個檔案地址；
標簽物件.files[0] —— 獲取單個檔案資料；
標簽物件.files —— 獲取所有檔案資料；
3.3.7 class的操作
className 獲取所有樣式類名(字串形式)
classList 獲取所有的類
classList.remove(cls) 洗掉指定類
classList.add(cls) 添加類
classList.contains(cls) 存在回傳true，否則回傳false
classList.toggle(cls) 存在就洗掉，否則就添加
3.3.8 指定CSS樣式操作
obj.style.backgroundColor="red"
JS操作CSS屬性的規律：
-
對于沒有中橫線的CSS屬性一般直接使用style.屬性名即可，如：
obj.style.margin obj.style.width obj.style.left obj.style.position -
對含有中橫線的CSS屬性，將中橫線后面的第一個字母換成大寫即可，如：
obj.style.marginTop obj.style.borderLeftWidth obj.style.zIndex obj.style.fontFamily
四、事件
HTML 4.0 的新特性之一是有能力使 HTML 事件觸發瀏覽器中的動作（action），比如當用戶點擊某個 HTML 元素時啟動一段 JavaScript，下面是一個屬性串列，這些屬性可插入 HTML 標簽來定義事件動作，
4.1 常用事件
-
onclick：當用戶點擊某個物件時呼叫的事件句柄， -
ondblclick：當用戶雙擊某個物件時呼叫的事件句柄， -
onfocus：元素獲得焦點，（應用場景：輸入框） -
onblur：元素失去焦點，（應用場景：用于表單驗證,用戶離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證） -
onchange：域的內容被改變，（應用場景：通常用于表單元素,當元素內容被改變時觸發，如：select聯動） -
onkeydown：某個鍵盤按鍵被按下，（應用場景: 當用戶在最后一個輸入框按下回車按鍵時,表單提交） -
onkeypress：某個鍵盤按鍵被按下并松開， -
onkeyup：某個鍵盤按鍵被松開， -
onload：一張頁面或一幅影像完成加載， -
onmousedown：滑鼠按鈕被按下， -
onmousemove：滑鼠被移動， -
onmouseout：滑鼠從某元素移開， -
onmouseover：滑鼠移到某元素之上， -
onselect： 在文本框中的文本被選中時發生， -
onsubmit：確認按鈕被點擊，使用的物件是form，
4.2 系結方式
-
方式一：
<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>
4.3 事件示例
-
定時器示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <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(date = new Date()) { var i1Ele = document.getElementById('i1') var time = date; i1Ele.value = https://www.cnblogs.com/JZjuechen/p/time.toLocaleString(); } showTime(); var b1Ele = document.getElementById('b1'); b1Ele.onclick = function () { 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="https://www.cnblogs.com/JZjuechen/p/請輸入關鍵字"> <script> var inputEle = document.getElementById("d1"); inputEle.onfocus = function () { if (inputEle.value =https://www.cnblogs.com/JZjuechen/p/=="請輸入關鍵字") { console.log(inputEle.value) inputEle.valuehttps://www.cnblogs.com/JZjuechen/p/= ""; } } inputEle.onblur = function () { var val = inputEle.value; if (!val.trim()) { inputEle.valuehttps://www.cnblogs.com/JZjuechen/p/= "請輸入關鍵字"; } } </script> </body> </html> -
select省市聯動：
<!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>select省市聯動</title> </head> <body> <select id="province"> <option>請選擇省:</option> </select> <select id="city"> <option>請選擇市:</option> </select> <script> data = https://www.cnblogs.com/JZjuechen/p/{"河北省": ["廊坊", "邯鄲"], "北京": ["朝陽區", "海淀區"], "山東": ["威海市", "煙臺市"], "上海": ["浦東區","青浦區","嘉定區"] }; let p = document.getElementById("province"); let c = document.getElementById("city"); for (let i in data) { let optionP = document.createElement("option"); optionP.innerHTML = i; optionP.value = https://www.cnblogs.com/JZjuechen/p/i; p.appendChild(optionP); } p.onchange = function () { let pro = this.value let citys = data[pro]; // 清空option c.innerHTML =""; for (let i = 0; i < citys.length; i++) { let option_city = document.createElement("option"); option_city.innerHTML = citys[i]; c.appendChild(option_city); } } </script> </body> </html>
4.4 window.onload
當我們給頁面上的元素系結事件的時候，必須等到檔案加載完畢，因為我們無法給一個不存在的元素系結事件，
window.onload事件會在檔案加載程序結束的時候觸發，此時，檔案中的所有物件都位于DOM中，并且所有影像，腳本，鏈接和子框架都已完成加載，
注意：
.onload()函式存在覆寫現象，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/423843.html
標籤：JavaScript