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()       //点击方法                            
{                                                              
   要进行的操作                                             
}

JS基础 对页面的 DOM 操作

JS基础对页面的 DOM 操作