前端基礎之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()。

BOM

window物件

　　

　　看上面的例子你會發現，name直接封裝到了window物件上，瞭解一下就可以了。

　　所有瀏覽器都支援 window 物件。它表示瀏覽器視窗。

　　*如果文件包含框架（frame 或 iframe 標籤），瀏覽器會為 HTML 文件建立一個 window 物件，併為每個框架建立一個額外的 window 物件（瞭解）。

　　*沒有應用於 window 物件的公開標準，不過所有瀏覽器都支援該物件（瞭解）。

　　所有 JavaScript 全域性物件、函式以及變數均自動成為 window 物件的成員。

　　全域性變數是 window 物件的屬性。全域性函式是 window 物件的方法。

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

　　一些常用的Window方法：（在瀏覽器偵錯程式的console裡面輸入下面這些屬性或者方法，就能看到對應的效果）

  • window.innerHeight – 瀏覽器視窗的內部高度
  • window.innerWidth – 瀏覽器視窗的內部寬度
  • window.open() – 開啟新視窗
  • window.close() – 關閉當前視窗 (只能關閉用js的window.open()開啟的頁面，瞭解一下就行了)

window的子物件 

　　navigator物件（瞭解即可）

　　　　瀏覽器物件，通過這個物件可以判定使用者所使用的瀏覽器，包含了瀏覽器相關資訊。

1
2
3
4
navigator.appName　　// Web瀏覽器全稱
navigator.appVersion　　// Web瀏覽器廠商和版本的詳細字串
navigator.userAgent　　// 客戶端絕大部分資訊
navigator.platform　　　// 瀏覽器執行所在的作業系統

　　

　　　　看示例：

　　　　

 

　　screen物件（瞭解即可）

　　　　螢幕物件，不常用。

　　　　一些屬性：

  • screen.availWidth – 可用的螢幕寬度
  • screen.availHeight – 可用的螢幕高度

　　history物件（瞭解即可）

　　　　window.history 物件包含瀏覽器的歷史。

　　　　瀏覽歷史物件，包含了使用者對當前頁面的瀏覽歷史，但我們無法檢視具體的地址，可以簡單的用來前進或後退一個頁面。

1
2
history.forward()  // 前進一頁，其實也是window的屬性，window.history.forward()
history.back()  // 後退一頁

　　

　　　　

 

　　location物件

　　　　window.location 物件用於獲得當前頁面的地址 (URL)，並把瀏覽器重定向到新的頁面。

　　　　常用屬性和方法：

1
2
3
location.href  獲取URL
location.href="URL" // 跳轉到指定頁面
location.reload() 重新載入頁面,就是重新整理一下頁面

　　

　　　

　　

　　上面的內容需要大家記住的是：

　　　　1.window物件

　　　　2.window的子物件：location的那幾個屬性和方法

　　　　3.其他的作為了解

 

　　我們下面來學些比較有意思有用的內容：

　　彈出框

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

　　警告框

　　　　警告框經常用於確保使用者可以得到某些資訊。

　　　　當警告框出現後，使用者需要點選確定按鈕才能繼續進行操作。

　　　　語法：

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

　　

　　　　

 

　　確認框（瞭解即可）

　　　　確認框用於使使用者可以驗證或者接受某些資訊。

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

　　　　如果使用者點選確認，那麼返回值為 true。如果使用者點選取消，那麼返回值為 false。

　　　　語法：

1
confirm("你確定嗎？")

　　

　　　　

　　　　　　　　　　

　　　　我們可以根據返回的true和false來判斷一下，然後根據這個值來使用location去跳轉對應的網站。

　　提示框（瞭解即可）

　　　　提示框經常用於提示使用者在進入頁面前輸入某個值。

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

　　　　如果使用者點選確認，那麼返回值為輸入的值。如果使用者點選取消，那麼返回值為預設值，就是第二個引數，如果沒有預設值那麼返回null。

　　　　語法：

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

　　

　　　　

　　　　可以通過使用者輸入的內容來判斷我們怎麼去進行後面的操作

　　除了那個警告框（用的也不都），其他的都很少用，比較醜陋，瞭解一下就行

　　計時相關（比較重要）

　　　　通過使用 JavaScript，我們可以在一定時間間隔之後來執行程式碼，而不是在函式被呼叫後立即執行。我們稱之為計時事件。

　　　　setTimeout()  一段時間後做一些事情

　　　　　　語法：

1
var t=setTimeout("JS語句",毫秒)  第一個引數js語句多數是寫一個函式，不然一般的js語句到這裡就直接執行了，先用函式封裝一下，返回值t其實就是一個id值（瀏覽器給你自動分配的）

　　

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

　　　　　　setTimeout() 的第一個引數是含有 JavaScript 語句的字串。這個語句可能諸如 “alert(`5 seconds!`)”，或者對函式的呼叫，諸如 alertMsg()”。

　　　　　　第二個引數指示從當前起多少毫秒後執行第一個引數（1000 毫秒等於一秒）。

　　　　　　

 

　　　　clearTimeout()

　　　　　　語法：

1
clearTimeout(setTimeout_variable)

　　　　舉個例子：

1
2
3
4
// 在指定時間之後執行一次相應函式
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout設定
clearTimeout(timer);

　　

　　　　setInterval() 每隔一段時間做一些事情

　　　　　　setInterval() 方法可按照指定的週期（以毫秒計）來呼叫函式或計算表示式。

　　　　　　setInterval() 方法會不停地呼叫函式，直到 clearInterval() 被呼叫或視窗被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的引數。

　　　　　　語法：

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

　　

　　　　　　返回值

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

　　　　clearInterval()

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

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

　　　　　　語法：

1
clearInterval(setinterval返回的ID值)

　　　　　　舉個例子：

1
2
3
4
// 每隔一段時間就執行一次相應函式
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 能夠對頁面中的所有事件做出反應（滑鼠點選事件，滑鼠移動事件等）

　　查詢標籤（和css一樣，你想操作某個標籤需要先找到它）

　　　　直接查詢

1
2
3
document.getElementById           根據ID獲取一個標籤
document.getElementsByClassName   根據class屬性獲取（可以獲取多個元素，所以返回的是一個陣列）
document.getElementsByTagName     根據標籤名獲取標籤合集

　　

　　　　例子：　

　　　　　

　　　　間接查詢

1
2
3
4
5
6
parentElement            父節點標籤元素
children                 所有子標籤
firstElementChild        第一個子標籤元素
lastElementChild         最後一個子標籤元素
nextElementSibling       下一個兄弟標籤元素
previousElementSibling   上一個兄弟標籤元素

　　

　　　　

　　　如果查詢出來的內容是個陣列，那麼就可以通過索引來取對應的標籤物件

　　　　

 

　　上面說的這些查詢標籤的方法，以後我們很少用，等學了JQuery，會有很好用、更全的查詢標籤的功能，上面這些大家簡單練習一下，有個瞭解就行了。

　　節點操作

　　　　建立節點（就是建立標籤）

　　　　　　語法：

　　　　　　createElement(標籤名)

　　　　　　示例：

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

　　

　　　　　

 

　　　　　

 

　　　　　新增節點

　　　　　　　　語法：

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

　　　　　　　　somenode.appendChild(newnode)；

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

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

　　　　　　　　示例：

1
2
3
4
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, 某個節點);

　　　　　　　　somenode是父級標籤，然後找到這個父標籤裡面的要被替換的子標籤，然後用新的標籤將該子標籤替換掉

　　　　　　屬性節點

　　　　　　　　獲取文字節點的值：

1
2
3
var divEle = document.getElementById("d1")
divEle.innerText  #輸入這個指令，一執行就能獲取該標籤和內部所有標籤的文字內容
divEle.innerHTML  #獲取的是該標籤內的所有內容，包括文字和標籤

　　

　　　　　　

　　　　　　

 

　　　　　　　　設定文字節點的值：

1
2
3
var divEle = document.getElementById("d1")
divEle.innerText="1" 
divEle.innerHTML="<p>2</p>" #能識別成一個p標籤

　　　　　　　　attribute操作

1
2
3
4
5
6
7
8
var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")  #比較規範的寫法
divEle.getAttribute("age")
divEle.removeAttribute("age")
 
// 自帶的屬性還可以直接.屬性名來獲取和設定，如果是你自定義的屬性，是不能通過.來獲取屬性值的
imgEle.src
imgEle.src="..."

　　

　　　獲取值操作

　　　　　　語法：

　　　　　　elementNode.value

　　　　　　適用於以下標籤，使用者輸入或者選擇型別的標籤：

　　　　　　1.input   

　　　　　　2.select

　　　　　　3.textarea 

1
2
3
4
5
6
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的操作

1
2
3
4
5
6
7
8
className  獲取所有樣式類名(字串)
 
首先獲取標籤物件
 
標籤物件.classList.remove(cls)  刪除指定類
classList.add(cls)  新增類
classList.contains(cls)  存在返回true，否則返回false
classList.toggle(cls)  存在就刪除，否則新增，toggle的意思是切換，有了就給你刪除，如果沒有就給你加一個

　　

　　　　　　例如：我想將c2的類加到class裡面去

　　　　　　　　

　　　　　　　　

 

　　　　　　

　　　　指定CSS操作

1
obj.style.backgroundColor="red"

　　

　　　　　　JS操作CSS屬性的規律：

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

1
2
3
4
obj.style.margin
obj.style.width
obj.style.left
obj.style.position

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

1
2
3
4
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

　　

　　　　　　　　

 

　　我們上面所說的這些修改樣式的方法，是不是應該應用在使用者的某些操作上啊，如果你使用者點選了某個內容，讓它變變顏色之類的，給使用者一些好看的效果或者指示的效果啊，所以這就要和我們下面要學的事件結合起來要做的事情，通過事件+上面的樣式修改來實現。

事件

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

　　常用事件(就先說一下onfocus，onblur，onclick，onchange吧，其他的回頭再說~~)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
onclick        當使用者點選某個物件時呼叫的事件控制程式碼。
ondblclick     當使用者雙擊某個物件時呼叫的事件控制程式碼。
 
onfocus        元素獲得焦點。               // 練習：輸入框
onblur         元素失去焦點。               應用場景：用於表單驗證,使用者離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證.
onchange       域的內容被改變。             應用場景：通常用於表單元素,當元素內容被改變時觸發.（select聯動）
 
onkeydown      某個鍵盤按鍵被按下。          應用場景: 當使用者在最後一個輸入框按下回車按鍵時,表單提交.
onkeypress     某個鍵盤按鍵被按下並鬆開。
onkeyup        某個鍵盤按鍵被鬆開。
onload         一張頁面或一幅影像完成載入。
onmousedown    滑鼠按鈕被按下。
onmousemove    滑鼠被移動。
onmouseout     滑鼠從某元素移開。
onmouseover    滑鼠移到某元素之上。
 
onselect      在文字框中的文字被選中時發生。
onsubmit      確認按鈕被點選，使用的物件是form。

　　

 　　繫結方式：

　　　　方式一：（已經不常用了，多數用方式二了）

1
2
3
4
5
6
<div id="d1" onclick="changeColor(this);">點我</div> 
<script> 
  function changeColor(ths) { 
    ths.style.backgroundColor="green";
  }
</script>

　　

　　　　注意：

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

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

　　　　方式二：

1
2
3
4
5
6
7
8
<div id="d2">點我</div>
<script>
  var divEle2 = document.getElementById("d2");
  divEle2.onclick=function () {
　　 //console.log(this)
    this.innerText="呵呵"; #哪個標籤觸發的這個事件，this就指向誰
  }
</script>

　　

　　　　注意一個問題：

　　　　　　

 

　　　　　　

 　　　　　　

　　　　　　還有一種解決辦法就是將script標籤寫到body標籤最下面

 　　　　　　

　　　　　　

　　　　結合計時器的事件示例，input框裡面動態顯示時間:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!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>定時器</title>
  <script>  //當js程式碼中有找標籤的操作的時候，別忘了頁面載入的時候的順序，以防出現找不到標籤的情況出現，我們可以將這個script標籤放到body標籤最下面，或者用window.onload，<br>這裡我沒有放，你們練習的時候放到下面去
    var intervalId; //用來儲存定時器物件，因為開始定時器是一個函式，結束定時器是一個函式，兩個函式都是操作的一個定時器，讓他們互相能夠操作這個定時器，<br>就需要一個全域性變數來接受一下這個物件
　　
　　
　　//把當前事件放到id為i1的input標籤裡面
    function f() {
      var timeStr = (new Date()).toLocaleString(); // 1.拿到當前事件
      var inputEle = document.getElementById("i1");// 2.獲取input標籤物件
      inputEle.value = timeStr;  //3.將事件賦值給input標籤的value屬性
    }
　　//開始定時任務
    function start() {
      f();
      if (intervalId === undefined) { //如果不加這個判斷條件，你每次點選開始按鈕，就建立一個定時器，每點一次就建立一個定時器，點的次數多了就會在頁面上生成好多個定時器，<br>並且點選停止按鈕的時候，只能停止最後一個定時器，這樣不好，也不對，所以加一個判斷
        intervalId = setInterval(f, 1000);
      }
    }
    //結束定時任務
    function end() {
      clearInterval(intervalId); //　清除對應的那個定時器
      intervalId = undefined;
    }
 
  </script>
</head>
<body>
 
<input type="text" id="i1">
<input type="button" value="開始" id="start" onclick="start();">
<input type="button" value="結束" id="end" onclick="end();">
</body>
</html>

　　

　　　　事件示例：

　　　　　　搜尋框示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜尋框示例</title>
 
</head>
<body>
    <input id="d1" type="text" value="請輸入關鍵字" onblur="blur()" onfocus="focus()">
     
<script>
function focus(){  //如果在標籤中寫的blur()等方法，沒有傳入this引數，那麼我們就需要自己來獲取一下這個標籤，例如下面的getElementById(`d1`)
    var inputEle=document.getElementById("d1");
    if (inputEle.value==="請輸入關鍵字"){
        inputEle.value="";
　　　　 //inputEle.setAttribute(`value`,``)
    }
}
 
function blur(){
    var inputEle=document.getElementById("d1");
    var val=inputEle.value;
    if(!val.trim()){
        inputEle.value="請輸入關鍵字";
    }
}
</script>
</body>
</html>

　　　　　　select聯動：選擇省份，自動列出所有的城市，例如：選擇河北省就顯示河北省所有的市

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!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");
  //頁面一重新整理就將所有的省份都新增到select標籤中
  for (var i in data) {
    var optionP = document.createElement("option"); //建立option標籤
    optionP.innerHTML = i; //將省份的資料新增到option標籤中
    p.appendChild(optionP);//將option標籤新增到select標籤中
  }
  //只要select中選擇的值發生變化的時候，就可以觸發一個onchange事件，那麼我們就可以通過這個事件來完成select標籤聯動
  p.onchange = function () {
    //1.獲取省的值
    var pro = (this.options[this.selectedIndex]).innerHTML;//this.selectedIndex是當前選擇的option標籤的索引位置，this.options是獲取所有的option標籤，<br>通過索引拿到當前選擇的option標籤物件，然後.innerHTML獲取物件中的內容，也就是省份
    //還可以這樣獲取省：var pro = this.value;
    var citys = data[pro]; //2. 通過上面獲得的省份去data裡面取出該省對應的所有的市
    // 3. 清空option
    c.innerHTML = ""; //清空顯示市的那個select標籤裡面的內容
　　
 
    //4.迴圈所有的市，然後新增到顯示市的那個select標籤中
    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>

　　

　　window.onload

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

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

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

相關文章