前端基礎之BOM和DOM和三個小示例(計時器、搜尋框、select聯動)
阿新 • • 發佈：2018-11-11
一、BOM和DOM JavaScript分為 ECMAScript，DOM，BOM。 BOM（Browser Object Model）是指瀏覽器物件模型，它使 JavaScript 有能力與瀏覽器進行“對話”。 DOM （Document Object Model）是指文件物件模型，通過它，可以訪問HTML文件的所有元素。 二、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的子物件(BOM) 注意： Window物件是客戶端JavaScript最高層物件之一，由於window物件是其它大部分物件的共同祖先，在呼叫window物件的方法和屬性時，可以省略window物件的引用。 例如：window.document.write()可以簡寫成：document.write()。 1、location物件(重) window.location 物件用於獲得當前頁面的地址 (URL)，並把瀏覽器重定向到新的頁面 window.location.href 可以寫成：location.href // 獲取URL location.href="URL" // 跳轉到指定頁面 location.reload() // 重新載入頁面 2、計時相關(重) 設定一個時間間隔，在一定時間間隔之後再來執行JS程式碼，就是計時事件 1.setTimeout() 語法： var t = setTimeout("JS語句",毫秒) 解析： setTimeout() 方法會返回某個值，這個值是你執行當前setTimeout程式碼的任務編號(任務id，第幾個任務)，把這個值儲在一個變數中。 當你想取消這個setTimeout()任務時，就可以使用這個變數來指定取消它。 setTimeout() 的第一個引數是含有JavaScript 語句的字串，如 setTimeout("alert('I Love U')", 3000 )，也可以是函式名，如果是函式名則不需要雙引號，如setTimeout(f, 3000 )， 還可以是匿名函式，如 setTimeout(function(){alert('I Love U')}, 3000 )， 第二個引數是指從當前起多少毫秒後執行第一個引數（1000 毫秒等於一秒） 例如： JS語句：<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title></title> <script> setTimeout("alert('I Love U')", 3000 ) </script> </head> <body> <p>請靜候三秒</p> </body> </html> 函式名：<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title></title> <script> function f(){ alert('I Love U') } setTimeout(f, 3000 ) </script> </head> <body> <p>請靜候三秒</p> </body> </html> 2.clearTimeout() 語法： clearTimeout(setTimeout_variable) 例子： // 在指定時間之後執行一次相應函式 var tid = setTimeout(function(){alert('hello world');}, 2000) // 取消setTimeout設定 clearTimeout(tid); 3.setInterval() setInterval() 方法可按照指定的週期來呼叫函式或計算表示式。 setInterval() 方法會無限迴圈呼叫函式，直到 clearInterval() 被呼叫或視窗被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的引數。 語法： setInterval("JS語句",時間間隔) 返回值： 一個可以傳遞給 Window.clearInterval() 從而取消setInterval的週期性執行 4.clearInterval() clearInterval() 方法可取消由 setInterval() 設定的 timeout。 clearInterval() 方法的引數必須是由 setInterval() 返回的 ID 值。 語法： clearInterval(setinterval返回的ID值) 例子： // 每隔一段時間就執行一次相應函式 var tid = setInterval(function(){console.log('hello world!');}, 2000) // 取消setInterval設定 clearInterval(tid); 3、navigator物件 瀏覽器物件，通過這個物件可以判定使用者所使用的瀏覽器，包含了瀏覽器相關資訊。 navigator.appName // Web瀏覽器全稱 navigator.appVersion // Web瀏覽器廠商和版本的詳細字串 navigator.userAgent // 客戶端絕大部分資訊 navigator.platform // 瀏覽器執行所在的作業系統 4、screen物件 螢幕物件，不常用 屬性： screen.availWidth - 可用的螢幕寬度 screen.availHeight - 可用的螢幕高度 5、history物件 window.history 物件包含瀏覽器的歷史。 瀏覽歷史物件，包含了使用者對當前頁面的瀏覽歷史，但我們無法檢視具體的地址，可以簡單的用來前進或後退一個頁面。 history.forward() // 前進一頁 history.back() // 後退一頁 6、彈出框 可以在 JavaScript 中建立三種訊息框：警告框、確認框、提示框。 1.警告框 警告框經常用於確保使用者可以得到某些資訊。 當警告框出現後，使用者需要點選確定按鈕才能繼續進行操作。 語法： alert("警告資訊"); 2.確認框 確認框用於使使用者可以驗證或者接受某些資訊。 當確認框出現後，使用者需要點選確定或者取消按鈕才能繼續進行操作。 如果使用者點選確認，那麼返回值為 true。如果使用者點選取消，那麼返回值為 false。 語法： confirm("你確定嗎？") 3.提示框 提示框經常用於提示使用者在進入頁面前輸入某個值。 當提示框出現後，使用者需要輸入某個值，然後點選確認或取消按鈕才能繼續操縱。 如果使用者點選確認，那麼返回值為輸入的值。如果使用者點選取消，那麼返回值為 null。 語法： prompt("請輸入","答案") 四、DOM DOM（Document Object Model）是一套對文件的內容進行抽象和概念化的方法。 當網頁被載入時，瀏覽器會建立頁面的文件物件模型（Document Object Model）。 HTML DOM 模型被構造為物件的樹 五、HTML DOM 樹 圖：DOM樹 DOM標準規定HTML文件中的每個成分都是一個節點(node)： 文件節點(document物件)：代表整個文件 元素節點(element 物件)：代表一個元素（標籤） 文字節點(text物件)：代表元素（標籤）中的文字 屬性節點(attribute物件)：代表一個屬性，元素（標籤）才有屬性 註釋是註釋節點(comment物件) JavaScript 可以通過DOM建立動態的 HTML： JavaScript 能夠改變頁面中的所有 HTML 元素 JavaScript 能夠改變頁面中的所有 HTML 屬性 JavaScript 能夠改變頁面中的所有 CSS 樣式 JavaScript 能夠對頁面中的所有事件做出反應 六、查詢標籤 1、直接查詢 document.getElementById 根據ID獲取一個標籤 document.getElementsByClassName 根據class屬性獲取 document.getElementsByTagName 根據標籤名獲取標籤合集 注意：找ID的時候，ID是唯一的，所以getElement 沒有s,而其他的都有s 2、間接查詢 parentElement 父節點標籤元素 children 所有子標籤 firstElementChild 第一個子標籤元素 lastElementChild 最後一個子標籤元素 nextElementSibling 下一個兄弟標籤元素 previousElementSibling 上一個兄弟標籤元素 3、例子 注意：返回陣列的那些查詢方式，可以通過索引取出具體的某個標籤 // 找到ID為d1的節點(元素) var divEle = document.getElementById('d1'); // ID為d1的節點的父節點 divEle.parentElement; // ID為d1的節點的所有子節點(返回一個包含所有子節點的陣列) dEle.children; dEle.children[0]; // 取出第一個元素 // ID為d1的節點的第一個子節點 dEle.firstElementChild; // ID為d1的節點的最後一個子節點 dEle.lastElementChild; // ID為d1的節點的下一個兄弟節點 dEle.nextElementSibling; //ID為d1的節點的上一個兄弟節點 dEle.previousElementSibling; 七、節點操作(增刪改的節點都是子節點，是要基於父節點進行的) 1、建立節點 語法： document.createElement("標籤名") 示例： var pEle = document.createElement("p"); 2、新增節點(子節點) 追加一個子節點（作為最後的子節點） somenode.appendChild(newnode)； 把增加的節點放到某個節點的前邊。 somenode.insertBefore(newnode,某個節點); 示例1： //建立節點 var pEle = document.createElement("p"); //先找一個父節點 var dEle = document.getElementById("d"); //把子節點追加到父節點 dEle.appendChild(pEle); 示例2： //建立節點 var pEle = document.createElement("p"); //先找一個父節點 var dEle = document.getElementById("d"); //父節點裡面的某個節點 var d1 = document.getElementById('d1'); //把子節點放到d1這個節點前面 dEle.insertBefore(pEle,d1); 3、刪除節點 語法： 獲得要刪除的元素，通過父元素呼叫該方法刪除 somenode.removeChild(要刪除的節點) 示例： //先找一個父節點 var dEle = document.getElementById("d"); //找到父節點裡面想要刪除的子節點 var d1 = document.getElementById('d1'); //刪除子節點 dEle.removeChild(d1); 4、替換節點 語法： somenode.replaceChild(newnode, 某個節點); 示例： //建立節點 var pEle = document.createElement("p"); //先找一個父節點 var dEle = document.getElementById("d"); //父節點裡面的某個節點 var d1 = document.getElementById('d1'); //用新建的節點替換d1 dEle.replaceChild(pEle,d1); 5、屬性節點 1.獲取文字節點的值： //獲取某個節點 var dEle = document.getElementById("d"); //獲取某個節點的Text文字內容 dEle.innerText; //獲取某個節點的HTML內容 dEle.innerHTML; 注意：Text文字內容是不認識標籤的，即不認識div、span等標籤的，而HTML是認識標籤的。 2.設定文字節點的值： //獲取某個節點 var dEle = document.getElementById("d"); //設定某個節點的Text文字內容 dEle.innerText = "Hello World!"; //設定某個節點的HTML內容 dEle.innerHTML = "<div>Hello World!</div>"; 3.屬性(attribute)操作 語法： 為某節點增加一個屬性 somenode.setAttribute("屬性名","值"); 獲取這個屬性值 somenode.getAttribute("屬性名"); 刪除屬性 somenode.removeAttribute("屬性名"); 示例： var dEle = document.getElementById("d"); dEle.setAttribute("name","dd") dEle.getAttribute("name") dEle.removeAttribute("name") // 自帶的屬性還可以直接.屬性名來獲取和設定 imgEle.src imgEle.src="..." 6、獲取值操作 語法： elementNode.value 適用於以下標籤： input select textarea 示例： //input的值 var inputEle = document.getElementById("i"); console.log(inputEle.value); //select的值 var sEle = document.getElementById("s"); console.log(sEle.value); //textarea的值 var tEle = document.getElementById("t"); console.log(tEle.value); 7、class的操作 somenode.className 獲取所有樣式類名(字串) somenode.classList 獲取所有樣式類名(陣列) somenode.classList.remove("cls") 刪除指定類 somenode.classList.add("cls") 新增類 somenode.classList.contains("cls") 存在返回true，否則返回false somenode.classList.toggle("cls") 存在就刪除(返回false)，不存在則新增(返回true) 示例： HTML程式碼： <div class="c1 c2" id="d1"></div> //找到ID為d1這個節點 var divEle = document.getElementById("d1"); //獲取這個節點的class樣式名 divEle.className; // "c1 c2" //獲取這個節點的class樣式名 divEle.classList; // ["c1", "c2", value: "c1 c2"] // 刪除c2這個樣式 divEle.classList.remove("c2"); // 增加c3在這個樣式 divEle.classList.add("c3"); // 判斷c3這樣樣式是否存在 divEle.classList.contains("c3"); // true //c3存在，所以刪除這個樣式 divEle.classList.toggle("c3"); 8、指定CSS操作 JS操作CSS屬性的規律 1.對於沒有中橫線的CSS屬性一般直接使用style.屬性名即可。如： somenode.style.margin somenode.style.width somenode.style.left somenode.style.position 2.對含有中橫線的CSS屬性，將中橫線後面的第一個字母換成大寫即可。 如：CSS中的margin-top、background-color、z-index、font-family等 somenode.style.marginTop somenode.style.backgroundColor somenode.style.zIndex somenode.style.fontFamily 示例： var divEle = document.getElementById("d1"); divEle.style.backgroundColor = "red"; 八、事件 1、常用事件 onclick 當用戶點選某個物件時呼叫的事件控制代碼。 ondblclick 當用戶雙擊某個物件時呼叫的事件控制代碼。(double簡寫dbl) onfocus 元素獲得焦點。 輸入框 onblur 元素失去焦點。 應用場景：用於表單驗證,使用者離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證. onchange 域的內容被改變。 應用場景：通常用於表單元素,當元素內容被改變時觸發.（select聯動） onkeydown 某個鍵盤按鍵被按下。 應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交. onkeypress 某個鍵盤按鍵被按下並鬆開。 onkeyup 某個鍵盤按鍵被鬆開。 onload 一張頁面或一幅影象完成載入。 onmousedown 滑鼠按鈕被按下。 onmousemove 滑鼠被移動。 onmouseout 滑鼠從某元素移開。 onmouseover 滑鼠移到某元素之上。 onselect 在文字框中的文字被選中時發生。 onsubmit 確認按鈕被點選，使用的物件是form。 2、 繫結方式 方式一：在標籤中寫屬性的方式繫結 <div id="d1" onclick="changeColor(this);">點我改變背景顏色</div> <script> function changeColor(ths) { ths.style.backgroundColor="green"; } </script> 注意： this是實參，表示觸發事件的當前元素。 函式定義過程中的ths為形參。 方式二：通過JS程式碼繫結 <div id="d2">點我有驚喜</div> <script> var divEle = document.getElementById("d2"); divEle.onclick=function () { alert("驚不驚喜，刺不刺激！"); } </script> 3、示例
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="i1"> <input type="button" id="start" value="開始"> <button type="button" id="stop" value="停止">停止</button> <!--<input type="button" id="stop" value="停止">--> <script> // 把當前時間顯示到i1標籤中 function setTime() { // 1. 找到標籤 var i1Ele = document.getElementById('i1'); // 2. 拿到當前時間 var now = new Date(); // 3. 設定i1標籤的value屬性為now時間 i1Ele.setAttribute('value', now.toLocaleString()) } setTime(); // 定義一個存放計時器id的全域性變數 var t; // 點選開始按鈕，讓i1標籤中的時間動起來 // 1. 找到開始按鈕,繫結點選事件 var startBtn = document.getElementById('start'); startBtn.onclick = function () { // 要做的事兒 if (t === undefined) { // 一秒鐘執行一次設定value的動作 t = setInterval(setTime, 1000); } }; // 點選結束按鈕，終止設定時間的定時任務 // 1. 找到結束按鈕，繫結點選事件 var stopBtn = document.getElementById('stop'); stopBtn.onclick = function () { // 要做的事兒 // 清除上面的定時器 clearInterval(t); t = undefined; } </script> </body> </html>計時器示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>搜尋框示例</title> <script type="text/javascript"> function foo() { var inputEle = document.getElementById("i1"); inputEle.setAttribute('value', ''); } function foo1() { var inputEle = document.getElementById("i1"); inputEle.setAttribute('value', '請輸入關鍵字'); } </script> </head> <body> <div> <!--方式一：在在標籤中寫屬性的方式繫結--> <input type="text" id="i1" value="請輸入關鍵字" onfocus="foo()" onblur="foo1()"> <input type="button" value="搜尋"> </div> <!--方式二：通過JS程式碼繫結--> <input type="text" id="i2" value="請輸入關鍵字"> <input type="button" value="搜尋"> <script type="text/javascript"> var inputEle2 = document.getElementById('i2'); inputEle2.onfocus = function () { inputEle2.setAttribute('value',''); } inputEle2.onblur = function () { this.setAttribute('value','請輸入關鍵字'); } </script> </body> </html>搜尋框示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <select id="s1"> <option>請選擇省</option> </select> <select id="s2"> </select> <script> var data = {"廣東省": ["廣州市", "深圳市", "惠州"], "北京": ["朝陽區", "海淀區"], "山東": ["威海市", "煙臺市"]}; var s1Ele = document.getElementById('s1'); var s2Ele = document.getElementById('s2'); // 頁面一重新整理把所有的省載入到第一個select標籤中 for (var i in data) { console.log(i); // 建立一個option標籤 var op = document.createElement('option'); // 設定文字 op.innerText = i; // 把建立好的標籤追加到第一個select標籤內部 s1Ele.appendChild(op); } // 給第一個select標籤繫結一個值發生變化的事件 s1Ele.onchange = function () { // 0. 獲取當前select選中的值 var value = s1Ele.value; // 1. 去data裡找到對應的地區資訊 var data2 = data[value]; // 2. 清空第二個select標籤的option選項 s2Ele.innerText = ''; // 3. 把對應的地區資訊追加到第二個select標籤內部 for (var j=0;j<data2.length;j++) { // 建立一個option標籤 var op = document.createElement('option'); // 設定文字 op.innerText = data2[j]; // 把建立好的標籤新增到第二個select標籤內部 s2Ele.appendChild(op); } } </script> </body> </html>select聯動示例