JS DOM操作（一） 对页面的操作

DOM ——文档对象模型（Document Object Model）是表示和处理一个HTML或XML文档的常用方法。

在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。

DOM的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言。、

Dom技术使得用户页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变它们的属性，增加一个元素等，

Dom技术使得页面的交互性大大地增强。

对一个元素进行点击操作

var  v  =  document.getElementByid ( " " ) |  -- 括号内为被进行操作的元素的 id

v.onclick = function()                                  |

{                                                                 |

要进行的操作                                              |

} |

—— - —— - —— - —— - —— - —— - —— - —

一 Windokws 对象操作

1、打开窗体

window.open(①,②,③,④)；

①②③  string 类型

④  bool 型

① 写页面地址

② 打开方式      -- _blank 在新窗口打开

-- _self 在原窗口打开

③ 打开窗口的格式，可写多个用空格隔开

-- width=100  height = 100  宽带高度（像素）

-- left = 100 top = 100         距左 距上（像素）

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

打开一个窗口并保存在变量中

var  w  =  window.open();

可以将打开的多个窗口保存在数组中

function   openW ( )

{

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

}

-- 建议 window.open 容易被一些高级浏览器屏蔽掉，最好在新窗体中打开

2、关闭当前窗口

window.close()

w.close();                            -- 关闭保存在变量 w 中的那个窗口

window.poener.close( ); -- 关闭打开当前窗口的源窗口

关闭多个窗口   -- 将打开的窗口存入数组内，利用循环将其挨个关闭

3、调整页面

window.scrollTo(x,y) --滚动页面至哪里，y 代表纵向滚动

window.scrollTo(0,300)  页面从上到下滚动，300像素到第一行的位置

--  与锚点功能差不多

二  windows.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.open(); 相比 window.location.href="" 基本不会被浏览器屏蔽

-- 建议将之用在在原窗口打开新页面