7th week ：DOM BOM

DOM（文档对象模型(Document Object Model)）

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，既有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。

 

方法：DOM：DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。有一点很重要，DOM的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言。最初人们把它认为是一种让JavaScript在浏览器间可移植的方法，不过DOM的应用已经远远超出这个范围。Dom技术使得用户页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变它们的属性，增加一个元素等，Dom技术使得页面的交互性大大地增强。

 

内容：

DOM

DOM 是遵循 W3C（万维网联盟）的标准。

DOM 定义了访问 HTML 和 XML 文档的标准：

"W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。"

W3C DOM 标准被分为 3 个不同的部分：

• 核心 DOM - 针对任何结构化文档的标准模型
• XML DOM - 针对 XML 文档的标准模型
• HTML DOM - 针对 HTML 文档的标准模型

XML DOM

XML DOM 是： [1] 

• 用于 XML 的标准对象模型
• 用于 XML 的标准编程接口
• 中立于平台和语言
• W3C 标准

XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法（接口）。

换句话说：XML DOM 是用于获取、更改、添加或删除 XML 元素的标准。

HTML DOM

HTML DOM 是： [2] 

• HTML 的标准对象模型
• HTML 的标准编程接口
• W3C 标准

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法（接口）。

换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

DOM的分级

编辑

根据W3C DOM规范，DOM是HTML与XML的应用编程接口（API），DOM将整个页面映射为一个由层次节点组成的文件。有1级、2级、3级共3个级别。

1级DOM

1级DOM在1998年10月份成为W3C的提议，由DOM核心与DOM HTML两个模块组成。DOM核心能映射以XML为基础的文档结构，允许获取和操作文档的任意部分。DOM HTML通过添加HTML专用的对象与函数对DOM核心进行了扩展。

2级DOM

DOM

鉴于1级DOM仅以映射文档结构为目标，DOM 2级面向更为宽广。通过对原有DOM的扩展，2级DOM通过对象接口增加了对鼠标和用户界面事件（DHTML长期支持鼠标与用户界面事件）、范围、遍历（重复执行DOM文档）和层叠样式表（CSS）的支持。同时也对DOM 1的核心进行了扩展，从而可支持XML命名空间。

2级DOM引进了几个新DOM模块来处理新的接口类型：

DOM视图：描述跟踪一个文档的各种视图（使用CSS样式设计文档前后）的接口；

DOM事件：描述事件接口；

DOM样式：描述处理基于CSS样式的接口；

DOM遍历与范围：描述遍历和操作文档树的接口；

3级DOM

3级DOM通过引入统一方式载入和保存文档和文档验证方法对DOM进行进一步扩展，DOM3包含一个名为“DOM载入与保存”的新模块，DOM核心扩展后可支持XML1.0的所有内容，包括XML Infoset、 XPath、和XML Base。

0级DOM

当阅读与DOM有关的材料时，可能会遇到参考0级DOM的情况。需要注意的是并没有标准被称为0级DOM，它仅是DOM历史上一个参考点（0级DOM被认为是在Internet Explorer 4.0 与Netscape Navigator4.0支持的最早的DHTML）。

 

应用：

DOM操作应用

·创建、插入和删除DOM元素（this的使用）
创建：createElement() ，之后添加 oUl.appendChild(oLi); 格式：父级.appendChild(子节点)；
插入：父级.appendChild(子节点) ，父级.insertBefore(子节点，在谁之前插入)
IE 有兼容性问题 ，联合两个插入方法用if判断解决
删除：removeChild(),

·文档碎片
创建文档碎片：createDocumentFragment();

DOM操作应用（高级）
·表格应用
<thead>表头， <tbody>表格的内容，便捷操作：
getElementsByTagName('tbody')[0] = tBodies[0]
getElementsByTagName('tr')[0] = rows[0]
getElementsByTagName('td')[0] = cells[0]
tBodies是数组 、一个表格只能有一个表头tHead表尾tFoot

·表格搜索： 
忽略大小写搜索：toLowerCase() ：转成全小写的形式
模糊搜索：search(),找到就返回字符串出现的位置，没找到返回-1
关键字搜索：split()
筛选：先让所有的display为none隐藏起来，符合条件display就变成block显示出来

·表格排序
appendChild()的使用：1.先把元素从原有的父级上删掉 2.添加到新的父级
sort()的使用（数组排序）

BOM

    概念:BOM是浏览器对象模型,是Bowser Object Model 的简称，就是 浏览器 工具库 说明书！

    Window对象

    Window 对象的角色：

(a)javascript访问浏览器的窗口的一个接口（入口）;

(b)ECMAScript中的Global对象，全局对象。

全局对象:就是顶层对象，顶层对象可以理解为CEO。其他的一切全局变量，都是window对象的下属。

注意对于全局变量，我们可以省略window

    Document对象

    通过 document 变量引用，我们所有的网页内容都是通过这个Document对象来进行管理的。

    frames

    框架集，类似一个数组，可以通过frames[索引号]（frames[0]）或frames[框架名称]，来获取指定的框架。

    History对象

    通过 history 变量可以引用，对于在当前窗口中，我们所访问的所有页面，都会被记录在History对象中。通过这个对象，我们可以很容易的跳转到我们之前所浏览的页面中。

     history.go(参数);     //参数可以是数字可以是字符串

    可以用另外两个方法来替代go方法

  (1)history.back();

  (2)history.forward();

     history.length; 可以获取浏览的历史记录的数量

    Location对象

    通过变量 location 引用，location对象可以帮助我们操作url并提供了一下页面导航功能。

href属性        控制浏览器地址栏的内容

reload()方法    刷新页面，有可能会使用缓存（暂存！！！！）

reload(true)    刷新页面，不使用缓存（绝对的！）,重新请求服务器。

    Navigator对象

    通过navigator对象引用，Navigator对象可以帮助我们检测浏览器的信息以及浏览器所在的操作系统的信息。

  appName       浏览器名称(最新的浏览器已经放弃这属性)

  appVersion       浏览器版本(最新的浏览器已经放弃这属性)

 Platform       操作系统(最新的浏览器已经放弃这属性)

  userAgent   用户代理信息，通过该属性可以获取浏览器及操作系统信息

    Screen对象

    通过screen对象来引用，可以用它来获取当前屏幕的高度和宽度。

      Width 获取屏幕的宽度;

      Height 获取屏幕的高度;

       h5 视口（view）