javascript外部對象,window對象,document對象

BOM:

Browser Object Model:瀏覽器物件模型，用來訪問和操縱瀏覽器視窗，使js有能力與瀏覽器“對話”，通過使用BOM，可移動視窗、更改狀態文本、執行其他不與頁面內容發生直接聯絡第操作，且沒有相關標準，但被廣泛支援。

1、外部對象就是瀏覽器提供（內部）的API

2、這些對象由W3C規定，由瀏覽器開發人員設計並開發

3、這些對象分為2部分，其中BOM包含了DOM

4、我們可以通過js訪問這些對象

DOM:

Document Object Model：文件物件模型，用來操作文檔

--定義了訪問和操作HTML文檔的標準方法

--應用程式通過對DOM樹的操作，來實現對HTML文檔資料第操作。

Window對象

常用方法:

-alert(),confirm()

-setTimeout(),clearTimeout()

-setInterval(),clearInterval()

1、對話方塊

alert(str)

-- 提示對話方塊，顯示str字串的內容

confirm(str)

-- 確定對話方塊，顯示str字串的內容

-- 按”確定”按鈕返回true,其他動作返回false

 prompt(“”)

 -- 輸入框

例如:

//1)彈出框

function f1() {

                 alert("你好!");

      }

//2)確認框

            function f2() {

                  var v = confirm("你吃了嗎?");

                 console.log(v);

}

//3)輸入框   

      function f3() {

           var v = prompt("你吃的什麼。");

           console.log(v);

  }

2、定時器

1)多用於網頁動態時鐘、製作倒計時、跑馬燈效果

2)周期性時鐘

--以一定的間隔執行代碼,迴圈往複

    3）一次性時鐘

  --在一個設定的時間間隔之後來執行代碼，而不是在函數被調用後立即執行

3、周期性定時器

1）setInterval(exp,time):周期性觸發代碼exp

-exp:執行語句

-time:時間周期，單位為毫秒

-返回已經啟動的定時器對象

2）clearInterval(tID):停止啟動的定時器

-tID:啟動的定時器對象

/ /每隔N毫秒執行一次函數，反覆執行，

       //直到達到停止條件為止

      function f4() {

           //啟動定時器

           var n=5;

           //啟動定時器，返回定時器的ID

           //用來停止定時器

            var id = setInterval(function(){

                 console.log(n--);

                 if(!n){

                 //停止這個定時器

                      clearInterval(id);

                      console.log("BANG");

                 }

           },1000);

           /*

                 啟動定時器就相當於啟動了一個支線程，

                 當前方法f4相當於主線程，2個線程並發執行

                 不互相等待，因此主線程在啟動完支線程之後

                 立即向下執行，而支線程卻需要在1秒後才執行

            */

     }

通過周期性定時器實現時鐘功能，要注意的是當多次點擊開始按鈕時要自動將後面點擊的忽略，只計算第一次點擊事件。簡單原理如下圖:

4、一次性定時器

setTimeout(exp,time):一次性觸發代碼exp

-exp:執行語句

-time:間隔時間，單位為毫秒

-返回已經啟動的定時器

clearTimeout(tID):停止啟動的定時器

-tID:啟動的定時器對象

 

//延遲N毫秒執行一次函數，執行完之後

      //自動停止，也可以在未執行前手動停止

      var id;

      function f5() {

           //啟動定時器，若想在未執行定時器之前就將他停止，需要使用id

           id = setTimeout(function(){

                 console.log("叮叮叮");

           },3000)

   }

類比郵件發送功能，當點擊發送按鈕後等待3秒，若在3秒內點擊撤銷，則取消此次發送，否則3秒到時自動發送郵件，原理圖如下

 

SCREEN對象

--Screen對象包含有關用戶端顯示螢幕的資訊

--常用於擷取螢幕的解析度和色彩

--常用屬性

-width/height

-availWidth/availHeight

例如:

   console.log(screen.width);

   console.log(screen.height);

   console.log(screen.availWidth);

    console.log(screen.availHeight);

History對象

-history對象包含使用者訪問過的URL

 -length屬性:瀏覽器曆史列表中的URL數量

-方法

 -back()

  -forward()

 -go(num)

 alert(history.length)

 History.forward();

 History.back();

  History.go(-2);

location對象

--location對象包含有關當前URL的資訊

-常用於擷取和改變當前瀏覽的網址

--href屬性:當前視窗正在瀏覽的網頁地址

function f1(){

         var b = confirm("你確定要離開本頁面嗎?");

         if(b){

           location.href="http://www.baidu.com";

         }

      }

--方法

-reload():重寫載入當前網址，按下重新整理按鈕

location.reload();

navigator對象

--navigator對象包含有關瀏覽器的資訊

  - 常用於擷取用戶端瀏覽器和作業系統資訊

navigator.userAgent;

console.log(navigator.userAgent)

DOM概述

--文件物件模型

--當網頁被載入時，瀏覽器會建立頁面的文件物件模型

通過可程式化的物件模型，js獲得了足夠的能力來建立動態HTML

--js能夠改變頁面中的所有HTML元素

--js能夠改變頁面中的所有HTML 屬性

--js能夠改變頁面中的所有CSS樣式

--js能夠對頁面中的所有事件作出反應

     DOM節點樹:

DOM模型被構造為對象的樹

這棵樹的根就是document對象

DOM提供了如下操作

--尋找節點

--讀取節點資訊

--修改節點資訊

--建立新節點

--刪除節點

    1)讀取、修改

A)節點資訊

--nodeName:節點名稱

--元素節點和屬性節點:標籤或屬性名稱

--文本節點:永遠是#text

--文檔節點:永遠是#document

        --nodeType:節點類型

--返回數值

        --元素節點:返回1

--屬性節點:返回2

        --文本節點:返回3

        --注釋節點:返回8

        --文檔節點:返回9

      B)元素節點的內容

         --innerText

        -設定或擷取位於對象起始和結束標籤內的文本

       --innerHTML

      -設定或擷取位於對象起始和結束標籤內的HTML

  C)節點屬性

      --getAttribute()方法:根據屬性名稱擷取屬性的值

      --setAttribute()、removeAttribute()

    將HTML標記、屬性和CSS樣式和都對象化

  D)元素節點的樣式

     --style屬性

     --node.style.color

     --node.style.fontSize;

      --className屬性

      o.className=”樣式類名稱”;

 2)查詢

查詢節點

--如果需要操作HTML元素，必須首先找到該元素

--查詢節點的方式

--通過id查詢

document.getElementById();

 -通過指定ID來返回元素節點，忽略文檔的結構;

 -尋找整個HTML文檔中的任何HTML元素;

 -如果ID值錯誤，則返回null;

--通過層次（節點關係）查詢

  -parentNode

遵循文檔的上下階層，尋找單個父節點

       -childNodes

遵循文檔的上下階層，尋找多個子節點

--通過標籤名稱查詢

       getElementsByTagName()

        根據指定的標籤名稱返回所有的元素

  忽略文檔的結構

  尋找整個HTML文檔中的所有元素

  如果標籤名稱錯誤，則返回長度為0的節點列表

     返回一個節點列表(數組)

    使用節點列表的length屬性擷取個數

    [index]:定位具體的元素

     --通過name屬性查詢

       document.getElementsByName()

     根據標籤的name屬性的值進行查詢