JS DOM操作(一) 对页面的操作

时间:2023-07-27 20:43:14

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="" 基本不会被浏览器屏蔽

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