JavaScript学习笔记(09)之文档对象模型DOM

    DOM文档对象模型是一个能够使程序和脚本动态访问和更新文档内容、结构及样式的接口。

    DOM将HTML文档中的各个对象按容器级别组织成一种树形访问结构，以便于JavaScript等面向对象编程语言可以编程访问文档中所有的对象及其属性方法。

    DOM提供了HTML和XML两种标准对象集，并有一个标准接口访问和操作它们。

推荐书目，之前已经说过《Javascript DOM编程艺术(第2版)》。

DOM中，浏览器会为每个网页自动创建Windows对象、document对象、history对象、location对象和navigater对象。

每个对象都具有其父对象的属性和方法，属性用于描述Web页面或文档的变量，方法用于操纵部分Web页面。

要在脚本中改变编程，读取某个对象的属性、使用其方法时，需要指定完整的路径（用点号“ . ”表示）。

另外，注意：由于windows对象位于浏览器所有对象的最顶层，其他对象都是该对象的子对象，因此常会见到一些省略写法：windows,open()写成open()，windows.document.write()写成 document.write();

以下，我们着重谈一谈几个常用的浏览器对象：

【注】以下相关图片是源自于姚怡、李向化等人编写的《网页设计与开发实例教程》

一、windows对象（详细的属性和功能自个儿查阅文献）

       单刀直入型，只要你一打开浏览器，便会自动创建windows对象。

       windows对象包括两类窗口：单个网页窗口和窗口框架（iframe/frame）

       前者指的是在一个浏览窗口中只打开一个网页；后者则是一个浏览器窗口中打开一个框架集，由多个网页构成。其实HTML中的框架也就是这个样子的啦。

      这两类窗口的区别：

      (1)对于单个网页，windows对象的parent和top属性都是指这个网页本身；

            对于框架窗口（准确来说，称之为帧窗口），top指的是包含本帧的框架集窗口，而parent是当前窗口的父窗口。

      (2)对于单个网页，windows对象的defaultStatus或status属性设置的文本显示在这个浏览器的状态栏；对于帧窗口而言，这些属性设置的文本仅仅当鼠标指针放在帧窗口上才可以显示在这个浏览器的状态栏上。

      (3)如果是在框架集中使用close()方法，该方法将不起作用。

      (4)如果在一个框架网页的HTML文件中，使用了框架集标签对(iframe/frame)，而且<frame>中包括src和name属性，则可以通过使用parent.framename或者parent.framename[index]引用其他帧的元素。







二、document对象

       document对象是一个顶层对象，不需要预先实例化就可以直接使用。

       如果是对当前窗口，则用：document。propertyname

       如果是对指定窗口，则用：windowObjectName.document.propertyname

       document的一些属性：

      




 

三、history对象

        history对象包含一组用户在浏览器访问过的URL信息，如图所示：

       


 

四、location对象



 

location对象的方法及其功能描述

   （1）reload() 相当于单击浏览器上的刷新或reload图标；用法：location.reload();

   （2）replace("URL") 打开一个URL，并取代历史对象中当前位置的地址。

            当用到这个方法时打开一个URL后，单击浏览器的“后退”图标将不能返回到刚才的页面了，用法：location.replace(filename); 。

五、form对象和form元素对象

       form对象是document对象的一个元素，document.forms[]是一个数组，下标将从0开始，包含了文档中的所有表单，表单元素对象则是表单对象的子对象。

       1、表单对象

        首先我们接受啊一下语法吧;document.forms[index] 或 document.formname

        下图是form对象的属性及其功能描述：





 

 

 

关于form的一些属性都在上面展示，照相效果不好，用户体验差，具体的自己可以到网上一搜，百度之。这里插图主要是为了让大家能够有个大概印象和理解，具体的还是得考自己多看书，多参考来增加自己的动手能力。

 

这一部分，先说到这里吧，以后看到好的，学习到更好的东西，咱们再补充分享。

****************************************************************************************************************************************************************************************

❤永葆一颗纯洁、宽容平和、仁慈谦卑和意气风发的心！
态度决定一切     努力改变命运