DOM对象介绍

一、DOM简述 DOM—Document Object Model, 它是 W3C 国际组织的一套 Web 标准。它定义了访问 HTML 文档对象的一套习属性、方法和事件。  DOM 是以层次结构组织的节点或信息片断的集合。文档对象模型（ Document Object Model ）是给 HTML 与 XML 文件使用的一组 API 。 DOM 的本质是建立网页与脚本语言或程序语言沟通的桥梁。 浏览器对象是一个分层结构，也称为文档对象模型，如下图所示：     从上图可以看出： （1）打开网页后，首先看到的是浏览器窗口，即顶层的window对象。 （2）其次，看到的是网页文档的内容，即document文档。 （3）定位对象： window.document.myform.text1 或 document.myform.text1 因为window窗口对象是所有页面的根对象，所以常常省略。 (4)地址对象location和历史对象history，它他对应IE浏览器中的地址栏和前进/后退按钮。 二、窗口 window 常用属性： 1 window.clesed ：指明窗口是否关闭。 2 window.defaultValue ：窗口状态栏的默认信息。 3 window.docement ：表示浏览器窗口中的 HTML 文档。 4 window.location ：表示有关当前 URL 的信息。 5 window.history ：表示有关当前访问过的 RUL 的信息。 6 window.name ：设置或检索窗口或框架的名称。 7 window.screen ：包含有关客户的屏幕和显示性能的信息。 8 window.screenX ：窗口 X 坐标 9 window.screenY ：窗口 Y 坐标 10 window.status ：设置或检索窗口状态栏中的信息。 11 window.title ：设置或检索窗口顶部标题栏中的信息。 12 window.self ：当前窗口。 13 window.parent ：当前窗口的最上层窗口。 14 window.top ：当前显示的窗口的最上层窗口。 15 window.opener ：所打开“子窗口”的“父窗口”的名称 。 得到当前窗口的详细信息： < head > <title>JavaScript</title> </ head > < body  > <script language="javascript" type="text/javascript"> window.document.writeln(" 当前位置：" +window.location+"</br>"); window.document.writeln(" 包含窗口个数：" +window.length+"</br>"); window.document.writeln(" 当前状态栏的信息：" +window.status+"</br>"); window.document.writeln(" 当前窗口的名称：" +window.name+"</br>"); window.document.writeln(" 当前窗口的X、Y坐标是：" +window.screenX+","+window.screenY); </script> </ body > 常用方法： 1 window.alert(“ 提示信息 ”) ： 显示一个包含确定按钮的对话框。 2 window.blur() ： 使对象失去焦点并激发 onblur 事件。 3 window.close() ： 关闭窗口。 4 window.open(“ 打开窗口的 url”,” 窗口名 ”,” 窗口特征 ”) ： 按指定特征打开窗口。 窗口特征参数如下 : height ：窗口高度 width ：窗口宽度 top ：窗口距屏幕上方的象素值 left ：窗口跟屏幕左侧的象素值 toolbar ：是否显示工具栏， yes 或 1 表示显示， no 或 0 表示不显示。 menubar ：是否显示菜单栏， yes 或 1 表示显示， no 或 0 表示不显示。 scrollbars ：是否显示滚动栏， yes 或 1 表示显示， no 或 0 表示不显示。 resizable ：是否允许改变窗口大小， yes 或 1 表示否允， no 或 0 表示不否允示。 location ：是否显示地址栏， yes 或 1 表示显示， no 或 0 表示不显示。 status ：是否显示状态栏， yes 或 1 表示显示， no 或 0 表示不显示。 5 window.confirm(“ 提示信息 ”) ： 显示一个确认对话框，包括确定和取消按钮。当点确定按钮时返回的是 true, 点取消按钮时返回的是 false 。 6 window.prompt(“ 提示信息 ”, 显示在 text 中的默认值 ) ： 显示带输入框提示对话框，主要用来收集信息。当点确定按钮时返回的是 true, 点取消按钮时返回的是 false 。 7  窗口定位的方法： （ 1 ）  window.moveBy(x,y) ： 实现窗口的定向、定量移动。两个参数分别表示 x 方向移动的距离和 y 方向移动的距离。 （ 2 ）  window.moveTo(x,y) ： 把窗口移动到指定坐标位置。两个参数 分别 表示横坐标、纵坐标。 8  窗口大小控制的两个方法： （ 1 ） resizeBy(x,y) ： 按指定的尺寸调整窗口的大小。两个参数分别表示在水平方向上的改变量和垂直方向上的改变量。 （ 2 ） resizeTo(x,y) ： 把窗口调整到指定尺寸。两个参数分别表示浏览器窗口的宽和高。 9 操作定时器的两个方法：  （1）setTimeout(“函数’,毫秒数)：设置定时器，经过指定毫秒值后执行某个函数。 （2）clearTimeout(定时器对象)：取消某个定时器。 三、历史对象history 主要属性： 1 window.history.length:得到浏览器历史清单中的项目个数。 主要方法： 1 window.history.back():加载History列表中的上一个URL，相当于IE的后退按钮。等同于window.history.go(-1); 2 window.history.forward():加载History列表中的下一个URL，相当于IE的前进按钮。等同于window.history.go(1); 3 go(“url” or number):加载History列表中的一个URL，或要求浏览器移动指定的页面数。 四、地址对象location 此对象相当于IE浏览器中的地址栏,包含了关于当前URL地址的信息.它提供了一种重新加载当前URL的方法。 主要属性： 1 window.location.hash ： 设置或检索另一个页面里的锚 2 window.location.host ： 设置或检索 URL 的主机名和端口号 3 window.location.hostname ： 设置或检索 URL 的主机名部分 4 window.location.pathname ： 设置或检索 URL 相对路径 5 window.location.href ：设置或检索完整的 URL 字符串（常用） 6 window.location.port ： 设置或检索主机端口号 < script  language="javascript" type="text/javascript"> window.document.writeln(" 锚 " +window.location.hash+"</br>"); window.document.writeln(" 主机名及端口号 " +window.location.host+"</br>"); window.document.writeln(" 主机名 " +window.location.hostname+"</br>"); window.document.writeln(" 端口号 " +window.location.port+"</br>"); window.document.writeln(" 相对路径 " +window.location.pathname+"</br>"); window.document.writeln("URL 链接字符串 " +window.location.href+"</br>"); </script> 主要方法： 1 assign(“url”) ： 加载 URL 指定的新的 HTML 文档。 2 reload() ： 重新加载当前页。 3 replace(“url”) ： 通过加载 URL 指定的文档来替换当前文档。 五、文档对象 Document Document 对象表示给定浏览器窗口中的 HTML 文档，并用于检索文档的信息、检查和修改 HTML 元素和文档中的文本、以及处理事件。 主要属性： 1 alinkColor ： 设置或获取元素中所有激活链接的颜色 2 linkColor ： 设置或获取对象文档链接的颜色。 3 vlinkColor ： 设置或获取用户已访问过的链接颜色。 4 URL ： 设置或获取当前文档的  URL 。 5 location: 获取当前 URL 的信息。 6 title ： 设置或获取当前文档的标题。 7 protocol ： 设置或获取  URL  的协议部分。 8 readyState ： 获取表明对象当前状态的值。 9 alinkColor ： 设置或获取元素中所有激活链接的颜色。 10 bgColor ： 设置或获取表明对象后面的背景颜色的值。 11 fgColor ： 设置或获取文档的前景 ( 文本 ) 颜色。 12 all ： 返回对象所包含的元素集合的引用。 13 anchors ： 获取所有带有  name  和 / 或  id  属性的  a  对象的集合。此集合中的对象以  HTML  源顺序排列。 14 applets ： 获取文档中所有  applet  对象的集合。 15 childNodes ： 获取作为指定对象直接后代的  HTML  元素和  TextNode  对象的集合。 16 embeds ： 获取文档中所有  embed  对象的集合。 17 forms ： 获取以源顺序排列的文档中所有  form  对象的集合。 18 frames ： 获取给定文档定义或与给定窗口关联的文档定义的所有  window  对象的集合。 19 images ： 获取以源顺序排列的文档中所有  img  对象的集合。 20 links ： 获取文档中所有指定了  HREF  属性的  a  对象和所有  area  对象的集合。 21 namespaces ： 获取  namespace  对象的集合。 22 scripts ： 获取文档中所有  script  对象的集合。 23 styleSheets ： 获取代表与文档中每个  link  或  style  对象的实例相对应的样式表的  styleSheet  对象的集合。 主要方法： 1 clear():  清除当前文档。 2 close():  关闭输出流并强制将数据发送到显示。 3 write("text"):  在指定窗口的文档中写入一个或多个  HTML  表达式。 4 writeln("text"):  在指定窗口的文档中写入一个或多个  HTML  表达式，后面追加一个换行符。 5 focus():  使得元素得到焦点并执行由  onfocus  事件指定的代码。 6 hasFocus(): 获取表明对象目前是否拥有焦点的值。 7 getElementById("ID "): 8 getElementsByName("Name "): 9 getElementsByTagName(“TagName”):