Dom 简明教程
XML DOM - Navigation
到目前为止，我们已经学习了 DOM 结构、如何加载和解析 XML DOM 对象以及如何遍历 DOM 对象。这里我们将看到如何在 DOM 对象中的节点之间导航。XML DOM 由节点的各种属性组成，这些属性帮助我们在节点中进行导航，例如：
Until now we studied DOM structure, how to load and parse XML DOM object and traverse through the DOM objects. Here we will see how we can navigate between nodes in a DOM object. The XML DOM consist of various properties of the nodes which help us navigate through the nodes, such as −
-
parentNode
-
childNodes
-
firstChild
-
lastChild
-
nextSibling
-
previousSibling
以下是节点树的示意图，展示了它与其他节点之间的关系。
Following is a diagram of a node tree showing its relationship with the other nodes.
DOM - Parent Node
此属性将父节点指定为节点对象。
This property specifies the parent node as a node object.
Example
以下示例 (navigate_example.htm) 将 XML 文档 ( node.xml ) 解析成 XML DOM 对象。然后通过子节点将 DOM 对象导航到父节点：
The following example (navigate_example.htm) parses an XML document (node.xml) into an XML DOM object. Then the DOM object is navigated to the parent node through the child node −
<!DOCTYPE html>
<html>
<body>
<script>
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","/dom/node.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
var y = xmlDoc.getElementsByTagName("Employee")[0];
document.write(y.parentNode.nodeName);
</script>
</body>
</html>如你在上面的示例中所见，子节点 Employee 导航到它的父节点。
As you can see in the above example, the child node Employee navigates to its parent node.
Execution
在服务器路径上将此文件保存为 navigate_example.html（此文件和 node.xml 应位于服务器中的同一路径）。在输出中，我们获取了 Employee 的父节点，即 Company。
Save this file as navigate_example.html on the server path (this file and node.xml should be on the same path in your server). In the output, we get the parent node of Employee, i.e, Company.
First Child
此属性的类型为 Node，表示 NodeList 中出现的第一个子节点名称。
This property is of type Node and represents the first child name present in the NodeList.
Example
以下示例 (first_node_example.htm) 将 XML 文档 ( node.xml ) 解析为 XML DOM 对象，然后导航至 DOM 对象中存在的第一个子节点。
The following example (first_node_example.htm) parses an XML document (node.xml) into an XML DOM object, then navigates to the first child node present in the DOM object.
<!DOCTYPE html>
<html>
<body>
<script>
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","/dom/node.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
function get_firstChild(p) {
a = p.firstChild;
while (a.nodeType != 1) {
a = a.nextSibling;
}
return a;
}
var firstchild = get_firstChild(xmlDoc.getElementsByTagName("Employee")[0]);
document.write(firstchild.nodeName);
</script>
</body>
</html>-
Function get_firstChild(p) is used to avoid the empty nodes. It helps to get the firstChild element from the node list.
-
x = get_firstChild(xmlDoc.getElementsByTagName("Employee")[0]) fetches the first child node for the tag name Employee.
Execution
将此文件保存在服务器路径中，文件名设为 first_node_example.htm（此文件和 node.xml 应位于服务器中的同一个路径）。在输出中，我们获取 Employee 的第一个子节点，即 FirstName。
Save this file as first_node_example.htm on the server path (this file and node.xml should be on the same path in your server). In the output, we get the first child node of Employee i.e. FirstName.
Last Child
此属性类型为 Node，表示 NodeList 中存在的最后一个子节点名称。
This property is of type Node and represents the last child name present in the NodeList.
Example
以下示例 (last_node_example.htm) 将 XML 文档 ( node.xml ) 解析为 XML DOM 对象，然后导航至 xml DOM 对象中存在的最后一个子节点。
The following example (last_node_example.htm) parses an XML document (node.xml) into an XML DOM object, then navigates to the last child node present in the xml DOM object.
<!DOCTYPE html>
<body>
<script>
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","/dom/node.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
function get_lastChild(p) {
a = p.lastChild;
while (a.nodeType != 1){
a = a.previousSibling;
}
return a;
}
var lastchild = get_lastChild(xmlDoc.getElementsByTagName("Employee")[0]);
document.write(lastchild.nodeName);
</script>
</body>
</html>Execution
将此文件保存在服务器路径中，文件名设为 last_node_example.htm（此文件和 node.xml 应位于服务器中的同一个路径）。在输出中，我们获取 Employee 的最后一个子节点，即 Email。
Save this file as last_node_example.htm on the server path (this file and node.xml should be on the same path in your server). In the output, we get the last child node of Employee, i.e, Email.
Next Sibling
此属性类型为 Node，表示下一个子节点，即 NodeList 中指定子元素的下一个同级元素。
This property is of type Node and represents the next child, i.e, the next sibling of the specified child element present in the NodeList.
Example
以下示例 (nextSibling_example.htm) 将 XML 文档 ( node.xml ) 解析为 XML DOM 对象，该对象立即导航至 xml 文档中存在的下一个节点。
The following example (nextSibling_example.htm) parses an XML document (node.xml) into an XML DOM object which navigates immediately to the next node present in the xml document.
<!DOCTYPE html>
<body>
<script>
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","/dom/node.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
function get_nextSibling(p) {
a = p.nextSibling;
while (a.nodeType != 1) {
a = a.nextSibling;
}
return a;
}
var nextsibling = get_nextSibling(xmlDoc.getElementsByTagName("FirstName")[0]);
document.write(nextsibling.nodeName);
</script>
</body>
</html>Execution
将此文件保存在服务器路径中，文件名设为 nextSibling_example.htm（此文件和 node.xml 应位于服务器中的同一个路径）。在输出中，我们获取 FirstName 的下一个同级节点，即 LastName。
Save this file as nextSibling_example.htm on the server path (this file and node.xml should be on the same path in your server). In the output, we get the next sibling node of FirstName, i.e, LastName.
Previous Sibling
此属性类型为 Node，表示上一个子节点，即 NodeList 中指定子元素的上一个同级元素。
This property is of type Node and represents the previous child, i.e, the previous sibling of the specified child element present in the NodeList.
Example
以下示例 (previoussibling_example.htm) 将 XML 文档 ( node.xml ) 解析为 XML DOM 对象，然后导航至 xml 文档中存在的最后一个子节点的上一个节点。
The following example (previoussibling_example.htm) parses an XML document (node.xml) into an XML DOM object, then navigates the before node of the last child node present in the xml document.
<!DOCTYPE html>
<body>
<script>
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","/dom/node.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
function get_previousSibling(p) {
a = p.previousSibling;
while (a.nodeType != 1) {
a = a.previousSibling;
}
return a;
}
prevsibling = get_previousSibling(xmlDoc.getElementsByTagName("Email")[0]);
document.write(prevsibling.nodeName);
</script>
</body>
</html>Execution
将此文件保存在服务器路径中，文件名设为 previoussibling_example.htm（此文件和 node.xml 应位于服务器中的同一个路径）。在输出中，我们获取 Email 的上一个同级节点，即 ContactNo。
Save this file as previoussibling_example.htm on the server path (this file and node.xml should be on the same path in your server). In the output, we get the previous sibling node of Email, i.e, ContactNo.