JS基礎 對頁面的 DOM 操作

 

一 文檔對象模型

　　DOM -- 文檔對象模型（Document Object Model）是表示和處理一個HTML或XML文檔的常用方法。在網頁上，組織頁面（或文檔）的對象被組織在一個樹形結構中，用來表示文檔中對象的標准模型就稱為DOM。

　　DOM的設計是以對象管理組織（OMG）的規約為基礎的，因此可以用於任何編程語言。、

　　Dom技術使得用戶頁面可以動態地變化，如可以動態地顯示或隱藏一個元素，改變它們的屬性，增加一個元素等，

　　Dom技術使得頁面的交互性大大地增強。

 

二 Windows 對象操作

1、打開窗體

window.open("頁面地址","打開方式","窗口格式",true)；

//打開方式 （在新窗口打開 _blank ，在原窗口打開 _self ） 
//窗口的格式，可寫多個用空格隔開如  width=100,height = 100 寬帶高度（像素），left = 100,top = 100 距左 距上（像素） 

 

建議 window.open 容易被一些高級瀏覽器屏蔽掉，最好在新窗體中打開   

window.open 有返回值，返回值是新打開的窗口對象。

//打開一個窗口並保存在變量中
 
var w = window.open();

 

可以將打開的多個窗口保存在數組中

function openW ( ) { W[i++] = window.open( ); }

 

2、關閉當前窗口

window.close()

w.close();                //關閉保存在變量 w 中的那個窗口
window.poener.close( );   //關閉打開當前窗口的源窗口

 

關閉多個窗口 

　　將打開的窗口存入數組內，利用循環將其挨個關閉

 

3、調整頁面

　　與錨點功能相似

window.scrollTo(x,y)  //滾動頁面，y 代表縱向滾動

window.scrollTo(0,300)  //頁面從上到下滾動，300像素到第一行的位置                         

 

4、頁面前進后退

  　　 windows.history 

 window.history.back();      //頁面后退
 window.history.forward();   //頁面前進
 window.history.go(n);       //n為正前進 n 個頁面，n 為負后退 n 個頁面

 

5、頁面跳轉

 　　window.location 

var s = window.location.href()                //獲取當前頁面地址

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

 

與 window.open(); 相比 window.location.href="" 基本不會被瀏覽器屏蔽

 建議將之用在在原窗口打開新頁面

  

6、 對一個元素進行點擊操作  

var v = document.getElementByid("div1"); //括號內為被進行操作的元素的 id 
 v.onclick = function()       //點擊方法                            
{                                                              
   要進行的操作                                             
}