DOM模型

来源：互联网发布：c语言中add是什么意思编辑：程序博客网时间：2024/05/28 01:36

文档对象模型DOM（Document Object Module）定义了用户操作文档对象的接口，可以说DOM是自HTML将网上相关文档连接起来后最伟大的创新。

1、DOM中的节点

在DOM中有三种节点，分别是元素节点、文本节点和属性节点。

2、使用DOM

对于每一个DOM节点node，都有一系列属性、方法可以使用。

属性/方法类型/返回类型说明

nodeName String 节点名称，根据节点的类型而定义

nodeValue String 节点名值，根据节点的类型而定义

nodeType Number 节点类型，常量值之一

firstChild Node 指向childNodes列表中的第一个节点

lastChild Node 指向childNodes列表中的最后一个节点

childNodes NodeList 所以子节点的列表

parentNode Node 指向节点的父节点，如果已是根节点，则返回null

previousSilbing Node 指向前一个兄弟节点，如果该节点已是第一个节点，则返回null

nextSibing Node 指向后一个兄弟节点，如果该节点已是最后一个节点，则返回null

hasChildNodes Boolean 当childNodes包含一个或多个节点时，返回true

attributes NameNodeMap 包含一个元素特性的Attr对象，仅用于元素节点

appendChild(node) Node 将node节点添加到childNodes的末尾

removeChild(node) Node 从childNodes中删除节点

replaceChild(newnode,oldnode) Node 将childNodes中的oldnode节点替换长newnode节点

insertBefore(newnode,refnode) Node 在childNodes中的refnode节点之前插入newnode节点

2.1访问节点

DOM提供了一些便捷的方法来访问某些特定的节点，其中最常用的就是getElementByTagName()和getElementById().其中getElementByTagName()用来返回一个包含某个相同标签名的元素的NodeList，如

var oImg = document.getElementByTagName("img");

getElementById()返回id为指定值的元素。通常标准的HTML中元素的id都是唯一的，但是如果给定的某个元素的name与给定的id相匹配，IE浏览器也会返回这个元素。所以在搭建HTML框架时要避免这种现象。

2.2检查节点类型

通过nodeType属性检测节点类型，共有12个可取的值，如alert(document.nodeType);显示的值是9表示DOCUMENT_NODE。实际上只有三种节点经常用到这个属性，元素节点：1，属性节点：2，文本节点：3.

2.3利用父子兄关系查找节点

查找子节点可以使用如下方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE>Child Node</TITLE><SCRIPT LANGUAGE="JavaScript"></SCRIPT></HEAD><BODY onload="myDOMInspector()"> <ul id="myList"> <li>1</li> <li>2</li></ul></BODY></HTML>

上述代码在IE7中的现实为LI LI，而在Firefox中的现实则为#text LI #text LI #text，这是因为Firefox把父节点直接的空格也识别为子节点，所以在实际应用中，为了有更好的兼容性，我们通常结合nodeType属性来对节点进行判断。下面的代码就结合nodeType属性对兄弟节点进行访问。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE>Brother Nodes</TITLE><SCRIPT LANGUAGE="JavaScript"></SCRIPT></HEAD><BODY onload="myDOMInspector()"> <ul id="myList"> <li>1</li> <li>2</li> <li>3</li> <li id="me">4</li> <li>5</li> <li>6</li></ul></BODY></HTML>

2.4设置节点属性

在找到需要的节点之后通常希望对其属性做相应的设置，DOM定义了两个方法来查询和设置节点的属性，即getAttribute()和setAttribute()。

getAttribute()只有一个参数即要查询的属性的名称，setAttribute()可以实现对属性的修改或增加，他有两个参数，分别是属性名称和属性值。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE>get&setAttribute</TITLE><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">body{margin:15px;font-family:Arial;font-size:12px;}.changeClass{color:#0033CC;text-decoration:underline;}</style><SCRIPT LANGUAGE="JavaScript"></SCRIPT></HEAD><BODY><p id="me" title="获取和设置节点属性" onclick="changeAttribute()">Click me</p></BODY></HTML>

2.5创建和添加节点

除了查找节点并处理节点属性外，DOM同样提供了很多方法来管理节点，主要包括创建，删除，替换和查找。

创建节点的过程在DOM中比较规范，而且不同类型的节点创建方法还稍有不同，例如创建元素节点用createElement(),创建文本节点用createTextNode()，创建文档碎片节点用createDocumentFragment()，等等。创建并添加节点的示例函数如下：

function createElement(){ var oPElement = document.createElement("p"); var oText = document.createTextNode("This is a new node"); //oFragment = document.createDocumentFragment(); oPElement.appendChild(oText); document.body.appendChild(oPElement);}

上述代码创建的新节点插入到了<body>子节点列表的末尾，如果希望这个节点能够插入到特定节点之前，可以使用DOM提供的方法insertBefore()。DOM并没有提供方法将新节点插入到特定节点之后，但是我们可以自己实现类似的方法。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE>insertAfter</TITLE><SCRIPT LANGUAGE="JavaScript"></SCRIPT></HEAD><BODY onload="insertP()"><p id="me" onclick="insertP()">Click me</p></BODY></HTML>

以上节点添加方法非常实用，但是一旦添加的节点非常多时，页面执行效率就会很低，通常解决的方法是创建一个文档碎片，把新的节点添加到该碎片上，然后一次性的添加到实际页面中。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE>DocumentFragment</TITLE><SCRIPT LANGUAGE="JavaScript"></SCRIPT></HEAD><BODY"><p id="me" onclick="insertP()">Click me</p></BODY></HTML>

删除节点是通过父节点的removeChild()方法来实现的，替换节点同意是通过父节点的replaceChild()方法来实现，这里不再详细介绍。

3使用非标准DOM innerHTML属性

除了上面介绍的一系列DOM标准方法外，innerHTML这个属性由于使用方便，也得到了目前主流浏览器的支持。

需要说明的是，innerHTML属性并不是W3C DOM的标准组成部分，虽然插入打断HTML内容时它可以又快又简洁的完成任务，但它不会返回任何对刚插入内容进行处理的对象。如果需要对刚插入的内容进行处理，还是需要标准的DOM方法。

4DOM与CSS

前面提到的DOM都是与结构层打交道的，例如查找节点，添加节点等。而DOM还有一个非常实用的className属性，可以修改或追加一个节点的CSS类别。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE>Add&ModifyCSS</TITLE><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">body{margin:15px;font-family:Arial;font-size:12px;}.PClass{color:#0033CC;}.AddClass{text-decoration:underline;}.ModifyClass{color:#0033CC;text-decoration:underline;}</style><SCRIPT LANGUAGE="JavaScript"></SCRIPT></HEAD><BODY"><p id="AddClass" class="PClass" onclick="AddClass()">Add Class</p><p id="ModifyClass" onclick="ModifyClass()">Modify Class</p></BODY></HTML>

需要注意的是，在追加节点的类别时（oMy.className += " AddClass";），两种class内的属性不能重复，并且AddClass前至少要保留一个空格。