JS DOM操作

Posted 2020-09-07 酒不醉心

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

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