2017-3-28 javaScript DOM 操作

標籤：狀態   變數   less   .sh   位置   傳遞   his   頁面   style   

一、DOM的基本概念：DOM是文件物件模型，這種模型為樹模型；文檔是指標籤文檔；對象是指文檔中每個元素；模型是指抽象化得東西。

二、Windows  對象操作：1、屬性和方法：屬性（值或者子物件）：opener：開啟當前視窗的源視窗，如果當前視窗是初次開機瀏覽器開啟的，則opener是                                                            null。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　dialogArgument：對話方塊傳回值。

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

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

　　　　　　　　　　　　2、Window.open("第一部分","第二部分","第三部分","第四部分")

　　　　　　　　　　　　　　第一部分：寫頁面地址。

　　　　　　　　　　　　　　第二部分：_blank 開啟檔案，或者_self  ，在新視窗還是自身開啟

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

　　　　　　　　　　　　　　　　　　　toolbar=no  新開啟的視窗無工具條；menubar=no  無功能表列；status=no  無狀態欄；

                                                      width=100  height=100  寬度高度；left=100  開啟的視窗距離左邊多少距離；

                                                       resizable=no  視窗大小不可調；  scrollbars=yes   出現捲軸；  location=yes   有地址欄；

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

　　　　　　　　　　　　　　　　　　　　例如：var  a=window.open();     開啟一個視窗並儲存在變數中。

　　　　　　　　　　　　開啟多個視窗並儲存在數組w中：　function  openw（）

                                                                                            {

                                                                                         w[i++]=window.open();

                                                                                                   }

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

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

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

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

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

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

　　　　　　　　　　　　　　　　　window.resizeTo（寬，高）   調整頁面的寬度和高度；

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

　　　　　　　　　　　5、模態對話方塊和非模態對話方塊：

　　　　　　　　　　　　　模態對話方塊（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   a=window.location.href;    擷取當前頁面的地址；

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

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

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

五、Window.status  對象：       （status    狀態列）

　　　　　　　　　　　　window.status="要在狀態列顯示的內容";

　　　　　　　　　　　　　　例如：function  s()

                                                  {

                                                     window.status="向前走  就這麼走";

                                                   }

　　　　　　　　　　　　　　　　　　　

2017-3-28 javaScript DOM 操作