📄 dom_nodes_navigate.asp@output=print
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XML DOM - Navigate Nodes</title>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="Keywords" content="xml,tutorial,html,dhtml,css,xsl,xhtml,javascript,asp,ado,vbscript,dom,sql,colors,soap,php,authoring,programming,training,learning,beginner's guide,primer,lessons,school,howto,reference,examples,samples,source code,tags,demos,tips,links,FAQ,tag list,forms,frames,color table,w3c,cascading style sheets,active server pages,dynamic html,internet,database,development,Web building,Webmaster,html guide" />
<meta name="Description" content="Free HTML XHTML CSS JavaScript DHTML XML DOM XSL XSLT RSS AJAX ASP ADO PHP SQL tutorials, references, examples for web building." />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "../../https@ssl./default.htm" : "../../www./default.htm");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-3855518-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>
</head>
<body>
<p>From <b>http://www.w3schools.com</b> (Copyright Refsnes Data)</p>
<h1>XML DOM - Navigating Nodes</h1>
<a href="dom_mozilla_vs_ie.asp"><img border="0" src="../images/btn_previous.gif" alt="prev" width="100" height="20" /></a>
<a href="dom_nodes_get.asp"><img border="0" src="../images/btn_next.gif" alt="next" width="100" height="20" /></a>
<hr />
<p class="intro">Nodes can be navigated using node relationships.</p>
<hr />
<h2>Examples
</h2>
<p>The examples below use the XML file
<a target="_blank" href="books.xml">books.xml</a>. <br />
A function, <a href="dom_loadxmldoc.asp">loadXMLDoc()</a>, in an external JavaScript is used to load the XML file.</p>
<p><a target="_blank" href="tryit.asp@filename=try_dom_nav_parentnode">Get the
parent of a node</a><br />
This example uses the parentNode property to get the parent of a node</p>
<p><a target="_blank" href="tryit.asp@filename=try_dom_nav_firstchild">Get the
first child element of a node</a><br />
This example uses the firstChild() method and a custom function to get the first
child node of a node</p>
<hr />
<h2>Navigating DOM Nodes</h2>
<p>Accessing nodes in the node tree via the relationship between nodes, is often
called "navigating nodes". </p>
<p>In the XML DOM, node relationships are defined as properties to the nodes:</p>
<ul>
<li>parentNode</li>
<li>childNodes</li>
<li>firstChild</li>
<li>lastChild</li>
<li>nextSibling</li>
<li>previousSibling</li>
</ul>
<p>The following image illustrates a part of the node tree and the
relationship between nodes in <a target="_blank" href="books.xml">books.xml</a>:</p>
<p><img border="0" src="navigate.gif" alt="Node tree" width="335" height="354" /></p>
<hr />
<h2>DOM - Parent Node</h2>
<p>All nodes has exactly one parent node. The following code navigates to the
parent node of <book>: </p>
<table class="ex" id="table60" border="1" cellspacing="0" width="100%">
<tr>
<td>
<pre>xmlDoc=loadXMLDoc("books.xml");</pre>
<pre>x=xmlDoc.getElementsByTagName("book")[0];
document.write(x.parentNode.nodeName);</pre>
</td>
</tr>
</table>
<p>Example explained:</p>
<ol>
<li>Load "<a target="_blank" href="books.xml">books.xml</a>"
into xmlDoc using <a href="dom_loadxmldoc.asp">loadXMLDoc()</a> </li>
<li>Get the first <book> element</li>
<li>Output the node name of the parent node of "x"</li>
</ol>
<p>
<a target="_blank" href="tryit.asp@filename=try_dom_nav_parentnode">Try it
yourself</a></p>
<hr />
<h2>Avoid Empty Text Nodes</h2>
<p>Firefox, and some other browsers, will treat empty white-spaces or new lines
as text nodes, Internet Explorer will not.</p>
<p>This causes a problem when using the properties: firstChild, lastChild,
nextSibling, previousSibling. </p>
<p>To avoid navigating to empty text nodes (spaces and new-line characters
between element nodes), we use a function that checks the node type:</p>
<table class="ex" id="table59" border="1" cellspacing="0" width="100%">
<tr>
<td>
<pre>function get_nextSibling(n)
{
y=n.nextSibling;
while (y.nodeType!=1)
{
y=y.nextSibling;
}
return y;
}</pre>
</td>
</tr>
</table>
<p>The function above allows you to use get_nextSibling(<i>node</i>) instead of
the property <i>node</i>.nextSibling.</p>
<p>Code explained:</p>
<p>Element nodes are type 1. If the sibling node is not an
element node, it moves to the next nodes until an element node
is found. This way, the result will be the same in both Internet Explorer and
Firefox.</p>
<hr />
<h2>Get the First Child Element</h2>
<p>The following code displays the first element node of the first <book>:</p>
<table class="ex" id="table55" border="1" cellspacing="0" width="100%">
<tr>
<td>
<pre><html>
<head>
<script type="text/javascript" src="loadxmldoc.js">
</script>
<script type="text/javascript">
//check if the first node is an element node
function get_firstChild(n)
{
y=n.firstChild;
while (y.nodeType!=1)
{
y=y.nextSibling;
}
return y;
}
</script>
</head>
<body>
<script type="text/javascript">
xmlDoc=loadXMLDoc("books.xml");
x=get_firstChild(xmlDoc.getElementsByTagName("book")[0]);
document.write(x.nodeName);
</script>
</body>
</html></pre>
</td>
</tr>
</table>
<p>Output:</p>
<table class="ex" id="table56" border="1" cellspacing="0" width="100%">
<tr>
<td>
<pre>title</pre>
</td>
</tr>
</table>
<p>Example explained:</p>
<ol>
<li>Load "<a target="_blank" href="books.xml">books.xml</a>"
into xmlDoc using <a href="dom_loadxmldoc.asp">loadXMLDoc()</a> </li>
<li>Use the get_firstChild fucntion on the first <book> element node
to get the first child node that is an element node</li>
<li>Output the node name of first child node that is an element node</li>
</ol>
<p>
<a target="_blank" href="tryit.asp@filename=try_dom_nav_firstchild">Try it
yourself</a></p>
<hr />
<h2>Examples</h2>
<p>The following examples use a similar function: </p>
<p>firstChild:
<a target="_blank" href="tryit.asp@filename=try_dom_nav_firstchild">Try it
yourself</a> lastChild:
<a target="_blank" href="tryit.asp@filename=try_dom_nav_lastchild">Try it
yourself</a></p>
<p>nextSibling:
<a target="_blank" href="tryit.asp@filename=try_dom_nav_nextsibling">Try it
yourself</a> previousSibling:
<a target="_blank" href="tryit.asp@filename=try_dom_nav_prevsibling">Try it
yourself</a></p>
<hr />
<a href="dom_mozilla_vs_ie.asp"><img border="0" src="../images/btn_previous.gif" alt="prev" width="100" height="20" /></a>
<a href="dom_nodes_get.asp"><img border="0" src="../images/btn_next.gif" alt="next" width="100" height="20" /></a>
<p>From <b>http://www.w3schools.com</b> (Copyright Refsnes Data)</p>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -