前端之BOM和DOM

  • 2019 年 12 月 16 日
  • 筆記

一、BOM

BOM(Browser Object Model)瀏覽器對象模型，它使得JS能夠與瀏覽器進行『對話』（交互，通過JS對頁面內容進行操作）。

1.1window對象

window對象表示瀏覽器的窗口，所有的瀏覽器都支援window對象。

所有的JS全局對象、函數以及變數均自動成為window對象成員。全局變數是window對象的屬性，全局函數是window對象的方法。

常用的window方法：

  • window.innerHight-瀏覽器窗口的內部高度
  • window.innerWidth-瀏覽器窗口的內部寬度
  • window.open()-打開新窗口
  • window.close()-關閉當前窗口
window.open('https://www.cnblogs.com/ghylpb/','','width=400px,height=400px,top=200px,left=200px')  Window {parent: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}  window.open('https://www.cnblogs.com/ghylpb/','','width=400px,height=400px')  Window {parent: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}  window.open('https://www.cnblogs.com/ghylpb/','','width=400px,height=400px,top=400px,left=400px')  Window {parent: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}  //open的第一個參數是網址，第二、三個參數是彈窗的大小，第四、五個參數是彈窗彈出的位置（這是一個直角坐標），不設置默認為0,0也就是左上角

1.2window的子對象

1.2.1navigator對象（了解）

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

navigator.appName　　// Web瀏覽器全稱  navigator.appVersion　　// Web瀏覽器廠商和版本的詳細字元串  navigator.userAgent　　// 客戶端絕大部分資訊  navigator.platform　　　// 瀏覽器運行所在的作業系統
window.navigator.appName  "Netscape"  navigator.appName//可以省去window  "Netscape"  navigator.appVersion  "5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.97 Safari/537.36"  navigator.userAgent  "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.97 Safari/537.36"

1.2.2screen對象（了解）

螢幕對象，不常用。

一些屬性：

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

1.2.3history對象（了解）

window.history 對象包含瀏覽器的歷史。

瀏覽歷史對象，包含了用戶對當前頁面的瀏覽歷史，但我們無法查看具體的地址，可以簡單的用來前進或後退一個頁面。

history.forward()  // 前進一頁  history.back()  // 後退一頁

1.2.4location對象

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

常用屬性和方法：

kk  //獲取URL  kk="URL" // 跳轉到指定頁面  location.reload() //重新載入頁面

1.2.5彈出框

1.2.5.1警告框

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

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

語法：

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

1.2.5.2確認框

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

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

如果用戶點擊確認，那麼返回值為 true。如果用戶點擊取消，那麼返回值為 false。

語法：

confirm("你確定嗎？")

1.2.5.7提示框

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

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

如果用戶點擊確認，那麼返回值為輸入的值。如果用戶點擊取消，那麼返回值為 null。

語法：

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

1.2.5.3計時相關

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

1.2.5.4setTimeout()

語法：

var t=setTimeout("JS語句",毫秒)

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

setTimeout() 的第一個參數是含有 JavaScript 語句的字元串。這個語句可能諸如 "alert('5 seconds!')"，或者對函數的調用，諸如 alertMsg()"。

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

1.2.5.5clearTimeout()

語法：

clearTimeout(setTimeout_variable)

舉個例子：

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

1.2.5.6setInterval()

setInterval() 方法可按照指定的周期（以毫秒計）來調用函數或計算表達式。

setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數。

語法：

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

返回值

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

1.2.5.7clearInterval()

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

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

語法：

clearInterval(setinterval返回的ID值)

舉個例子：

// 每隔一段時間就執行一次相應函數  var timer = setInterval(function(){console.log(123);}, 3000)  // 取消setInterval設置  clearInterval(timer);
//每個兩秒執行一次func，八秒以後結束  <body>  <script>      function func(){          alert('警告')      }      function show() {          var t = setInterval(func,2000);          function inner() {              clearInterval(t)          }          setTimeout(inner,8000)//八秒以後執行inner      }      show()  </script>  </body>

setTimeout和setInterval的區別

setTimeout()和setInterval()經常被用來處理延時和定時任務。setTimeout() 方法用於在指定的毫秒數後調用函數或計算表達式,而setInterval()則可以在每隔指定的毫秒數循環調用函數或表達式，直到clearInterval把它清除。setTimeout()只執行一次，而setInterval可以多次調用。

二、DOM

DOM(Document Object Model)文檔對象模型是一套對文檔內容進行抽象和概念化的方法。

HTML DOM被稱為對象的樹

2.1HTML DOM樹

DOM標準規定HTML文檔中的每個成分都是一個節點(node)：

  • 文檔節點(document對象)：代表整個文檔
  • 元素節點(element 對象)：代表一個元素（標籤）
  • 文本節點(text對象)：代表元素（標籤）中的文本
  • 屬性節點(attribute對象)：代表一個屬性，元素（標籤）才有屬性
  • 注釋是注釋節點(comment對象)　

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

  • JavaScript 能夠改變頁面中的所有 HTML 元素
  • JavaScript 能夠改變頁面中的所有 HTML 屬性
  • JavaScript 能夠改變頁面中的所有 CSS 樣式
  • JavaScript 能夠對頁面中的所有事件做出反應

2.2查找標籤

2.2.1直接查找

document.getElementById           根據ID獲取一個標籤  document.getElementsByClassName   根據class屬性獲取//以數組的形式存值  document.getElementsByTagName     根據標籤名獲取標籤合集
var divEle = document.getElementsByTagName('div')

注意：

涉及到DOM操作的JS程式碼應該放在文檔的哪個位置。

2.2.2間接查找

parentElement            父節點標籤元素  children                 所有子標籤  firstElementChild        第一個子標籤元素,得到的是具體的程式碼  lastElementChild         最後一個子標籤元素  nextElementSibling       下一個兄弟標籤元素  previousElementSibling   上一個兄弟標籤元素
var divEle = document.getElementsByClassName('c1')[0]//間接查找的方法都是對象的方法，需要對象點方法點出來，所以這裡需要取數組中的一個元素（數組中的元素才是我們要找的對象）  undefined  divEle.children  HTMLCollection(3) [span, p, span]  divEle.children[1]

2.3節點操作

2.3.1創建節點

語法：

createElement(標籤名)

示例：

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

2.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);
img.src = '1234.jpeg'  imgEle.src = '1234.jpeg'  "1234.jpeg"  imgEle  <img src=​"1234.jpeg">​  imgEle.name = 'xiaoyu'  "xiaoyu"  imgEle  <img src=​"1234.jpeg" name=​"xiaoyu">​  imgEle.setAttribute('name','xiao')//這種方法可以為對象的屬性添加屬性值。（不管對象是否有這個屬性，沒有的話會先創建再添加）  undefined  imgEle  <img src=​"1234.jpeg" name=​"xiao">​      divEle.append(imgEle)//將創建的標籤添加到divEle內部的最下方  undefined  divEle  <div class=​"c1">​"div1      "<span>​          span1 in div​</span>​<p>​          p in div      ​</p>​<span>​span2 in div​</span>​<img src=​"1234.jpeg" name=​"xiao">​</div>​

innerText和innerHTML

divEle.innerText//獲取文本  "div1 span1 in div    p in div    span2 in div"  divEle.innerHTML//獲取文本和HTML程式碼  "div1      <span>          span1 in div</span>      <p>          p in div      </p>          <span>span2 in div</span>      "

2.3.3刪除節點

語法：

獲得要刪除的元素，通過父元素調用該方法刪除。

somenode.removeChild(要刪除的節點)

2.3.4替換節點

語法：

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="..."

2.3.5獲取值操作

語法：

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);

2.3.6class的操作

className  獲取所有樣式類名(字元串)  classList.remove(cls)  刪除指定類  classList.add(cls)  添加類  classList.contains(cls)  存在返回true，否則返回false  classList.toggle(cls)  存在就刪除，否則添加

2.3.7指定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

2.4事件

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

2.4.1常用事件

onclick        當用戶點擊某個對象時調用的事件句柄。  ondblclick     當用戶雙擊某個對象時調用的事件句柄。    onfocus        元素獲得焦點。               // 練習：輸入框  onblur         元素失去焦點。               應用場景：用於表單驗證,用戶離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證.  onchange       域的內容被改變。             應用場景：通常用於表單元素,當元素內容被改變時觸發.（select聯動）    onkeydown      某個鍵盤按鍵被按下。          應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交.  onkeypress     某個鍵盤按鍵被按下並鬆開。  onkeyup        某個鍵盤按鍵被鬆開。  onload         一張頁面或一幅影像完成載入。  onmousedown    滑鼠按鈕被按下。  onmousemove    滑鼠被移動。  onmouseout     滑鼠從某元素移開。  onmouseover    滑鼠移到某元素之上。    onselect      在文本框中的文本被選中時發生。  onsubmit      確認按鈕被點擊，使用的對象是form。

2.4.2事件的綁定方式

方式一：

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

注意：

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

函數定義過程中的this為形參。

方式二：

<div id="d2">點我</div>  <script>    var divEle2 = document.getElementById("d2");    divEle2.onclick=function () {      this.innerText="呵呵";    }  </script>

示例1：用按鈕控制背景顏色的切換

<head>      <meta charset="UTF-8">      <title>Title</title>      <style>          .c1{              height:400px;              width:400px;              border-radius: 50%;          }          .bg_green{              background-color: green;          }          .bg_red{              background-color: red;          }      </style>  </head>  <body>  <div class="c1 bg_green bg_red"></div>  <button id="d1">變色</button>  <script>      let btnEle = document.getElementById('d1');      btnEle.onclick = function () {          //找到div標籤          var divEle = document.getElementsByClassName('c1')[0];          //修改類屬性，有則刪除，無則添加          divEle.classList.toggle('bg_red')      }  </script>  </body>

示例2：

獲取焦點示例：

<head>      <meta charset="UTF-8">      <title>Title</title>  </head>  <body>  <input type="text" value="js學習" id="d1" >  <input type="text" value="python學習" placeholder="輸入你要查找的內容">  <!--placeholder=""設置input框點擊以後的默認顯示，顯示文字是灰色的提示資訊-->  <script>      var iEle = document.getElementById('d1');     //input 獲取焦點      iEle.onfocus = function () {          //將input框中的文本值清楚          iEle.value = ''      };      //input框失去焦點      iEle.onblur = function () {          iEle.value = '輸入你想查找的內容'      }  </script>  </body>

示例3：

動態展示當前時間

<head>      <meta charset="UTF-8">      <title>Title</title>  </head>  <body>  <input type="text" id="d1">  <button id="b1">開始</button>  <button id="b2">結束</button>  <script>      //先定義一個全局變數用於存儲時間      var t = null;      var b1Ele = document.getElementById('b1');      var b2Ele = document.getElementById('b2');      var iEle = document.getElementById('d1');        function showTime(){          var currentTime = new Date();          var cTime = currentTime.toLocaleString();          iEle.value = cTime      }      //開始按鈕      b1Ele.onclick = function () {          if(!t){              t = setInterval(showTime,1000)          }          //這裡加判斷的目的是無論點擊多少次都只起一個showtime函數，如果沒有這個函數則會起很多個函數，          // 這就會導致點擊結束按鈕，時間停不下來      };      //結束按鈕      b2Ele.onclick = function () {            clearInterval(t);//clearInterval的作用是停止setInterval對函數的調用，          //並不清空t,所以需要下面的手動清空t          //手動將t清空          t = null      }  </script>  </body>

示例3：

省市聯動

<body>  <select name="" id="d1">省：</select>  <select name="" id="d2">市：</select>  <script>      var s1Ele = document.getElementById('d1');      var s2Ele = document.getElementById('d2');      var data = {          "河北省": ["廊坊", "邯鄲",'石家莊'],          "北京": ["朝陽區", "海淀區",'昌平區'],          "山東": ["威海市", "煙台市",'青島'],          "上海":["靜安區",'黃浦區','徐匯區']      };      for (let province in data){          //創建一個個option標籤          var optEle = document.createElement('option');          //給創建的option設置文本和屬性          optEle.innerText = province;          optEle.value = province;          s1Ele.appendChild(optEle)      }      s1Ele.onchange = function () {          //this指的是當前操作對象本身          //獲取用戶選擇的省，根據省取到對應的市          var currentPro = this.value;          var cityList = data[currentPro];//通過key取出對應省份的城市          //先將第二個select框中的內容清空          s2Ele.innerHTML = '';          //循環城市的數組，創建option標籤，操作屬性，添加到第二個select框中          for (let i=0;i<cityList.length;i++){              var optEle = document.createElement('option');              optEle.innerText = cityList[i];              optEle.value = cityList[i];              s2Ele.appendChild(optEle)          }      }  </script>  </body>

2.4.3window.onload

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

window.onload事件在文件載入過程結束的時候觸發。此時，文檔中的所有對象都位於DOM中，並且所有影像，腳本，鏈接和子框架都已完成載入。

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

2.5解決JS程式碼運行報錯的情況

報錯原因：HTML程式碼的載入順序是從上到下的，如果我們在body內定義的函數放在head內進行調用就會出現報錯，同理，如果一個函數再被調用時還未執行到函數定義的程式碼就會報錯。

處理方法

方法1：利用onload等待某個對象載入完畢再執行

方法2：直接將JS程式碼寫在body的最下方，這樣就不會出現調用的函數還沒載入的問題了

VirMach 便宜 VPS

QNews

QNews