DOM、Window對象操作

標籤：less   open   span   modal   控制   捲軸   決定   ble   dal   

一、DOM的基本概念

DOM是文件物件模型，這種模型為樹模型；文檔是指標籤文檔；對象是指文檔中每個元素；模型是指抽象化的東西。

一、基本文法：

資料類型（字串，小數，整數，布爾，時間） var，

var s = "3.14"; var n = parseFloat(s); ; s += 5;

var d = parseInt(s);

isNaN(字串)：判斷是否是數字模樣的字串；是-false； 不是-true

運算子：四大類

運算式： function Show() { }

語句：三大類（順序，分支，迴圈）

分支：if(){}; if...else...;if...else if...else if ......else;if嵌套

迴圈：窮舉，迭代；四要素（初始條件，迴圈條件，迴圈體，狀態改變）：

數組；var a = new Array()

函數：四要素(名稱，輸入，返回，加工)

二、DOM操作：

樹 window對象——瀏覽器視窗

window.location：地址欄

window.history：訪問曆史

window.status：狀態列

window.document：重點！

二、Window對象操作

1、屬性和方法

屬性（值或者子物件）：

opener:開啟當前視窗的源視窗，如果當前視窗是初次開機瀏覽器開啟的，則opener是null。

dialogArgument：對話方塊傳回值。

子物件：history,location,document,status,menubar,toolbar等。

方法（函數）：事件（事先設定好的程式，被觸發）。

2、Window.open（"第一部分"，"第二部分"，"第三部分"，"第四部分"）

Window.open的特徵參數：

第一部分：寫頁面地址。

第二部分：_blank 開啟的方式，在新視窗還是自身的視窗。

第三部分：控制開啟的視窗格式，可以寫多個，用空格隔開如下：

          toolbar=no                               新開啟的視窗無工具條 ；

          menubar=no    無功能表列 status=no    無狀態欄 ；

          width=100 height=100             寬度高度；

          left=100                          開啟的視窗距離左邊多少距離；

          resizable=no                     視窗大小不可調 ；

          scrollbars=yes                  出現捲軸；

          location=yes                     有地址欄；

Window.open也有傳回值，它的傳回值是：新開啟的視窗對象。

3、window.close()：        關閉當前視窗

w.close()：                     關閉儲存在變數w中的那個視窗；

關閉多個子視窗：               先將開啟的視窗存入數組內，利用迴圈將其挨個關閉；

window.opener.close()；  關閉開啟當前視窗的源視窗

4、間隔與延遲

間隔執行一段代碼（函數）：window.setInterval("要執行的代碼"，間隔的毫秒數)

清除間隔執行：window.clearInterval(間隔的id); 迴圈一次之後用來清除隔執行的代碼

延遲一段時間執行某一段代碼（函數）：window.setTimeout("要執行的代碼"，延遲的毫秒數)

清除延遲：window.clearTimeout(延遲的id)；清除setTimeout

5、調整頁面

window.navigate("url")      跳轉至目標頁面，在Google瀏覽器下有bug；

window.moveTo(x,y)         移動頁面至某一位置，位置由x和y決定；

window.resizeTo(寬，高)     調整頁面的寬度和高度；

window.scrollTo（x,y）      滾動頁面至哪裡，y代表縱向滾動。

6、模態對話方塊和非模態對話方塊

模態對話方塊（Modal Dialogue Box），是指在使用者想要對對話方塊以外的應用程式進行操作時，必須首先對該對話方塊進行響應。

如單擊【確定】或【取消】按鈕等將該對話方塊關閉，它和非模態對話方塊都是永遠置頂的，它們的區別在於當對話方塊開啟時，是否允許使用者進行其他對象的操作。

開啟模態對話方塊：window.showModalDialog("url"，"向目標對話方塊傳的值"，"視窗特徵參數")；

特徵參數：用分號隔開，像素大小用px。dialogHeight,dialogWidth,center,等

開啟非模態對話方塊：window.showModelessDialog("url"，"向目標對話方塊傳的值"，"視窗特徵參數")

var a = window.dialogArgument；可以用一個參數來擷取模態或非模態對話方塊傳遞的值。

三、Window.history對象

window.history.back();          頁面進行後退；

window.history.forward();      頁面前進；

window.history.go(n);           n如果是正數則代表前進n個頁面，n如果是負數則代表後退n個頁面，一般常用這一種。

四、Window.location對象

location                                                            地址欄

var s = window.location.href;                             擷取當前頁面的地址

window.location.href="http://www.baidu.com";   修改頁面地址，會跳轉頁面

window.location.hostname:                                 主機名稱，網域名稱，網站名，可用變數接收

window.location.pathname:                                 路徑名，可用變數接收

五、Window.status對象

status狀態列                  可以給狀態列添加要顯示的文字

window.status="           要在狀態列顯示的內容"；設定狀態列文字

補充：

斷行符號符\r和分行符號\n的區別：  \r 相當於enter，是段落與段落之間的區別，

　　　　　　　　　　　　　    \n 相當於shift+enter，是行與行之間距離，比較小

幾種window操作方法：

1、擷取當前視窗大小並列印：

var height=window.innerHeight;var width = window.innerWidth;document.write("<br/>"+"height"+height+",width"+width);

2、開啟視窗、關閉當前視窗

window.open("http://baidu.com");window.close();

3、移動當前視窗到某一位置（x，y）

window.moveTo(200,200);

4、改變當前視窗的尺寸（width，height）

window.resizeTo(1100,1100);

5、擷取當前頁地址

document.write(location.href);

6、【記錄】網頁的前進（前進到之前的曆史，相當於“→”）、後退（後退到之前曆史，相當於“←”）

 

 

 

 

DOM、Window對象操作