1、DOM基础DOM(Document Object Model)文档对象模型什么是 DOM？Document Object Model (DOM)是 HTML和 XML文档的编程接口。它提供了上述文档的一种结构化表示，同时也定义了一种通过程序来改变文档结构，风格，以及内容的方式。DOM 用一组结构化的节点以及对象来表示文档。本质上就是将网页和脚本语言以及编程语言连接起来。一个网页是一个文档。这个文档可以被显示在浏览器窗口中，也可以以html源码的形式显示。这两中情况中，文档都是同一个。DOM 提供了另一种方式来表示，存储，操作这个文档。DOM 是网页的一种完全的面向对象的表示方法，可以通过脚本语
2、言（比如说 JavaScript）来改变。W3C DOM标准形成了当今大多数浏览器的 DOM基础。许多浏览器提供超出W3C标准的扩展，所以当用在可能被拥有不同 DOM的各种浏览器使用的场合时 一定要多加注意DOM标准主要要为：微软 DOM与 W3C DOM，一般 IE实现的是微软 DOM，而其它浏览器则不同程度的实际了 W3C DOMDOM发展史 DOM Level Zero ,事实上从来不存在 DOM 0版本，只是人们的戏称。只是在 W3C DOM出现之前，不同浏览器（主要是 IE与 NN）实现的 DOM相互排斥，1996 年的浏览器大战所产生的 DHTML就是所谓的 DOM 0，它是脚本程
3、序员的恶梦 DOM Level 1 包括 DOM Core和 DOM HTML。前者提供了基于 XML的文档结构图。后者添加了一些 HTML专用的对象和方法，从而扩展了 DOM Core.目前 IE在内的大部分桌面浏览器都通过不同方式实现了 DOM 1 DOM Level 2 引入几个新模块：DOM 视图，事件，样式，遍历和范围。IE只实现了一部分，火狐浏览器几乎全部实现，除 IE之外的浏览器也实现了大部分 DOM Level 3 引入了以统一的方式载入和保存文档的方法。DOM Core 被扩展支持所有的 XML1.0的特性。火狐浏览器之类实现了少部分 在开始阶段，JavaScript 和 D
4、OM是紧密的联系在一起的，但是最终他们将发展为独立的实体。网页的内容存储在 DOM中并且可以被 JavaScript访问和处理，所以我们可以得到写下这个近似的等式：API（网页或者 XML页面）DOM JS（脚本语言）DOM被设计为独立于任何特定的编程语言，通过协调一致的 API以确保这种文档的结构化表现形式是有效的。虽然 DOM的实现可以建立在任何语言上，但是在这里我们专注于 JavaScript上的 DOM实现!尽管 DOM很大程度上受到浏览器中动态 HTML发展的影响，但 W3C还是将它最先应用于 XML。DOM与 BOM的关系DOM与 BOM的关系？BOM 包含 DOMDOM与 BOM
5、结构视图DOM Core文档对象模型-DOM,就是使用树视图来形容 HTML代码,看下面的一张 HTML页面的源代码树!树! 到处都是树 !树! 树!到处都是树!HTML 那层层嵌套的代码就像一棵 树一样!一层一层的树 浏览器接受该页面并将之转换为树形结构获取元素常用方法document对象是 BOM的一部分，同时也是 HTML DOM的 HTMLDocument对象的一种表现形式，反过来说，它也是 XML DOM Document对象。JavaScript 中的大部分处理 DOM的过程都利用 document对象，所以我们访问文档需要使用BOM提供的这个入口。var d = document
6、;alert(d);/这仅仅表明 document 这个对象是存在的document对象有三个强大的方法，可以获取页面的任何元素var p1 = document.getElementById(“p1“);/获取 ID 为 p1 的那个元素/在一个文档中 ID 必须是唯一的，getElementById 方法只会返回一个元素alert(p1.tagName);var allP = document.getElementsByTagName(“p“);/获取文档中所有 p 标签/因为页面中标签相同的元素很多,所以即使页面中只有一个 p元素,getElementsByTagName 也会返回一个集
7、合for (var i=0;i 和元素。 获取和设置元素属性getAttribute 与 setAttribute方法var p1 = document.getElementById(“p1“);alert(p1.getAttribute(“id“);p1.setAttribute(“title“,“Value“);节点基础文档根节点var de = document.documentElement;alert(de.tagName);由于 IE 5.5中的 DOM实现的错误，document.documentElement 会返回 元素。IE 6.0 已经修复了这个错误。 获取 head与
8、body/本来可以使用 getElementsByTagName 的var head = document.getElementsByTagName(“head“)0;var body = document.getElementsByTagName(“body“)0;还可以使用节点,在使用节点前，先了解一些节点基础知识常用节点类型 元素节点文档中具有标签的节点 文本节点标签中不是注释的文本块 常用的节点属性 nodeType节点类型，元素节点是 1，文本节点是 3 nodeValue节点值，元素节点为空，文本节点的 nodeValue属性即为文本内容 firstChild该元素节点包含的第一个
9、子节点 lastChild该元素节点包含的最后一个子节点 nextSibling该节点的后一个兄弟节点 previousSibling该节点的前一个兄弟节点 childNodes子节点列表,可以通过 node.childNodesindex（或node.childNodes.item(index)）来获取子节点 nodeName节点名称，对于元素节点，返回 tagName,对于文本，则返回#text 考虑下面的 HTML代码所表示的节点结构Some Text 上面的 HTML代码将会解析成两个节点:元素节点p 标签，文本节点Some Text.也就是说，标签中包含的一些文本也是节点，那么空格之
10、类的非打印字符会不会被当作文本节点呢？不同浏览器在判断何为 Text节点上存在一些差异。某些浏览器，如Mozilla，认为元素之间的空白(包括换行符)都是 Text节点；而另一些浏览器，如 IE，会全部忽略这些空白! var de = document.documentElement;var head = de.firstChild;/html 下面第一个元素，可能是 headvar body = de.lastChild;/html 下面最后一个元素，可能是body答案并不确定，但是仍然有办法解决使用节点类型检测,每个节点都有nodeType属性，指明它的节点类型。对于元素节点，它的值是 1
11、，而对于文本节点，它的值是 3var de = document.documentElement;var head = de.firstChild.nodeType=1?de.firstChild:de.firstChild.nextSibling;var body = de.lastChild.nodeType=1?de.lastChild:de.lastChild.previousSibling;/还可以使用 childNodesvar de = document.documentElement;var head = de.childNodes0.nodeType=1?de.childNo
12、des0:de.childNodes0.nextSibling;var head = de.childNodes1.nodeType=1?de.childNodes1:de.childNodes1.previousSibling;HTML DOMHTML DOM用对象来表示 HTML标签,考虑下面的代码/对于上面的 img 标签，浏览器解析时会将其转换成下面的对象src:“./images/stack_heap.jpg“,alt:“内存堆栈“,onclick:“alert(Hello!)“,tagName:“IMG“;/其实不止这些属性一般所说的 DOM是指 XML DOM，而 W3C也为 H
13、TML页面提供了更快捷的DOMHTML DOM!使用 HTML DOM，能使访问 HTML标签的属性就像访问JavaScript创建的对象的属性一样简单.var imgObj = document.getElementById(“imgObj“);alert(imgObj.src);/获取 src 属性如此简单使用 HTML DOM也使得访问页面一些元素变得更加简单var bodyTag = document.documentElement.lastChild;/DOM标准方式bodyTag = document.body;/HTML DOM 方式var titleTag = document.getElementsByTagName(“title“)0.firstChild.nodeValue;/DOM 标准方式titleTag = document.title;/HTML DOM 方式/HTML DOM 不仅仅可以用来获取内容，也可以设置document.title =“Change The Title!“;
