DOM是文档对象化模型（Document Object Model）的简称。DOM Tree是指通过DOM将HTML页面进行解析，并生成的HTML tree树状结构和对应访问方法。
概要：
DOM技术被Internet Explorer 5.0及以上版本的浏览器所支持，它采取一种非常直观且一致的方式将HTML文档进行模型化处理，并借此提供访问、导航和操作页面的简易编程接口。通过DOM技术，我们不仅能够访问和更新页面的内容及结构，而且还能操纵文档的风格样式。DOM由W3C组织所倡导，这样，大多数浏览器都将最终支持这项技术。
DOM技术允许我们操纵文档的Tree结构，这包括创建新节点（nodes）、删除存在的节点以及在Tree中移动节点。实际上，这就是执行创建新标记（tags）、删除存在的标记以及在文档中移动标记的过程。DTHML对象模型则不允许更改文档结构，我们只能操纵现有的对象。
DOMTree中三种重要的节点：
Element Node : .com"> 中href="http:_//ww_w.test.c_om"即是这个a的属性节点
Text Node : nodeType=3
文本节点 如<span>text中的“text”即是一个文本节点
注意：通过obj.nodeType得到的值就可以判断访问到的是哪种节点。
得到指定的元素节点oNode：
document.getElementById(sid)
document.getElementsByName(sname)
document.getElementsByTagName(stagname)
注意：
document是所有节点的父节点。
元素节点的ID要保持唯一不变。
节点name属性可以重复，但是在IE下getElementsByName对于DIV节点无效，所以不推荐使用。
从一个节点oNode出发访问相关元素或者文本节点：
oNode.firstChild();
oNode.lastChild();
oNode.previousSibling();
oNode.nextSibling();
oNode.childNodes();
oNode.parentNode();
注意：<div>xyz这个HTML片段.，在FireFox下如果x处为空，也会被认为存在一个空的文本节点，所以在进行DomTree遍历时要根据nodeType判断，来确保找到想找的节点
访问节点oNode的属性节点
oNode.getAttribute(sName);
oNode.setAttribute(sName,sValue);
DOM Tree实例
<HTML>
<HEAD>
<TITLE> Simple DOM Demo </TITLE>
</HEAD>
bodyNode">
This is paragraph 1.
This is the document body
<P ID = "p2Node"> </P>
<P ID = "p3Node"></P>
</BODY>
</HTML>
请注意，从现在开始，我们就要按照Tree结构以及家族关系的方式来看待整个文档了。 标记是Tree的根节点，它包含了4个孩子节点：p1Node、文本项节点（“This is the document body”）、p2Node和p3Node。每个孩子节点或者是一个HTML标记型节点，或者是一个文本项型节点。在一对开始标记和结束标记间的内容属于这个标记的孩子节点，比如“This is paragraph1”就是p1Node节点的孩子节点，同时它本身也是一个文本项型节点。文本项型节点必须包含一个非空字符，因此，第2段和第3段的孩子节点是不存在的。
这里有上述HTML文档的DOM Tree图示，它能帮助我们更好地理解节点间的相互关系：
HTML中有一些标记不包含关闭括弧，这种情况下，我们可以将下一个紧挨者的标记作为关闭括弧对待。比如<LI>标记可以将紧挨者的<LI>或<UL>标记作为关闭标识。
简单文档的节点导航
文档的DOM Tree结构为每个标记和文本项设置了一个节点，对于任一被分配了ID属性的节点，都可以作为起始点开始整个Tree的“攀登”。而且，借助DOM属性的强大功能，我们可以寻址到Tree中的每一个节点。
在继续讲述前，请再次看看上一节中的简单文档的HTML源代码以及它的DOM Tree结构图。我们可以得知：图中的箭头表示了可以到达Tree中其他节点的导航路线；<BODY>标记的ID属性值是bodyNode，3个<P>标记的ID属性值依次为p1Node、p2Node和p3Node。下面，我们分别从不同的节点开始，举例说明如何寻址到其他的节点：
起始节点 到达节点 寻址表达式
p1Node bodyNode.firstChild 或bodyNode.childNodes[0]
p1Node的孩子节点 bodyNode.firstChild.firstChild
文本项节点 bodyNode.childNodes[1]
p3Node BodyNode.childNodes[3] 或bodyNode.lastChild
p1Node 文本项节点 p1Node.nextSibling
p2Node p1Node.nextSibling.nextSibling
p3Node p1Node.nextSibling.nextSibling.nextSibling
p3Node p1Node的孩子节点 p3Node.previousSibling.previousSibling.previousSibling.childNodes[0]
以上列举的都是从双亲（parent）到孩子或者孩子到孩子方向的寻址表达式，借助我们介绍另外一种导航方向：使用parentNode属性从孩子到双亲。比如：要从每一个<P>标记开始寻址到<BODY>标记，可以使用p1Node.parentNode、p2Node.parentNode或者 p3Node.parentNode。
为了加深对以上节点导航表达式的理解，我们编写了一段JavaScript代码，它将显示出文档DOM的每个节点的nodeName值。请注意，除了上面举例的简单文档中涉及到的节点外，还包含一个
<HTML>
<HEAD>
<TITLE> Simple DOM Demo </title>
<!--
FORM.tb {display:inline;}
.twidth{width:100%}
.include{ font-size: 75%; font-family: verdana, arial, helvetica;}
.includebig{font-family: verdana, arial, helvetica;}
.includebig A:link { color: blue; }
.includebig A:visited { color: purple; }
.include A:link { color: blue; }
.include A:visited { color: purple; }
.submitter { font-size: 75%; font-family: verdana, arial, helvetica; }
pre.code {color: #660099; margin-left:5%}
address {text-align: right}
body {background:#FFFFFF; margin-left: 5%; margin-right: 5%}
-->
</STYLE>
</HEAD>
<BODY ID="bodyNode"><P ID = "p1Node">This is paragraph 1.</P>
This is the document body
<P ID = "p2Node"> </P>
<P ID = "p3Node"></P>
<SCRIPT LANGUAGE="JavaScript">
alert(
"bodyNode.firstChild.nodeName = " + bodyNode.firstChild.nodeName + "\n" +
"bodyNode.firstChild.data = " + bodyNode.firstChild.data + "\n" +
"bodyNode.childNodes[0].nodeName = " + bodyNode.childNodes[0].nodeName + "\n" +
"bodyNode.childNodes[1].nodeName = " + bodyNode.childNodes[1].nodeName + "\n" +
"bodyNode.childNodes[1].data = " + bodyNode.childNodes[1].data + "\n" +
"bodyNode.childNodes[3].nodeName = " + bodyNode.childNodes[3].nodeName + "\n" +
"bodyNode.childNodes[4].nodeName = " + bodyNode.childNodes[4].nodeName + "\n" +
"p1Node.nextSibling.nodeName = " + p1Node.nextSibling.nodeName + "\n" +
"p1Node.nextSibling.nextSibling.nodeName = " + p1Node.nextSibling.nextSibling.nodeName + "\n" +
"p1Node.nextSibling.nextSibling.nextSibling.nodeName = " + p1Node.nextSibling.nextSibling.nextSibling.nodeName+ "\n" +
"p3Node.previousSibling.previousSibling.previousSibling.childNodes[0].nodeName = " +
p3Node.previousSibling.previousSibling.previousSibling.childNodes[0].nodeName + "\n" +
"p1Node.parentNode.nodeName = " + p1Node.parentNode.nodeName + "\n" +
"p2Node.parentNode.nodeName = " + p2Node.parentNode.nodeName + "\n" +
"p3Node.parentNode.nodeName = " + p3Node.parentNode.nodeName + "\n" +
"bodyNode.firstChild.firstChild.parentNode.parentNode.nodeName = " +
bodyNode.firstChild.firstChild.parentNode.parentNode.nodeName + "\n"
);
</SCRIPT>
</BODY>
</HTML>
142
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
