BOM和DOM

時間  2019-12-22
標籤 bom dom 欄目 HTML 简体版
原文   原文鏈接

前戲

　　到目前爲止，咱們已經學過了JavaScript的一些簡單的語法。可是這些簡單的語法，並無和瀏覽器有任何交互。css

　　也就是咱們還不能製做一些咱們常常看到的網頁的一些交互，咱們須要繼續學習BOM和DOM相關知識。html

　　JavaScript分爲 ECMAScript，DOM，BOM。node

　　BOM（Browser Object Model）是指瀏覽器對象模型，它使 JavaScript 有能力與瀏覽器進行「對話」。數組

　　DOM （Document Object Model）是指文檔對象模型，經過它，能夠訪問HTML文檔的全部元素。瀏覽器

　　Window對象是客戶端JavaScript最高層對象之一，因爲window對象是其它大部分對象的共同祖先，在調用window對象的方法和屬性時，能夠省略window對象的引用。例如：window.document.write()能夠簡寫成：document.write()。app

BOM

window對象

　　img

　　看上面的例子你會發現，name直接封裝到了window對象上，瞭解一下就能夠了。框架

　　全部瀏覽器都支持 window 對象。它表示瀏覽器窗口。dom

　　**若是文檔包含框架（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.appName　　// Web瀏覽器全稱
navigator.appVersion　　// Web瀏覽器廠商和版本的詳細字符串
navigator.userAgent　　// 客戶端絕大部分信息
navigator.platform　　　// 瀏覽器運行所在的操做系統

　　　　看示例：

img

screen對象（瞭解便可）

　　　　屏幕對象，不經常使用。

　　　　一些屬性：

  • screen.availWidth - 可用的屏幕寬度
  • screen.availHeight - 可用的屏幕高度

history對象（瞭解便可）

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

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

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

　　　　img

location對象

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

　　　　經常使用屬性和方法：

location.href  獲取URL
location.href="URL" // 跳轉到指定頁面
location.reload() 從新加載頁面,就是刷新一下頁面

　　　　img

　　

　　上面的內容須要你們記住的是：

　　　　1.window對象

　　　　2.window的子對象：location的那幾個屬性和方法

　　　　3.其餘的做爲了解

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

彈出框

　　　　能夠在 JavaScript 中建立三種消息框：警告框、確認框、提示框。

　　警告框

　　　　警告框常常用於確保用戶能夠獲得某些信息。

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

　　　　語法：

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

　　　　img

　　確認框（瞭解便可）

　　　　確認框用於使用戶能夠驗證或者接受某些信息。

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

　　　　若是用戶點擊確認，那麼返回值爲 true。若是用戶點擊取消，那麼返回值爲 false。

　　　　語法：

confirm("你肯定嗎？")

　　　　img

　　　　　　　　　　img

　　　　咱們能夠根據返回的true和false來判斷一下，而後根據這個值來使用location去跳轉對應的網站。

　　提示框（瞭解便可）

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

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

　　　　若是用戶點擊確認，那麼返回值爲輸入的值。若是用戶點擊取消，那麼返回值爲默認值，就是第二個參數，若是沒有默認值那麼返回null。

　　　　語法：

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

img

　　　　能夠經過用戶輸入的內容來判斷咱們怎麼去進行後面的操做

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

計時相關（比較重要）

　　　　經過使用 JavaScript，咱們能夠在必定時間間隔以後來執行代碼，而不是在函數被調用後當即執行。咱們稱之爲計時事件。

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

　　　　　　語法：

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

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

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

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

　　　　　　img

　　　　clearTimeout()

　　　　　　語法：

clearTimeout(setTimeout_variable)

　　　　舉個例子：

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

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

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

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

　　　　　　語法：

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

　　　　　　返回值

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

　　　　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 模型被構造爲對象的樹。

HTML DOM 樹

　　　　img

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

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

　　JavaScript 能夠經過DOM建立動態的 HTML：

  • JavaScript 可以改變頁面中的全部 HTML 元素
  • JavaScript 可以改變頁面中的全部 HTML 屬性
  • JavaScript 可以改變頁面中的全部 CSS 樣式
  • JavaScript 可以對頁面中的全部事件作出反應（鼠標點擊事件，鼠標移動事件等）

查找標籤（和css同樣，你想操做某個標籤須要先找到它）

直接查找

document.getElementById           根據ID獲取一個標籤
document.getElementsByClassName   根據class屬性獲取（能夠獲取多個元素，因此返回的是一個數組）
document.getElementsByTagName     根據標籤名獲取標籤合集

　　　　例子：　

　　　　　img

間接查找

parentElement            父節點標籤元素
children                 全部子標籤
firstElementChild        第一個子標籤元素
lastElementChild         最後一個子標籤元素
nextElementSibling       下一個兄弟標籤元素
previousElementSibling   上一個兄弟標籤元素

　　　　img

　　　若是查找出來的內容是個數組，那麼就能夠經過索引來取對應的標籤對象

　　　　img

　　上面說的這些查找標籤的方法，之後咱們不多用，等學了JQuery，會有很好用、更全的查找標籤的功能，上面這些你們簡單練習一下，有個瞭解就好了。

節點操做

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

　　　　　　語法：

　　　　　　createElement(標籤名)

　　　　　　示例：

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

　　　　　img

　　　　　img

添加節點

　　　　　　語法：

　　　　　　追加一個子節點（做爲最後的子節點）

　　　　　　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

刪除節點

　　　　　　語法：

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

　　　　　　somenode.removeChild(要刪除的節點)

替換節點

　　　　　　語法：

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

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

屬性節點

　　　　　　獲取文本節點的值：

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

　　　　　　img

　　　　　　img

　　　　　　設置文本節點的值：

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

　　　　　　attribute操做

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

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

　　　　　　　例如：頁面上有下面三個標籤

　　　　　　　img

　　　　　　img

　　　　　　

　　　　　　img

class的操做

className  獲取全部樣式類名(字符串)首先獲取標籤對象
標籤對象.classList.remove(cls)  刪除指定類
classList.add(cls)  添加類classList.contains(cls)  存在返回true，不然返回falseclassList.toggle(cls)  存在就刪除，不然添加，toggle的意思是切換，有了就給你刪除，若是沒有就給你加一個

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

　　　　　　　　img

　　　　　　　　img

　　　　　　

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

　　　　　　　　img

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

事件

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

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

onclick        當用戶點擊某個對象時調用的事件句柄。
ondblclick     當用戶雙擊某個對象時調用的事件句柄。

onfocus        元素得到焦點。               // 練習：輸入框
onblur         元素失去焦點。               應用場景：用於表單驗證,用戶離開某個輸入框時,表明已經輸入完了,咱們能夠對它進行驗證.
onchange       域的內容被改變。             應用場景：一般用於表單元素,當元素內容被改變時觸發.（select聯動）

onkeydown      某個鍵盤按鍵被按下。          應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交.
onkeypress     某個鍵盤按鍵被按下並鬆開。
onkeyup        某個鍵盤按鍵被鬆開。
onload         一張頁面或一幅圖像完成加載。
onmousedown    鼠標按鈕被按下。
onmousemove    鼠標被移動。
onmouseout     鼠標從某元素移開。
onmouseover    鼠標移到某元素之上。

onselect      在文本框中的文本被選中時發生。
onsubmit      確認按鈕被點擊，使用的對象是form。

綁定方式：

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

<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 () {　　 //console.log(this)
    this.innerText="呵呵"; #哪一個標籤觸發的這個事件，this就指向誰
  }
</script>

　　　　注意一個問題：

　　　　　　img

　　　　　　img

　　　　　　img

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

　　　　　　img

　　　　　　

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

<!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，這裏我沒有放，大家練習的時候放到下面去
    var intervalId; //用來保存定時器對象，由於開始定時器是一個函數，結束定時器是一個函數，兩個函數都是操做的一個定時器，讓他們互相可以操做這個定時器，就須要一個全局變量來接受一下這個對象
　　　　　　//把當前事件放到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) { //若是不加這個判斷條件，你每次點擊開始按鈕，就建立一個定時器，每點一次就建立一個定時器，點的次數多了就會在頁面上生成好多個定時器，而且點擊中止按鈕的時候，只能中止最後一個定時器，這樣很差，也不對，因此加一個判斷
        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>

　　　　事件示例：

　　　　　　搜索框示例：

<!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聯動：選擇省份，自動列出全部的城市，例如：選擇河北省就顯示河北省全部的市

<!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標籤，經過索引拿到當前選擇的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()函數存在覆蓋現象。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程