📄 3b_display.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <!--NewPage--> <html><!-- #BeginTemplate "/Templates/Section.dwt" --> <head><!-- #BeginEditable "doctitle" --> <title>Examining DOM Structure</title><!-- #EndEditable --> <style type="text/css"><!----></style></head><body BGCOLOR="#ffffff"><!-- #BeginEditable "content" --> <table width="100%"> <tr> <td align=left> <ahref="3_display.html"><img src="../images/PreviousArrow.gif" width=26 height=26 align=bottom border=0 alt="Previous | "></a><a href="4_tree.html"><img src="../images/NextArrow.gif" width=26 height=26 align=bottom border=0 alt="Next | "></a><a href="../alphaIndex.html"><img src="../images/xml_IDX.gif" width=26 height=26 align=bottom border=0 alt="Index | "></a><a href="../TOC.html"><imgsrc="../images/xml_TOC.gif" width=26 height=26 align=bottom border=0 alt="TOC | "></a><a href="../index.html"><imgsrc="../images/xml_Top.gif" width=26 height=26 align=bottom border=0 alt="Top | "></a> </td> <td align=right><strong><em><a href="index.html">Top</a></em></strong> <a href="../TOC.html#intro"><strong><em>Contents</em></strong></a> <a href="../alphaIndex.html"><strong><em>Index</em></strong></a> <a href="../glossary.html"><strong><em>Glossary</em></strong></a> </td> </tr></table><p> <center> <IMG SRC="../images/shoeline2.gif" ALIGN="BOTTOM" BORDER="0" WIDTH="202" HEIGHT="25" NATURALSIZEFLAG="3"> <img src="../images/shoeline2.gif" align="BOTTOM" border="0" width="202" height="25" naturalsizeflag="3"> </center><blockquote> <blockquote> <hr size=4> </blockquote></blockquote><p> <h2> 3b. Examining the Structure of a DOM</h2><table width="40%" border="1" align="right"> <tr> <td> <div align="center"><b><i>Link Summary</i></b></div> </td> </tr> <tr> <td> <dl> <dt><b><i>Exercise Links</i></b></dt> </dl> <ul> <li><a href="work/DomEcho02.java"><code>DomEcho02.java</code></a></li> <li><a href="samples/slideSample01.xml"><code>slideSample01.xml</code></a><a href="samples/slideSample01.xml"><code></code></a></li> <li><a href="samples/slideSample10.xml"><code>slideSample10.xml</code></a></li> </ul> <dl> <dt><b><i>API Links</i></b></dt> </dl> <ul> <li><a href="../../api/org/w3c/dom/Node.html">org.w3c.dom.Node</a></li> </ul> <dl> <dt><b></b></dt> <dt><b><i>Glossary Terms</i></b></dt> </dl> <dl> <dd><a href="../glossary.html#DTD">DTD</a></dd> </dl> </td> </tr></table><p>In this section, you'll use the GUI-fied DomEcho app you created in the last section to visually examine a DOM. You'll see what nodes make up the DOM, and how they are arranged. With the understanding you acquire, you'll be well prepared to construct and modify Document Object Model structures in the future. <h3><a name="simple"></a>Displaying A Simple Tree</h3><p>We'll start out by displaying a simple file, so you get an idea of basic DOM structure. Then we'll look at the structure that results when you include some of the more advanced XML elements.</p><blockquote> <p><b>Note:</b><br> The code used to create the figures in this section is in <a href="work/DomEcho02.java"><code>DomEcho02.java</code></a>. The file displayed is <a href="samples/slideSample01.xml"><code>slideSample01.xml</code></a>. </p></blockquote><p>Figure 1 shows the tree you see when you run the DomEcho program on the first XML file you created in the DOM tutorial. </p><blockquote> <p><img src="images/p201a.gif" width="640" height="440"><b><i><br> Figure 1: Document, Comment, and Element Nodes Displayed</i></b></p></blockquote><p>Recall that the first bit of text displayed for each node is the element <tt>type</tt>. After that comes the element <tt>name</tt>, if any, and then the element <tt>value</tt>. This view shows three element types: Document, Comment, and Element. There is only Document type for the whole tree -- that is the root node. The Comment node displays the <tt>value</tt> attribute, while the Element node displays the element <tt>name</tt>, "slideshow".</p><blockquote> <p><b>Note:</b><br> The different node types, their properties, and the methods used to access them are documented in the <a href="../../api/org/w3c/dom/Node.html">org.w3c.dom.Node</a> interface. Compare that table with the code in the AdapterNode's <code>toString</code> method to see whether the name or value is being displayed for a particular node. If you need to make it more clear, modify the program to indicate which property is being displayed (for example, with N: <i>name</i>, V: <i>value</i>).</p></blockquote>Expanding the slideshow element brings up the display shown in Figure 2. <blockquote> <p><img src="images/p201b.gif" width="640" height="440"><br> <i><b>Figure 2: Element Node Expanded, No Attribute Nodes Showing</b></i></p></blockquote><p>Here, you can see the Text nodes and Comment nodes that are interspersed between Slide elements. The empty Text nodes exist because there is no DTD to tell the parser that no text exists. (Generally, the vast majority of nodes in a DOM tree will be Element and Text nodes.)</p><p>Notably absent from this picture are the Attribute nodes. An inspection of the table in <a href="../../api/org/w3c/dom/Node.html">org.w3c.dom.Node</a> shows that there is indeed an Attribute node type. But they are not included as children in the DOM hierarchy. They are instead obtained via the Node interface <tt>getAttributes</tt> method.</p><blockquote> <p><b>Note:</b><br> The display of the text nodes is the reason for including the lines below in the AdapterNode's <tt>toString</tt> method. If your remove them, you'll see the funny characters (typically square blocks) that are generated by the newline characters that are in the text.</p> <blockquote> <pre><new>String t = domNode.getNodeValue().trim();</new><new>int x = t.indexOf("\n");</new><new>if (x >= 0) t = t.substring(0, x);</new><new>s += t;</new> </pre> </blockquote></blockquote><h3><a name="complex"></a>Displaying a More Complex Tree</h3><p>Here, you'll display the example XML file you created at the end of the SAX tutorial, to see how entity references, processing instructions, and CDATA sections appear in the DOM.</p><blockquote> <p><b>Note:</b><br> The file displayed in this section is <a href="samples/slideSample10.xml"><code>slideSample10.xml</code></a>. </p></blockquote><p> Figure 3 shows the result of running the DomEcho app on slideSample10.xml, which includes a <tt>DOCTYPE</tt> entry that identifies the document's <a href="../glossary.html#DTD">DTD</a>.</p><blockquote> <img src="images/p210c.gif" width="640" height="440"><br> <i><b>Figure 3: DocType Node Displayed</b></i></blockquote><p>The DocType interface is actually an extension of w3c.org.dom.Node. It defines a <tt>getEntities</tt> method that you would use to to obtain Entity nodes -- the nodes that define entities like the <tt>product</tt> entity, which has the value "WonderWidgets". Like Attribute nodes, Entity nodes do not appear as children of DOM nodes.</p><p>When you expand the <tt>slideshow</tt> node, you get the display shown in Figure 4.</p><blockquote> <img src="images/p210d.gif" width="640" height="440"><br> <i><b>Figure 4: Processing Instruction Node Displayed</b></i></blockquote><p>Here, the processing instruction node is highlighted, showing that those nodes do appear in the tree. The <tt>name</tt> property contains the target-specification, which identifies the app that the instruction is directed to. The <tt>value</tt> property contains the text of the instruction.. </p><p>Note that empty text nodes are also shown here, even though the DTD specifies that a <tt>slideshow</tt> can contain <tt>slide</tt> elements only, never text. Logically, then, you might think that these nodes would not appear. (When this file was run through the SAX parser, those elements generated <tt>ignorableWhitespace</tt> events, rather than <tt>character</tt> events.) </p><p>The empty text elements are included because by default, DocumentBuilder creates a DOM that includes <i>all the lexical information necessary to reconstruct the original document, in it's original form</i>. That includes comment nodes as well as text nodes. There is as yet no standard mechanism for eliminating such lexical information in the DOM so you are left with the logical structure.</p><blockquote> <p><img src="../images/sun.gif" width="62" height="29"><b>Note:</b><br> The reference implementation's XmlDocumentBuilder class defines the <tt>setIgnoringLexicalInformation</tt> method for this purpose. For more information on using that method, see the <a href="2_anydata.html#wire">Wire Your "Parser" to an XmlDocumentBuilder</a> in the <a href="2_anydata.html">Generating XML from an Arbitrary Data Structure</a> section of the DOM tutorial.</p></blockquote><p>Moving down to the second <tt>slide</tt> element and opening the <tt>item</tt> element under it brings up the display shown in Figure 5.</p><blockquote> <img src="images/p210e.gif" width="640" height="440"><br> <i><b>Figure 5: Entity Reference Node Displayed</b></i></blockquote><p>Here, the Entity Reference node is highlighted. Note that the entity reference contains multiple nodes under it. This example shows only comment and a text nodes, but the entity could conceivable contain other element nodes, as well.</p><p>Moving down to the last <tt>item</tt> element under the last <tt>slide</tt> brings up the display shown in Figure 6.</p><blockquote> <img src="images/p210f.gif" width="640" height="440"><br> <i><b>Figure 6: CDATA Node Displayed</b></i></blockquote><p>Here, the CDATA node is highlighted. Note that there are no nodes under it. Since a CDATA section is entirely uninterpreted, all of its contents are contained in the node's <tt>value</tt> property.</p><h3><a name="finish"></a>Finishing Up </h3><p>At this point, you have seen most of the nodes you will ever encounter in a DOM tree. There are one or two more that we'll mention in the next section, but you now know what you need to know to create or modify a DOM structure. In the next section, you'll see how to convert a DOM into a JTree that is suitable for an interactive GUI. Or, if you prefer, you can skip ahead to the 5th section of the DOM tutorial, <a href="5_create.html">Creating and Manipulating a DOM</a>, where you'll learn how to create a DOM from scratch. </p><blockquote> <p> <hr size=4></blockquote><p> <p> <table width="100%"> <tr> <td align=left> <ahref="3_display.html"><img src="../images/PreviousArrow.gif" width=25 height=26 align=bottom border=0 alt="Previous | "></a><ahref="4_tree.html"><img src="../images/NextArrow.gif" width=26 height=26 align=top border=0 alt="Next | "></a><a href="../alphaIndex.html"><img src="../images/xml_IDX.gif" width=26 height=26 align=top border=0 alt="Index | "></a><a href="../TOC.html"><imgsrc="../images/xml_TOC.gif" width=26 height=26 align=top border=0 alt="TOC | "></a><a href="../index.html"><imgsrc="../images/xml_Top.gif" width=26 height=26 align=top border=0 alt="Top | "></a> </td> <td align=right><strong><em><a href="index.html">Top</a></em></strong> <a href="../TOC.html#intro"><strong><em>Contents</em></strong></a> <a href="../TOC.html#intro"><strong><em></em></strong></a> <a href="../alphaIndex.html"><strong><em>Index</em></strong></a> <a href="../glossary.html"><strong><em>Glossary</em></strong></a></td> </tr></table><!-- #EndEditable --> </body><!-- #EndTemplate --></html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -