| | | JS应用DOM入门：简单文档DOM结构分析 | | 2001-11-02·
·甘冀平··天极设计在线
| 1 2 下一页 一个简单文档的DOM结构分析
下面让我们来对一个简单的文档进行分析，最终形成它的DOM结构。要分析的文档包括3个段落，HTML代码如下：
<HTML>
<HEAD>
<TITLE> Simple DOM Demo </TITLE>
</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>
</BODY>
</HTML> |
请注意，从现在开始，我们就要按照Tree结构以及家族关系的方式来看待整个文档了。 <BODY>标记是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中的每一个节点。 1 2 下一页 | | | 感谢
访问天极网，如果您觉得该文章涉及版权问题，请看这里！
|
|
