Dom 简明教程
XML DOM - Overview
文档对象模型 (DOM) 是一项 W3C 标准。它定义了一个用于访问如 HTML 和 XML 之类的文档的标准。
The *D*ocument *O*bject *M*odel (DOM) is a W3C standard. It defines a standard for accessing documents like HTML and XML.
W3C 给出的 DOM 定义如下：
Definition of DOM as put by the W3C is −
DOM 定义了用于访问所有 XML 元素的对象、属性和方法（接口）。它分为 3 个不同的部分/等级：
DOM defines the objects and properties and methods (interface) to access all XML elements. It is separated into 3 different parts / levels −
-
Core DOM − standard model for any structured document
-
XML DOM − standard model for XML documents
-
HTML DOM − standard model for HTML documents
XML DOM 是 XML 的标准对象模型。XML 文档有层次分明的信息单元，称为节点；DOM 是一个标准编程接口，用于描述这些节点及其之间的关系。
XML DOM is a standard object model for XML. XML documents have a hierarchy of informational units called nodes; DOM is a standard programming interface of describing those nodes and the relationships between them.
此外，XML DOM 还提供了一个 API，允许开发人员在树上的任何一点添加、编辑、移动或删除节点，以便创建应用程序。
As XML DOM also provides an API that allows a developer to add, edit, move or remove nodes at any point on the tree in order to create an application.
以下是 DOM 结构的示意图。该图描绘了解析器如何通过遍历每个节点将一个 XML 文档计算为一个 DOM 结构。
Following is the diagram for the DOM structure. The diagram depicts that parser evaluates an XML document as a DOM structure by traversing through each node.
Advantages of XML DOM
以下是 XML DOM 的优点：
The following are the advantages of XML DOM.
-
XML DOM is language and platform independent.
-
XML DOM is traversable - Information in XML DOM is organized in a hierarchy which allows developer to navigate around the hierarchy looking for specific information.
-
XML DOM is modifiable - It is dynamic in nature providing the developer a scope to add, edit, move or remove nodes at any point on the tree.
XML DOM - Model
既然我们了解了 DOM 的含义，让我们看看 DOM 结构是什么。DOM 文档是按层次结构组织的一系列节点或信息片段。某些类型的节点可能有各种类型的子节点，而其他类型是叶子节点，在文档结构中没有子节点。以下是节点类型的列表，以及它们作为子节点可以具有的节点类型的列表 -
Now that we know what DOM means, let’s see what a DOM structure is. A DOM document is a collection of nodes or pieces of information, organized in a hierarchy. Some types of nodes may have child nodes of various types and others are leaf nodes that cannot have anything under them in the document structure. Following is a list of the node types, with a list of node types that they may have as children −
-
Document − Element (maximum of one), ProcessingInstruction, Comment, DocumentType (maximum of one)
-
DocumentFragment − Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
-
EntityReference − Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
-
Element − Element, Text, Comment, ProcessingInstruction, CDATASection, EntityReference
-
Attr − Text, EntityReference
-
ProcessingInstruction − No children
-
Comment − No children
-
Text − No children
-
CDATASection − No children
-
Entity − Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
-
Notation − No children
Example
考虑下列 XML 文档 node.xml 的 DOM 表示。
Consider the DOM representation of the following XML document node.xml.
<?xml version = "1.0"?>
<Company>
<Employee category = "technical">
<FirstName>Tanmay</FirstName>
<LastName>Patil</LastName>
<ContactNo>1234567890</ContactNo>
</Employee>
<Employee category = "non-technical">
<FirstName>Taniya</FirstName>
<LastName>Mishra</LastName>
<ContactNo>1234667898</ContactNo>
</Employee>
</Company>上述 XML 文档的文档对象模型如下 -
The Document Object Model of the above XML document would be as follows −
从上图流程中，我们可以推断 -
From the above flowchart, we can infer −
-
Node object can have only one parent node object. This occupies the position above all the nodes. Here it is Company.
-
The parent node can have multiple nodes called the child nodes. These child nodes can have additional nodes called the attribute nodes. In the above example, we have two attribute nodes Technical and Non-technical. The attribute node is not actually a child of the element node, but is still associated with it.
-
These child nodes in turn can have multiple child nodes. The text within the nodes is called the text node.
-
The node objects at the same level are called as siblings.
-
The DOM identifies − the objects to represent the interface and manipulate the document. the relationship among the objects and interfaces.
XML DOM - Nodes
在本章中，我们将学习 XML DOM 节点。每个 XML DOM 在称为节点的分层单元中包含信息，而 DOM 描述了这些节点及其关系。
In this chapter, we will study about the XML DOM Nodes. Every XML DOM contains the information in hierarchical units called Nodes and the DOM describes these nodes and the relationship between them.
Node Types
以下流程图显示了所有节点类型 −
The following flowchart shows all the node types −
XML 中最常见的节点类型是 −
The most common types of nodes in XML are −
-
Document Node − Complete XML document structure is a document node.
-
Element Node − Every XML element is an element node. This is also the only type of node that can have attributes.
-
Attribute Node − Each attribute is considered an attribute node. It contains information about an element node, but is not actually considered to be children of the element.
-
Text Node − The document texts are considered as text node. It can consist of more information or just white space.
一些不那么常见的节点类型是 −
Some less common types of nodes are −
-
CData Node − This node contains information that should not be analyzed by the parser. Instead, it should just be passed on as plain text.
-
Comment Node − This node includes information about the data, and is usually ignored by the application.
-
Processing Instructions Node − This node contains information specifically aimed at the application.
-
Document Fragments Node
-
Entities Node
-
Entity reference nodes
-
Notations Node
XML DOM - Node Tree
在本章中，我们将学习 XML DOM 节点树。在 XML 文档中，信息以分层结构维护；此分层结构称为节点树。这种层次结构允许开发人员在树中四处导航以查找特定信息，从而允许访问节点。然后可以更新这些节点的内容。
In this chapter, we will study about the XML DOM Node Tree. In an XML document, the information is maintained in hierarchical structure; this hierarchical structure is referred to as the Node Tree. This hierarchy allows a developer to navigate around the tree looking for specific information, thus nodes are allowed to access. The content of these nodes can then be updated.
节点树的结构从根元素开始，一直延伸到最低级别的子元素。
The structure of the node tree begins with the root element and spreads out to the child elements till the lowest level.
Example
以下示例演示了一个简单的 XML 文档，其节点树结构如下所示 −
Following example demonstrates a simple XML document, whose node tree is structure is shown in the diagram below −
<?xml version = "1.0"?>
<Company>
<Employee category = "Technical">
<FirstName>Tanmay</FirstName>
<LastName>Patil</LastName>
<ContactNo>1234567890</ContactNo>
</Employee>
<Employee category = "Non-Technical">
<FirstName>Taniya</FirstName>
<LastName>Mishra</LastName>
<ContactNo>1234667898</ContactNo>
</Employee>
</Company>正如上面看到的示例，其图片表示（其 DOM）如下所示 −
As can be seen in the above example whose pictorial representation (of its DOM) is as shown below −
-
The topmost node of a tree is called the root. The root node is <Company> which in turn contains the two nodes of <Employee>. These nodes are referred to as child nodes.
-
The child node <Employee> of root node <Company>, in turn consists of its own child node (<FirstName>, <LastName>, <ContactNo>).
-
The two child nodes, <Employee> have attribute values Technical and Non-Technical, are referred as attribute nodes.
-
The text within every node is called the text node.
XML DOM - Methods
作为一种 API 的 DOM 包含来表示 XML 文档中不同类型的信息的接口，例如元素和文本。这些接口包含在这些对象中工作所需的属性和方法。属性定义了节点的特征，而方法提供了操作节点的方式。
DOM as an API contains interfaces that represent different types of information that can be found in an XML document, such as elements and text. These interfaces include the methods and properties necessary to work with these objects. Properties define the characteristic of the node whereas methods give the way to manipulate the nodes.
下表列出了 DOM 类和接口 −
Following table lists the DOM classes and interfaces −
S.No. |
Interface & Description |
1 |
DOMImplementation It provides a number of methods for performing operations that are independent of any particular instance of the document object model. |
2 |
DocumentFragment It is the "lightweight" or "minimal" document object, and it (as the superclass of Document) anchors the XML/HTML tree in a full-fledged document. |
3 |
Document It represents the XML document’s top-level node, which provides access to all the nodes in the document, including the root element. |
4 |
Node It represents XML node. |
5 |
NodeList It represents a read-only list of Node objects. |
6 |
NamedNodeMap It represents collections of nodes that can be accessed by name. |
7 |
Data It extends Node with a set of attributes and methods for accessing character data in the DOM. |
8 |
Attribute It represents an attribute in an Element object. |
9 |
Element It represents the element node. Derives from Node. |
10 |
Text It represents the text node. Derives from CharacterData. |
11 |
Comment It represents the comment node. Derives from CharacterData. |
12 |
ProcessingInstruction It represents a "processing instruction". It is used in XML as a way to keep processor-specific information in the text of the document. |
13 |
CDATA Section It represents the CDATA Section. Derives from Text. |
14 |
Entity It represents an entity. Derives from Node. |
15 |
EntityReference This represent an entity reference in the tree. Derives from Node. |
XML DOM - Loading
在本篇中，我们将学习 XML 加载和解析。
In this chapter, we will study about XML Loading and Parsing.
为了描述 API 提供的接口，W3C 使用一种称为接口定义语言 (IDL) 的抽象语言。使用 IDL 的优势在于，开发人员可以学习如何用自己喜欢的语言使用 DOM，并且可以轻松切换到另一种语言。
In order to describe the interfaces provided by the API, the W3C uses an abstract language called the Interface Definition Language (IDL). The advantage of using IDL is that the developer learns how to use the DOM with his or her favorite language and can switch easily to a different language.
缺点在于，由于它是一种抽象语言，因此 Web 开发人员无法直接使用 IDL。由于编程语言之间的差异，它们需要在抽象接口与其具体语言之间进行映射或绑定。DOM 已映射到诸如 Javascript、JScript、Java、C、C++、PLSQL、Python 和 Perl 等编程语言。
The disadvantage is that, since it is abstract, the IDL cannot be used directly by Web developers. Due to the differences between programming languages, they need to have mapping — or binding — between the abstract interfaces and their concrete languages. DOM has been mapped to programming languages such as Javascript, JScript, Java, C, C++, PLSQL, Python, and Perl.
Parser
解析器是一种软件应用程序，旨在分析文档（在我们的案例中为 XML 文档），然后对信息执行具体操作。下表中列出了基于 DOM 的一些解析器：
A parser is a software application that is designed to analyze a document, in our case XML document and do something specific with the information. Some of the DOM based parsers are listed in the following table −
S.No |
Parser & Description |
1 |
JAXP Sun Microsystem’s Java API for XML Parsing (JAXP) |
2 |
XML4J IBM’s XML Parser for Java (XML4J) |
3 |
msxml Microsoft’s XML parser (msxml) version 2.0 is built-into Internet Explorer 5.5 |
4 |
4DOM 4DOM is a parser for the Python programming language |
5 |
XML::DOM XML::DOM is a Perl module to manipulate XML documents using Perl |
6 |
Xerces Apache’s Xerces Java Parser |
在像 DOM 这样的基于树的 API 中，解析器遍历 XML 文件并创建对应的 DOM 对象。然后你可以来回遍历 DOM 结构。
In a tree-based API like DOM, the parser traverses the XML file and creates the corresponding DOM objects. Then you can traverse the DOM structure back and forth.
Loading and Parsing XML
在加载 XML 文档时，XML 内容可能以两种形式出现：
While loading an XML document, the XML content can come in two forms −
-
Directly as XML file
-
As XML string
Content as XML file
以下示例演示如何在 XML 内容作为 XML 文件接收时使用 Ajax 和 Javascript 加载 XML ( node.xml ) 数据。在此处，Ajax 函数获取 xml 文件的内容并将其存储在 XML DOM 中。创建 DOM 对象后，解析该对象。
Following example demonstrates how to load XML (node.xml) data using Ajax and Javascript when the XML content is received as an XML file. Here, the Ajax function gets the content of an xml file and stores it in XML DOM. Once the DOM object is created, it is then parsed.
<!DOCTYPE html>
<html>
<body>
<div>
<b>FirstName:</b> <span id = "FirstName"></span><br>
<b>LastName:</b> <span id = "LastName"></span><br>
<b>ContactNo:</b> <span id = "ContactNo"></span><br>
<b>Email:</b> <span id = "Email"></span>
</div>
<script>
//if browser supports XMLHttpRequest
if (window.XMLHttpRequest) { // Create an instance of XMLHttpRequest object.
code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// sets and sends the request for calling "node.xml"
xmlhttp.open("GET","/dom/node.xml",false);
xmlhttp.send();
// sets and returns the content as XML DOM
xmlDoc = xmlhttp.responseXML;
//parsing the DOM object
document.getElementById("FirstName").innerHTML =
xmlDoc.getElementsByTagName("FirstName")[0].childNodes[0].nodeValue;
document.getElementById("LastName").innerHTML =
xmlDoc.getElementsByTagName("LastName")[0].childNodes[0].nodeValue;
document.getElementById("ContactNo").innerHTML =
xmlDoc.getElementsByTagName("ContactNo")[0].childNodes[0].nodeValue;
document.getElementById("Email").innerHTML =
xmlDoc.getElementsByTagName("Email")[0].childNodes[0].nodeValue;
</script>
</body>
</html>node.xml
<Company>
<Employee category = "Technical" id = "firstelement">
<FirstName>Tanmay</FirstName>
<LastName>Patil</LastName>
<ContactNo>1234567890</ContactNo>
<Email>tanmaypatil@xyz.com</Email>
</Employee>
<Employee category = "Non-Technical">
<FirstName>Taniya</FirstName>
<LastName>Mishra</LastName>
<ContactNo>1234667898</ContactNo>
<Email>taniyamishra@xyz.com</Email>
</Employee>
<Employee category = "Management">
<FirstName>Tanisha</FirstName>
<LastName>Sharma</LastName>
<ContactNo>1234562350</ContactNo>
<Email>tanishasharma@xyz.com</Email>
</Employee>
</Company>大多数的代码细节都在脚本代码中。
Most of the details of the code are in the script code.
-
Internet Explorer uses the ActiveXObject("Microsoft.XMLHTTP") to create an instance of XMLHttpRequest object, other browsers use the XMLHttpRequest() method.
-
the responseXML transforms the XML content directly in XML DOM.
-
Once the XML content is transformed into JavaScript XML DOM, you can access any XML element by using the JS DOM methods and properties. We have used the DOM properties such as childNodes, nodeValue and DOM methods such as getElementsById(ID), getElementsByTagName(tags_name).
Content as XML string
以下示例演示如何在 XML 内容作为 XML 文件接收时使用 Ajax 和 Javascript 加载 XML 数据。在此处，Ajax 函数获取 xml 文件的内容并将其存储在 XML DOM 中。创建 DOM 对象后，解析该对象。
Following example demonstrates how to load XML data using Ajax and Javascript when XML content is received as XML file. Here, the Ajax function, gets the content of an xml file and stores it in XML DOM. Once the DOM object is created it is then parsed.
<!DOCTYPE html>
<html>
<head>
<script>
// loads the xml string in a dom object
function loadXMLString(t) { // for non IE browsers
if (window.DOMParser) {
// create an instance for xml dom object parser = new DOMParser();
xmlDoc = parser.parseFromString(t,"text/xml");
}
// code for IE
else { // create an instance for xml dom object
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(t);
}
return xmlDoc;
}
</script>
</head>
<body>
<script>
// a variable with the string
var text = "<Employee>";
text = text+"<FirstName>Tanmay</FirstName>";
text = text+"<LastName>Patil</LastName>";
text = text+"<ContactNo>1234567890</ContactNo>";
text = text+"<Email>tanmaypatil@xyz.com</Email>";
text = text+"</Employee>";
// calls the loadXMLString() with "text" function and store the xml dom in a variable
var xmlDoc = loadXMLString(text);
//parsing the DOM object
y = xmlDoc.documentElement.childNodes;
for (i = 0;i<y.length;i++) {
document.write(y[i].childNodes[0].nodeValue);
document.write("<br>");
}
</script>
</body>
</html>大多数的代码细节都在脚本代码中。
Most of the details of the code are in the script code.
-
Internet Explorer uses the ActiveXObject("Microsoft.XMLDOM") to load XML data into a DOM object, other browsers use the DOMParser() function and parseFromString(text, 'text/xml') method.
-
The variable text shall contain a string with XML content.
-
Once the XML content is transformed into JavaScript XML DOM, you can access any XML element by using JS DOM methods and properties. We have used DOM properties such as childNodes, nodeValue.
Execution
将此文件保存为 loadingexample.html，然后在浏览器中打开。你将看到以下输出：
Save this file as loadingexample.html and open it in your browser. You will see the following output −
现在我们看到了 XML 内容如何转换成 JavaScript XML DOM，您可以使用 XML DOM 方法来访问任何 XML 元素。
Now that we saw how the XML content transforms into JavaScript XML DOM, you can now access any XML element by using the XML DOM methods.
XML DOM - Traversing
在本章中，我们将讨论 XML DOM 遍历。我们在 @ {s0} 中研究了如何加载 XML 文档并解析由此获得的 DOM 对象。可以遍历此解析的 DOM 对象。遍历是一个过程，其中通过逐个步骤遍历节点树中的每个元素来以系统的方式进行循环。
In this chapter, we will discuss XML DOM Traversing. We studied in the previous chapter how to load XML document and parse the thus obtained DOM object. This parsed DOM object can be traversed. Traversing is a process in which looping is done in a systematic manner by going across each and every element step by step in a node tree.
Example
以下示例 (traverse_example.htm) 演示了 DOM 遍历。此处我们遍历 <Employee> 元素的每个子节点。
The following example (traverse_example.htm) demonstrates DOM traversing. Here we traverse through each child node of <Employee> element.
<!DOCTYPE html>
<html>
<style>
table,th,td {
border:1px solid black;
border-collapse:collapse
}
</style>
<body>
<div id = "ajax_xml"></div>
<script>
//if browser supports XMLHttpRequest
if (window.XMLHttpRequest) {// Create an instance of XMLHttpRequest object.
code for IE7+, Firefox, Chrome, Opera, Safari
var xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// sets and sends the request for calling "node.xml"
xmlhttp.open("GET","/dom/node.xml",false);
xmlhttp.send();
// sets and returns the content as XML DOM
var xml_dom = xmlhttp.responseXML;
// this variable stores the code of the html table
var html_tab = '<table id = "id_tabel" align = "center">
<tr>
<th>Employee Category</th>
<th>FirstName</th>
<th>LastName</th>
<th>ContactNo</th>
<th>Email</th>
</tr>';
var arr_employees = xml_dom.getElementsByTagName("Employee");
// traverses the "arr_employees" array
for(var i = 0; i<arr_employees.length; i++) {
var employee_cat = arr_employees[i].getAttribute('category');
// gets the value of 'category' element of current "Element" tag
// gets the value of first child-node of 'FirstName'
// element of current "Employee" tag
var employee_firstName =
arr_employees[i].getElementsByTagName('FirstName')[0].childNodes[0].nodeValue;
// gets the value of first child-node of 'LastName'
// element of current "Employee" tag
var employee_lastName =
arr_employees[i].getElementsByTagName('LastName')[0].childNodes[0].nodeValue;
// gets the value of first child-node of 'ContactNo'
// element of current "Employee" tag
var employee_contactno =
arr_employees[i].getElementsByTagName('ContactNo')[0].childNodes[0].nodeValue;
// gets the value of first child-node of 'Email'
// element of current "Employee" tag
var employee_email =
arr_employees[i].getElementsByTagName('Email')[0].childNodes[0].nodeValue;
// adds the values in the html table
html_tab += '<tr>
<td>'+ employee_cat+ '</td>
<td>'+ employee_firstName+ '</td>
<td>'+ employee_lastName+ '</td>
<td>'+ employee_contactno+ '</td>
<td>'+ employee_email+ '</td>
</tr>';
}
html_tab += '</table>';
// adds the html table in a html tag, with id = "ajax_xml"
document.getElementById('ajax_xml').innerHTML = html_tab;
</script>
</body>
</html>-
This code loads node.xml.
-
The XML content is transformed into JavaScript XML DOM object.
-
The array of elements (with tag Element) using the method getElementsByTagName() is obtained.
-
Next, we traverse through this array and display the child node values in a table.
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.
XML DOM - Accessing
在本章中，我们来学习如何访问被认为是 XML 文档的信息单元的 XML DOM 节点。XML DOM 的节点结构允许开发人员在树中导航以查找特定信息，并同时访问该信息。
In this chapter, we will study about how to access the XML DOM nodes which are considered as the informational units of the XML document. The node structure of the XML DOM allows the developer to navigate around the tree looking for specific information and simultaneously access the information.
Accessing Nodes
以下是可以访问节点的三种方式 -
Following are the three ways in which you can access the nodes −
-
By using the getElementsByTagName () method
-
By looping through or traversing through nodes tree
-
By navigating the node tree, using the node relationships
getElementsByTagName ()
此方法允许通过指定节点名称来访问节点的信息。它还允许访问节点列表和节点列表长度的信息。
This method allows accessing the information of a node by specifying the node name. It also allows accessing the information of the Node List and Node List Length.
Syntax
getElementByTagName() 方法具有以下语法 -
The getElementByTagName() method has the following syntax −
node.getElementByTagName("tagname");其中，
Where,
-
node − is the document node.
-
tagname − holds the name of the node whose value you want to get.
Example
下面是一个简单的程序，说明了 getElementByTagName 方法的使用。
Following is a simple program which illustrates the usage of method getElementByTagName.
<!DOCTYPE html>
<html>
<body>
<div>
<b>FirstName:</b> <span id = "FirstName"></span><br>
<b>LastName:</b> <span id = "LastName"></span><br>
<b>Category:</b> <span id = "Employee"></span><br>
</div>
<script>
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","/dom/node.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
document.getElementById("FirstName").innerHTML =
xmlDoc.getElementsByTagName("FirstName")[0].childNodes[0].nodeValue;
document.getElementById("LastName").innerHTML =
xmlDoc.getElementsByTagName("LastName")[0].childNodes[0].nodeValue;
document.getElementById("Employee").innerHTML =
xmlDoc.getElementsByTagName("Employee")[0].attributes[0].nodeValue;
</script>
</body>
</html>-
In the above example, we are accessing the information of the nodes FirstName, LastName and Employee.
-
xmlDoc.getElementsByTagName("FirstName")[0].childNodes[0].nodeValue; This line accesses the value for the child node FirstName using the getElementByTagName() method.
-
xmlDoc.getElementsByTagName("Employee")[0].attributes[0].nodeValue; This line accesses the attribute value of the node Employee getElementByTagName() method.
Traversing Through Nodes
这在带示例的第 DOM Traversing 章中进行了说明。
This is covered in the chapter DOM Traversing with examples.
Navigating Through Nodes
这在带示例的第 DOM Navigation 章中进行了说明。
This is covered in the chapter DOM Navigation with examples.
XML DOM - Get Node
在本章中，我们将研究如何获取 XML DOM 对象的节点值。XML 文档具有一个信息单元层次结构，称为节点。节点对象具有属性 nodeValue，它返回元素的值。
In this chapter, we will study about how to get the node value of a XML DOM object. XML documents have a hierarchy of informational units called nodes. Node object has a property nodeValue, which returns the value of the element.
在以下部分中，我们将讨论：
In the following sections, we will discuss −
-
Getting node value of an element
-
Getting attribute value of a node
所有以下示例中使用的 node.xml 如下：
The node.xml used in all the following examples is as below −
<Company>
<Employee category = "Technical">
<FirstName>Tanmay</FirstName>
<LastName>Patil</LastName>
<ContactNo>1234567890</ContactNo>
<Email>tanmaypatil@xyz.com</Email>
</Employee>
<Employee category = "Non-Technical">
<FirstName>Taniya</FirstName>
<LastName>Mishra</LastName>
<ContactNo>1234667898</ContactNo>
<Email>taniyamishra@xyz.com</Email>
</Employee>
<Employee category = "Management">
<FirstName>Tanisha</FirstName>
<LastName>Sharma</LastName>
<ContactNo>1234562350</ContactNo>
<Email>tanishasharma@xyz.com</Email>
</Employee>
</Company>Get Node Value
getElementsByTagName() 方法按文档顺序返回带给定标签名称的所有元素的 NodeList。
The method getElementsByTagName() returns a NodeList of all the Elements in document order with a given tag name.
Example
以下示例 (getnode_example.htm) 将 XML 文档 ( node.xml ) 解析为 XML DOM 对象，并提取子节点 Firstname（索引为 0） 的节点值：
The following example (getnode_example.htm) parses an XML document (node.xml) into an XML DOM object and extracts the node value of the child node Firstname (index at 0) −
<!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;
x = xmlDoc.getElementsByTagName('FirstName')[0]
y = x.childNodes[0];
document.write(y.nodeValue);
</script>
</body>
</html>Get Attribute Value
属性是 XML 节点元素的一部分。节点元素可以具有多个唯一属性。属性提供有关 XML 节点元素的更多信息。更准确地说，它们定义了节点元素的属性。XML 属性始终是一对名称 - 值。此属性的值称为属性节点。
Attributes are part of the XML node elements. A node element can have multiple unique attributes. Attribute gives more information about XML node elements. To be more precise, they define properties of the node elements. An XML attribute is always a name-value pair. This value of the attribute is called the attribute node.
getAttribute() 方法按元素名称检索属性值。
The getAttribute() method retrieves an attribute value by element name.
Example
以下示例 (get_attribute_example.htm) 将 XML 文档 ( node.xml ) 解析为 XML DOM 对象，并提取类别 Employee（索引为 2） 的属性值：
The following example (get_attribute_example.htm) parses an XML document (node.xml) into an XML DOM object and extracts the attribute value of the category Employee (index at 2) −
<!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;
x = xmlDoc.getElementsByTagName('Employee')[2];
document.write(x.getAttribute('category'));
</script>
</body>
</html>XML DOM - Set Node
在本章中，我们将研究如何更改 XML DOM 对象中节点值。节点值可按如下方式更改 −
In this chapter, we will study about how to change the values of nodes in an XML DOM object. Node value can be changed as follows −
var value = node.nodeValue;如果节点是 Attribute，则 value 变量将为该属性的值；如果节点是 Text 节点，则将为文本内容；如果节点是 Element，则将为 null。
If node is an Attribute then the value variable will be the value of the attribute; if node is a Text node it will be the text content; if node is an Element it will be null.
以下各节将演示每种节点类型（属性、文本节点和元素）的节点值设置。
Following sections will demonstrate the node value setting for each node type (attribute, text node and element).
所有以下示例中使用的 node.xml 如下：
The node.xml used in all the following examples is as below −
<Company>
<Employee category = "Technical">
<FirstName>Tanmay</FirstName>
<LastName>Patil</LastName>
<ContactNo>1234567890</ContactNo>
<Email>tanmaypatil@xyz.com</Email>
</Employee>
<Employee category = "Non-Technical">
<FirstName>Taniya</FirstName>
<LastName>Mishra</LastName>
<ContactNo>1234667898</ContactNo>
<Email>taniyamishra@xyz.com</Email>
</Employee>
<Employee category = "Management">
<FirstName>Tanisha</FirstName>
<LastName>Sharma</LastName>
<ContactNo>1234562350</ContactNo>
<Email>tanishasharma@xyz.com</Email>
</Employee>
</Company>Change Value of Text Node
当我们说更改节点元素的值时，我们的意思是编辑元素（也称为文本节点）的文本内容。以下示例演示如何更改元素的文本节点。
When we, say the change value of Node element we mean to edit the text content of an element (which is also called the text node). Following example demonstrates how to change the text node of an element.
Example
以下示例 (set_text_node_example.htm) 将 XML 文档 ( node.xml ) 解析为 XML DOM 对象，并更改元素文本节点的值。此示例中，将每个 Employee 的 Email 更改为 support@xyz.com 并打印其值。
The following example (set_text_node_example.htm) parses an XML document (node.xml) into an XML DOM object and change the value of an element’s text node. In this case, Email of each Employee to support@xyz.com and print the values.
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else // code for IE5 and IE6 {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
</head>
<body>
<script>
xmlDoc = loadXMLDoc("/dom/node.xml");
x = xmlDoc.getElementsByTagName("Email");
for(i = 0;i<x.length;i++) {
x[i].childNodes[0].nodeValue = "support@xyz.com";
document.write(i+');
document.write(x[i].childNodes[0].nodeValue);
document.write('<br>');
}
</script>
</body>
</html>Execution
将此文件保存在服务器路径中，文件名设为 set_text_node_example.htm（此文件和 node.xml 应位于服务器中的同一个路径）。您将收到以下输出 −
Save this file as set_text_node_example.htm on the server path (this file and node.xml should be on the same path in your server). You will receive the following output −
0) support@xyz.com
1) support@xyz.com
2) support@xyz.comChange Value of Attribute Node
以下示例演示如何更改元素的属性节点。
The following example demonstrates how to change the attribute node of an element.
Example
以下示例(set_attribute_example.htm)将 XML 文档( node.xml )解析成 XML DOM 对象，并更改元素属性节点的值。在本例中，将每个 Employee 的 Category 分别更改为 admin-0、admin-1、admin-2，并打印值。
The following example (set_attribute_example.htm) parses an XML document (node.xml) into an XML DOM object and changes the value of an element’s attribute node. In this case, the Category of each Employee to admin-0, admin-1, admin-2 respectively and print the values.
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else // code for IE5 and IE6 {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
</head>
<body>
<script>
xmlDoc = loadXMLDoc("/dom/node.xml");
x = xmlDoc.getElementsByTagName("Employee");
for(i = 0 ;i<x.length;i++){
newcategory = x[i].getAttributeNode('category');
newcategory.nodeValue = "admin-"+i;
document.write(i+');
document.write(x[i].getAttributeNode('category').nodeValue);
document.write('<br>');
}
</script>
</body>
</html>XML DOM - Create Node
在本章中，我们将讨论如何使用文档对象的一些方法创建新节点。这些方法提供范围来创建新元素节点、文本节点、注释节点、CDATA 分区节点和属性节点。如果新创建的节点已存在于元素对象中，则用新节点替换它。以下各节将使用示例对此进行演示。
In this chapter, we will discuss how to create new nodes using a couple of methods of the document object. These methods provide a scope to create new element node, text node, comment node, CDATA section node and attribute node. If the newly created node already exists in the element object, it is replaced by the new one. Following sections demonstrate this with examples.
Create new Element node
createElement() 方法创建新元素节点。如果新创建的元素节点存在于元素对象中，则用新节点替换它。
The method createElement() creates a new element node. If the newly created element node exists in the element object, it is replaced by the new one.
Syntax
使用 createElement() 方法的语法如下 −
Syntax to use the createElement() method is as follows −
var_name = xmldoc.createElement("tagname");其中，
Where,
-
var_name − is the user-defined variable name which holds the name of new element.
-
("tagname") − is the name of new element node to be created.
Example
以下示例 (createnewelement_example.htm) 将 XML 文档 ( node.xml ) 解析为 XML DOM 对象，并在 XML 文档中创建一个新的元素节点 PhoneNo。
The following example (createnewelement_example.htm) parses an XML document (node.xml) into an XML DOM object and creates a new element node PhoneNo in the XML document.
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else // code for IE5 and IE6 {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
</head>
<body>
<script>
xmlDoc = loadXMLDoc("/dom/node.xml");
new_element = xmlDoc.createElement("PhoneNo");
x = xmlDoc.getElementsByTagName("FirstName")[0];
x.appendChild(new_element);
document.write(x.getElementsByTagName("PhoneNo")[0].nodeName);
</script>
</body>
</html>-
new_element = xmlDoc.createElement("PhoneNo"); creates the new element node <PhoneNo>
-
x.appendChild(new_element); x holds the name of the specified child node <FirstName> to which the new element node is appended.
Create new Text node
方法 createTextNode() 创建一个新的文本节点。
The method createTextNode() creates a new text node.
Syntax
使用 createTextNode() 的语法如下 −
Syntax to use createTextNode() is as follows −
var_name = xmldoc.createTextNode("tagname");其中，
Where,
-
var_name − it is the user-defined variable name which holds the name of new text node.
-
("tagname") − within the parenthesis is the name of new text node to be created.
Example
以下示例 (createtextnode_example.htm) 将 XML 文档 ( node.xml ) 解析为 XML DOM 对象，并在 XML 文档中创建一个新的文本节点 Im new text node。
The following example (createtextnode_example.htm) parses an XML document (node.xml) into an XML DOM object and creates a new text node Im new text node in the XML document.
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else // code for IE5 and IE6 {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
</head>
<body>
<script>
xmlDoc = loadXMLDoc("/dom/node.xml");
create_e = xmlDoc.createElement("PhoneNo");
create_t = xmlDoc.createTextNode("Im new text node");
create_e.appendChild(create_t);
x = xmlDoc.getElementsByTagName("Employee")[0];
x.appendChild(create_e);
document.write(" PhoneNO: ");
document.write(x.getElementsByTagName("PhoneNo")[0].childNodes[0].nodeValue);
</script>
</body>
</html>以上代码的详细信息如下 −
Details of the above code are as below −
-
create_e = xmlDoc.createElement("PhoneNo"); creates a new element <PhoneNo>.
-
create_t = xmlDoc.createTextNode("Im new text node"); creates a new text node "Im new text node".
-
x.appendChild(create_e); the text node, "Im new text node" is appended to the element, <PhoneNo>.
-
document.write(x.getElementsByTagName("PhoneNo")[0].childNodes[0].nodeValue); writes the new text node value to the element <PhoneNo>.
Execution
将该文件作为 createtextnode_example.htm 存储在服务器路径上（此文件和 node.xml 应在服务器中的同一路径上）。在输出中，我们得到属性值，即 PhoneNO: Im new text node。
Save this file as createtextnode_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 attribute value as i.e. PhoneNO: Im new text node.
Create new Comment node
方法 createComment() 创建一个新的注释节点。注释节点包含在程序中，以便轻松理解代码的功能。
The method createComment() creates a new comment node. Comment node is included in the program for the easy understanding of the code functionality.
Syntax
createComment() 的使用语法如下 −
Syntax to use createComment() is as follows −
var_name = xmldoc.createComment("tagname");其中，
Where,
-
var_name − is the user-defined variable name which holds the name of new comment node.
-
("tagname") − is the name of the new comment node to be created.
Example
以下示例 (createcommentnode_example.htm) 将 XML 文档 ( node.xml ) 解析成 XML DOM 对象，并在 XML 文档中创建新的注释节点，即 “Company is the parent node”。
The following example (createcommentnode_example.htm) parses an XML document (node.xml) into an XML DOM object and creates a new comment node, "Company is the parent node" in the XML document.
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
}
else // code for IE5 and IE6 {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
</head>
<body>
<script>
xmlDoc = loadXMLDoc("/dom/node.xml");
create_comment = xmlDoc.createComment("Company is the parent node");
x = xmlDoc.getElementsByTagName("Company")[0];
x.appendChild(create_comment);
document.write(x.lastChild.nodeValue);
</script>
</body>
</html>在以上示例中 −
In the above example −
-
create_comment = xmlDoc.createComment("Company is the parent node") creates a specified comment line.
-
x.appendChild(create_comment) In this line, 'x' holds the name of the element <Company> to which the comment line is appended.
Execution
将此文件保存为 createcommentnode_example.htm，保存到服务器路径（此文件和 node.xml 应在服务器上的同一路径中）。在输出中，我们获取的属性值为 Company is the parent node。
Save this file as createcommentnode_example.htm on the server path (this file and the node.xml should be on the same path in your server). In the output, we get the attribute value as Company is the parent node .
Create New CDATA Section Node
createCDATASection() 方法会创建新的 CDATA 节点。如果新创建的 CDATA 节点存在于元素对象中，它会被新的 CDATA 节点替换。
The method createCDATASection() creates a new CDATA section node. If the newly created CDATA section node exists in the element object, it is replaced by the new one.
Syntax
createCDATASection() 的使用语法如下 −
Syntax to use createCDATASection() is as follows −
var_name = xmldoc.createCDATASection("tagname");其中，
Where,
-
var_name − is the user-defined variable name which holds the name of new the CDATA section node.
-
("tagname") − is the name of new CDATA section node to be created.
Example
以下示例 (createcdatanode_example.htm) 将 XML 文档 ( node.xml ) 解析成 XML DOM 对象，并在 XML 文档中创建新的 CDATA 节点，即 “Create CDATA Example”。
The following example (createcdatanode_example.htm) parses an XML document (node.xml) into an XML DOM object and creates a new CDATA section node, "Create CDATA Example" in the XML document.
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
}
else // code for IE5 and IE6 {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
</head>
<body>
<script>
xmlDoc = loadXMLDoc("/dom/node.xml");
create_CDATA = xmlDoc.createCDATASection("Create CDATA Example");
x = xmlDoc.getElementsByTagName("Employee")[0];
x.appendChild(create_CDATA);
document.write(x.lastChild.nodeValue);
</script>
</body>
</html>在以上示例中 −
In the above example −
-
create_CDATA = xmlDoc.createCDATASection("Create CDATA Example") creates a new CDATA section node, "Create CDATA Example"
-
x.appendChild(create_CDATA) here, x holds the specified element <Employee> indexed at 0 to which the CDATA node value is appended.
Execution
将此文件保存为 createcdatanode_example.htm，保存到服务器路径（此文件和 node.xml 应在服务器上的同一路径中）。在输出中，我们获取的属性值为 Create CDATA Example。
Save this file as createcdatanode_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 attribute value as Create CDATA Example.
Create new Attribute node
要创建新的属性节点，请使用 setAttributeNode() 方法。如果新创建的属性节点存在于元素对象中，它会被新的属性节点替换。
To create a new attribute node, the method setAttributeNode() is used. If the newly created attribute node exists in the element object, it is replaced by the new one.
Syntax
使用 createElement() 方法的语法如下 −
Syntax to use the createElement() method is as follows −
var_name = xmldoc.createAttribute("tagname");其中，
Where,
-
var_name − is the user-defined variable name which holds the name of new attribute node.
-
("tagname") − is the name of new attribute node to be created.
Example
以下示例 (createattributenode_example.htm) 将 XML 文档 ( node.xml ) 解析成 XML DOM 对象，并在 XML 文档中创建新的属性节点。
The following example (createattributenode_example.htm) parses an XML document (node.xml) into an XML DOM object and creates a new attribute node section in the XML document.
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else // code for IE5 and IE6 {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
</head>
<body>
<script>
xmlDoc = loadXMLDoc("/dom/node.xml");
create_a = xmlDoc.createAttribute("section");
create_a.nodeValue = "A";
x = xmlDoc.getElementsByTagName("Employee");
x[0].setAttributeNode(create_a);
document.write("New Attribute: ");
document.write(x[0].getAttribute("section"));
</script>
</body>
</html>在以上示例中 −
In the above example −
-
create_a=xmlDoc.createAttribute("Category") creates an attribute with the name <section>.
-
create_a.nodeValue="Management" creates the value "A" for the attribute <section>.
-
x[0].setAttributeNode(create_a) this attribute value is set to the node element <Employee> indexed at 0.
XML DOM - Add Node
在本章中，我们将讨论现有元素的节点。它提供了一种方式来 −
In this chapter, we will discuss the nodes to the existing element. It provides a means to −
-
append new child nodes before or after the existing child nodes
-
insert data within the text node
-
add attribute node
可以使用以下方法将节点添加到 DOM 中的元素 −
Following methods can be used to add/append the nodes to an element in a DOM −
-
appendChild()
-
insertBefore()
-
insertData()
appendChild()
方法 appendChild() 在现有子节点之后添加新的子节点。
The method appendChild() adds the new child node after the existing child node.
Syntax
appendChild() 方法的语法如下 −
Syntax of appendChild() method is as follows −
Node appendChild(Node newChild) throws DOMException其中，
Where,
-
newChild − Is the node to add
-
This method returns the Node added.
Example
以下示例 (appendchildnode_example.htm) 将 XML 文档 ( node.xml ) 解析成 XML DOM 对象，并将新的子节点 PhoneNo 附加到元素 <FirstName>。
The following example (appendchildnode_example.htm) parses an XML document (node.xml) into an XML DOM object and appends new child PhoneNo to the element <FirstName>.
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else // code for IE5 and IE6 {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
</head>
<body>
<script>
xmlDoc = loadXMLDoc("/dom/node.xml");
create_e = xmlDoc.createElement("PhoneNo");
x = xmlDoc.getElementsByTagName("FirstName")[0];
x.appendChild(create_e);
document.write(x.getElementsByTagName("PhoneNo")[0].nodeName);
</script>
</body>
</html>在以上示例中 −
In the above example −
-
using the method createElement(), a new element PhoneNo is created.
-
The new element PhoneNo is added to the element FirstName using the method appendChild().
insertBefore()
insertBefore() 方法在指定的子节点前插入新的子节点。
The method insertBefore(), inserts the new child nodes before the specified child nodes.
Syntax
insertBefore() 方法的语法如下 −
Syntax of insertBefore() method is as follows −
Node insertBefore(Node newChild, Node refChild) throws DOMException其中，
Where,
-
newChild − Is the node to insert
-
refChild − Is the reference node, i.e., the node before which the new node must be inserted.
-
This method returns the Node being inserted.
Example
以下示例 (insertnodebefore_example.htm) 将 XML 文档 ( node.xml ) 解析成 XML DOM 对象，并在指定的元素 <Email> 前插入新的子节点 Email。
The following example (insertnodebefore_example.htm) parses an XML document (node.xml) into an XML DOM object and inserts new child Email before the specified element <Email>.
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else // code for IE5 and IE6 {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
</head>
<body>
<script>
xmlDoc = loadXMLDoc("/dom/node.xml");
create_e = xmlDoc.createElement("Email");
x = xmlDoc.documentElement;
y = xmlDoc.getElementsByTagName("Email");
document.write("No of Email elements before inserting was: " + y.length);
document.write("<br>");
x.insertBefore(create_e,y[3]);
y=xmlDoc.getElementsByTagName("Email");
document.write("No of Email elements after inserting is: " + y.length);
</script>
</body>
</html>在以上示例中 −
In the above example −
-
using the method createElement(), a new element Email is created.
-
The new element Email is added before the element Email using the method insertBefore().
-
y.length gives the total number of elements added before and after the new element.
Execution
将此文件另存为 insertnodebefore_example.htm 并放在服务器路径上（此文件和 node.xml 应在服务器上处于相同的路径）。我们将收到以下输出 −
Save this file as insertnodebefore_example.htm on the server path (this file and node.xml should be on the same path in your server). We will receive the following output −
No of Email elements before inserting was: 3
No of Email elements after inserting is: 4insertData()
insertData() 方法在指定的 16 位单位偏移量处插入字符串。
The method insertData(), inserts a string at the specified 16-bit unit offset.
Syntax
insertData() 具有以下语法：
The insertData() has the following syntax −
void insertData(int offset, java.lang.String arg) throws DOMException其中，
Where,
-
offset − is the character offset at which to insert.
-
arg − is the key word to insert the data. It encloses the two parameters offset and string within the parenthesis separated by comma.
Example
以下示例 (addtext_example.htm) 将 XML 文档 (“ node.xml ”) 解析为 XML DOM 对象，并将新数据 MiddleName 插入到指定位置以获取元素 <FirstName>。
The following example (addtext_example.htm) parses an XML document ("node.xml") into an XML DOM object and inserts new data MiddleName at the specified position to the element <FirstName>.
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else // code for IE5 and IE6 {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
</head>
<body>
<script>
xmlDoc = loadXMLDoc("/dom/node.xml");
x = xmlDoc.getElementsByTagName("FirstName")[0].childNodes[0];
document.write(x.nodeValue);
x.insertData(6,"MiddleName");
document.write("<br>");
document.write(x.nodeValue);
</script>
</body>
</html>-
x.insertData(6,"MiddleName"); − Here, x holds the name of the specified child name, i.e, <FirstName>. We then insert to this text node the data "MiddleName" starting from position 6.
XML DOM - Replace Node
在本章中，我们将学习 XML DOM 对象中的替换节点操作。众所周知，DOM 中的所有内容都保留在称为节点的层次信息单元中，替换节点提供了另一个方法来更新这些指定节点或文本节点。
In this chapter, we will study about the replace node operation in an XML DOM object. As we know everything in the DOM is maintained in a hierarchical informational unit known as node and the replacing node provides another way to update these specified nodes or a text node.
以下是替换节点的两种方法。
Following are the two methods to replace the nodes.
-
replaceChild()
-
replaceData()
replaceChild()
方法 replaceChild() 用新节点替换指定节点。
The method replaceChild() replaces the specified node with the new node.
Syntax
insertData() 具有以下语法：
The insertData() has the following syntax −
Node replaceChild(Node newChild, Node oldChild) throws DOMException其中，
Where,
-
newChild − is the new node to put in the child list.
-
oldChild − is the node being replaced in the list.
-
This method returns the node replaced.
Example
以下示例 (replacenode_example.htm) 将 XML 文档 ( node.xml ) 解析为 XML DOM 对象，并用新节点 <Name> 替换指定节点 <FirstName>。
The following example (replacenode_example.htm) parses an XML document (node.xml) into an XML DOM object and replaces the specified node <FirstName> with the new node <Name>.
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else // code for IE5 and IE6 {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
</head>
<body>
<script>
xmlDoc = loadXMLDoc("/dom/node.xml");
x = xmlDoc.documentElement;
z = xmlDoc.getElementsByTagName("FirstName");
document.write("<b>Content of FirstName element before replace operation</b><br>");
for (i=0;i<z.length;i++) {
document.write(z[i].childNodes[0].nodeValue);
document.write("<br>");
}
//create a Employee element, FirstName element and a text node
newNode = xmlDoc.createElement("Employee");
newTitle = xmlDoc.createElement("Name");
newText = xmlDoc.createTextNode("MS Dhoni");
//add the text node to the title node,
newTitle.appendChild(newText);
//add the title node to the book node
newNode.appendChild(newTitle);
y = xmlDoc.getElementsByTagName("Employee")[0]
//replace the first book node with the new node
x.replaceChild(newNode,y);
z = xmlDoc.getElementsByTagName("FirstName");
document.write("<b>Content of FirstName element after replace operation</b><br>");
for (i = 0;i<z.length;i++) {
document.write(z[i].childNodes[0].nodeValue);
document.write("<br>");
}
</script>
</body>
</html>Execution
将此文件作为 replacenode_example.htm 保存到服务器路径中（此文件和 node.xml 应该在服务器中的同一路径中）。然后，我们将得到如下所示的输出：
Save this file as replacenode_example.htm on the server path (this file and node.xml should be on the same path in your server). We will get the output as shown below −
Content of FirstName element before replace operation
Tanmay
Taniya
Tanisha
Content of FirstName element after replace operation
Taniya
TanishareplaceData()
方法 replaceData() 用指定字符串替换从指定的 16 位单元偏移开始的字符。
The method replaceData() replaces the characters starting at the specified 16-bit unit offset with the specified string.
Syntax
replaceData() 的语法如下所示：
The replaceData() has the following syntax −
void replaceData(int offset, int count, java.lang.String arg) throws DOMException其中
Where
-
offset − is the offset from which to start replacing.
-
count − is the number of 16-bit units to replace. If the sum of offset and count exceeds length, then all the 16-bit units to the end of the data are replaced.
-
arg − the DOMString with which the range must be replaced.
Example
以下示例 (replacedata_example.htm) 将 XML 文档 ( node.xml ) 解析成 XML DOM 对象并替换它。
The following example (replacedata_example.htm) parses an XML document (node.xml) into an XML DOM object and replaces it.
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else // code for IE5 and IE6 {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
</head>
<body>
<script>
xmlDoc = loadXMLDoc("/dom/node.xml");
x = xmlDoc.getElementsByTagName("ContactNo")[0].childNodes[0];
document.write("<b>ContactNo before replace operation:</b> "+x.nodeValue);
x.replaceData(1,5,"9999999");
document.write("<br>");
document.write("<b>ContactNo after replace operation:</b> "+x.nodeValue);
</script>
</body>
</html>在以上示例中 −
In the above example −
-
x.replaceData(2,3,"999"); − Here x holds the text of the specified element <ContactNo> whose text is replaced by the new text "9999999", starting from the position 1 till the length of 5.
Execution
将该文件另存为 replacedata_example.htm，保存到服务器路径中（该文件和 node.xml 应在服务器中位于同一路径下）。我们将得到如以下所示的输出：
Save this file as replacedata_example.htm on the server path (this file and node.xml should be on the same path in your server). We will get the output as shown below −
ContactNo before replace operation: 1234567890
ContactNo after replace operation: 199999997890XML DOM - Remove Node
在本章中，我们将学习 XML DOM 删除节点操作。删除节点操作会从文档中删除指定的节点。可以实现此操作删除节点，如文本节点、元素节点或属性节点。
In this chapter, we will study about the XML DOM Remove Node operation. The remove node operation removes the specified node from the document. This operation can be implemented to remove the nodes like text node, element node or an attribute node.
以下是用于执行删除节点操作的方法 -
Following are the methods that are used for remove node operation −
-
removeChild()
-
removeAttribute()
removeChild()
该方法 removeChild() 从子项列表中删除由 oldChild 指示的子项，并返回它。删除子项等效于删除文本节点。因此，删除子项会删除与其关联的文本节点。
The method removeChild() removes the child node indicated by oldChild from the list of children, and returns it. Removing a child node is equivalent to removing a text node. Hence, removing a child node removes the text node associated with it.
Syntax
使用 removeChild() 的语法如下 -
The syntax to use removeChild() is as follows −
Node removeChild(Node oldChild) throws DOMException其中，
Where,
-
oldChild − is the node being removed.
-
This method returns the node removed.
Example - Remove Current Node
下列示例 (removecurrentnode_example.htm) 将 XML 文档 ( node.xml ) 解析到 XML DOM 对象，并从父节点中删除指定的节点 <ContactNo>。
The following example (removecurrentnode_example.htm) parses an XML document (node.xml) into an XML DOM object and removes the specified node <ContactNo> from the parent node.
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else // code for IE5 and IE6 {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
</head>
<body>
<script>
xmlDoc = loadXMLDoc("/dom/node.xml");
document.write("<b>Before remove operation, total ContactNo elements: </b>");
document.write(xmlDoc.getElementsByTagName("ContactNo").length);
document.write("<br>");
x = xmlDoc.getElementsByTagName("ContactNo")[0];
x.parentNode.removeChild(x);
document.write("<b>After remove operation, total ContactNo elements: </b>");
document.write(xmlDoc.getElementsByTagName("ContactNo").length);
</script>
</body>
</html>在以上示例中 −
In the above example −
-
x = xmlDoc.getElementsByTagName("ContactNo")[0] gets the element <ContactNo> indexed at 0.
-
x.parentNode.removeChild(x); removes the element <ContactNo> indexed at 0 from the parent node.
Execution
在服务器路径上将此文件保存为 removecurrentnode_example.htm（此文件和 node.xml 应在服务器中的同一路径）。我们得到以下结果 -
Save this file as removecurrentnode_example.htm on the server path (this file and node.xml should be on the same path in your server). We get the following result −
Before remove operation, total ContactNo elements: 3
After remove operation, total ContactNo elements: 2Example - Remove Text Node
以下示例 (removetextNode_example.htm) 将 XML 文档 ( node.xml ) 解析成一个 XML DOM 对象并将指定的子节点 <FirstName> 移除。
The following example (removetextNode_example.htm) parses an XML document (node.xml) into an XML DOM object and removes the specified child node <FirstName>.
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else // code for IE5 and IE6 {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
</head>
<body>
<script>
xmlDoc = loadXMLDoc("/dom/node.xml");
x = xmlDoc.getElementsByTagName("FirstName")[0];
document.write("<b>Text node of child node before removal is:</b> ");
document.write(x.childNodes.length);
document.write("<br>");
y = x.childNodes[0];
x.removeChild(y);
document.write("<b>Text node of child node after removal is:</b> ");
document.write(x.childNodes.length);
</script>
</body>
</html>在以上示例中 −
In the above example −
-
x = xmlDoc.getElementsByTagName("FirstName")[0]; − gets the first element <FirstName> to the x indexed at 0.
-
y = x.childNodes[0]; − in this line y holds the child node to be remove.
-
x.removeChild(y); − removes the specified child node.
Execution
在服务器的路径中将此文件另存为 removetextNode_example.htm（此文件和 node.xml 应该在服务器的同一路径中）。我们获得以下结果 -
Save this file as removetextNode_example.htm on the server path (this file and node.xml should be on the same path in your server). We get the following result −
Text node of child node before removal is: 1
Text node of child node after removal is: 0removeAttribute()
removeAttribute() 方法通过名称移除元素的一个属性。
The method removeAttribute() removes an attribute of an element by name.
Syntax
removeAttribute() 的语法用法如下 -
Syntax to use removeAttribute() is as follows −
void removeAttribute(java.lang.String name) throws DOMException其中，
Where,
-
name − is the name of the attribute to remove.
Example
以下示例 (removeelementattribute_example.htm) 将 XML 文档 ( node.xml ) 解析到 XML DOM 对象中并移除指定的属性节点。
The following example (removeelementattribute_example.htm) parses an XML document (node.xml) into an XML DOM object and removes the specified attribute node.
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else // code for IE5 and IE6 {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
</head>
<body>
<script>
xmlDoc = loadXMLDoc("/dom/node.xml");
x = xmlDoc.getElementsByTagName('Employee');
document.write(x[1].getAttribute('category'));
document.write("<br>");
x[1].removeAttribute('category');
document.write(x[1].getAttribute('category'));
</script>
</body>
</html>在以上示例中 −
In the above example −
-
document.write(x[1].getAttribute('category')); − value of attribute category indexed at 1st position is invoked.
-
x[1].removeAttribute('category'); − removes the attribute value.
XML DOM - Clone Node
在本章中，我们将讨论 XML DOM 对象上的克隆节点操作。克隆节点操作用于创建指定节点的副本。使用 cloneNode() 进行此操作。
In this chapter, we will discucss the Clone Node operation on XML DOM object. Clone node operation is used to create a duplicate copy of the specified node. cloneNode() is used for this operation.
cloneNode()
此方法返回此节点的副本，即用作节点的通用副本构造函数。副本节点没有父节点（parentNode 为 null）也没有用户数据。
This method returns a duplicate of this node, i.e., serves as a generic copy constructor for nodes. The duplicate node has no parent ( parentNode is null) and no user data.
Syntax
cloneNode() 方法具有以下语法 −
The cloneNode() method has the following syntax −
Node cloneNode(boolean deep)-
deep − If true, recursively clones the subtree under the specified node; if false, clone only the node itself (and its attributes, if it is an Element).
-
This method returns the duplicate node.
Example
以下示例（clonenode_example.htm）将 XML 文档 ( node.xml ) 解析成一个 XML DOM 对象，并创建第一个 Employee 元素的深度副本。
The following example (clonenode_example.htm) parses an XML document (node.xml) into an XML DOM object and creates a deep copy of the first Employee element.
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else // code for IE5 and IE6 {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
</head>
<body>
<script>
xmlDoc = loadXMLDoc("/dom/node.xml");
x = xmlDoc.getElementsByTagName('Employee')[0];
clone_node = x.cloneNode(true);
xmlDoc.documentElement.appendChild(clone_node);
firstname = xmlDoc.getElementsByTagName("FirstName");
lastname = xmlDoc.getElementsByTagName("LastName");
contact = xmlDoc.getElementsByTagName("ContactNo");
email = xmlDoc.getElementsByTagName("Email");
for (i = 0;i < firstname.length;i++) {
document.write(firstname[i].childNodes[0].nodeValue+'
'+lastname[i].childNodes[0].nodeValue+',
'+contact[i].childNodes[0].nodeValue+', '+email[i].childNodes[0].nodeValue);
document.write("<br>");
}
</script>
</body>
</html>如您在上述示例中所见，我们已将 cloneNode() 参数设置为 true。因此，Employee 元素下的每个子元素都会被复制或克隆。
As you can see in the above example, we have set the cloneNode() param to true. Hence each of the child element under the Employee element is copied or cloned.
Execution
将此文件保存在服务器路径上并命名为 clonenode_example.htm（该文件和 node.xml 应在您服务器中的同一路径下）。我们将会得到如下所示的输出 −
Save this file as clonenode_example.htm on the server path (this file and node.xml should be on the same path in your server). We will get the output as shown below −
Tanmay Patil, 1234567890, tanmaypatil@xyz.com
Taniya Mishra, 1234667898, taniyamishra@xyz.com
Tanisha Sharma, 1234562350, tanishasharma@xyz.com
Tanmay Patil, 1234567890, tanmaypatil@xyz.com您会注意到，第一个 Employee 元素被完整克隆了。
You will notice that the first Employee element is cloned completely.
DOM - Node Object
Node 接口是整个 Document Object Model 的主要数据类型。Node 用于表示整个文档树中的单个 XML 元素。
Node interface is the primary datatype for the entire Document Object Model. The node is used to represent a single XML element in the entire document tree.
一个节点可以是任何类型，即属性节点、文本节点或任何其他节点。属性 nodeName、nodeValue 和 attributes 都包含在机制中，用于获取节点信息，而无需转换为指定派生接口。
A node can be any type that is an attribute node, a text node or any other node. The attributes nodeName, nodeValue and attributes are included as a mechanism to get at node information without casting down to the specific derived interface.
Attributes
下表列出了 Node 对象的属性 −
The following table lists the attributes of the Node object −
Attribute |
Type |
Description |
attributes |
NamedNodeMap |
This is of type NamedNodeMap containing the attributes of this node (if it is an Element) or null otherwise. This has been removed. Refer specs |
DOMString |
It is used to specify absolute base URI of the node. |
|
NodeList |
It is a NodeList that contains all children of this node. If there are no children, this is a NodeList containing no nodes. |
|
Node |
It specifies the first child of a node. |
|
Node |
It specifies the last child of a node. |
|
DOMString |
It is used to specify the name of the local part of a node. This has been removed. Refer specs. |
|
namespaceURI |
DOMString |
It specifies the namespace URI of a node. This has been removed. Refer specs |
Node |
It returns the node immediately following this node. If there is no such node, this returns null. |
|
DOMString |
The name of this node, depending on its type. |
|
unsigned short |
It is a code representing the type of the underlying object. |
|
DOMString |
It is used to specify the value of a node depending on their types. |
|
Document |
It specifies the Document object associated with the node. |
|
Node |
This property specifies the parent node of a node. |
|
prefix |
DOMString |
This property returns the namespace prefix of a node. This has been removed. Refer specs |
Node |
This specifies the node immediately preceding the current node. |
|
DOMString |
This specifies the textual content of a node. |
Node Types
我们已将节点类型列出如下 −
We have listed the node types as below −
-
ELEMENT_NODE
-
ATTRIBUTE_NODE
-
ENTITY_NODE
-
ENTITY_REFERENCE_NODE
-
DOCUMENT_FRAGMENT_NODE
-
TEXT_NODE
-
CDATA_SECTION_NODE
-
COMMENT_NODE
-
PROCESSING_INSTRUCTION_NODE
-
DOCUMENT_NODE
-
DOCUMENT_TYPE_NODE
-
NOTATION_NODE
Methods
以下表格列出了不同的节点对象方法 −
Below table lists the different Node Object methods −
S.No. |
Method & Description |
1 |
appendChild(Node newChild)This method adds a node after the last child node of the specified element node. It returns the added node. |
2 |
cloneNode(boolean deep)This method is used to create a duplicate node, when overridden in a derived class. It returns the duplicated node. |
3 |
compareDocumentPosition(Node other)This method is used to compare the position of the current node against a specified node according to the document order. Returns unsigned short, how the node is positioned relatively to the reference node. |
4 |
getFeature(DOMString feature, DOMString version) Returns the DOM Object which implements the specialized APIs of the specified feature and version, if any, or null if there is no object. This has been removed. Refer specs. |
5 |
getUserData(DOMString key) Retrieves the object associated to a key on this node. The object must first have been set to this node by calling the setUserData with the same key. Returns the DOMUserData associated to the given key on this node, or null if there was none. This has been removed. Refer specs. |
6 |
hasAttributes() Returns whether this node (if it is an element) has any attributes or not. Returns true if any attribute is present in the specified node else returns false. This has been removed. Refer specs. |
7 |
hasChildNodes()Returns whether this node has any children. This method returns true if the current node has child nodes otherwise false. |
8 |
insertBefore(Node newChild, Node refChild)This method is used to insert a new node as a child of this node, directly before an existing child of this node. It returns the node being inserted. |
9 |
isDefaultNamespace(DOMString namespaceURI)This method accepts a namespace URI as an argument and returns a Boolean with a value of true if the namespace is the default namespace on the given node or false if not. |
10 |
isEqualNode(Node arg)This method tests whether two nodes are equal. Returns true if the nodes are equal, false otherwise. |
11 |
isSameNode(Node other) This method returns whether current node is the same node as the given one. Returns true if the nodes are the same, false otherwise. This has been removed. Refer specs. |
12 |
isSupported(DOMString feature, DOMString version) This method returns whether the specified DOM module is supported by the current node. Returns true if the specified feature is supported on this node, false otherwise. This has been removed. Refer specs. |
13 |
lookupNamespaceURI(DOMString prefix)This method gets the URI of the namespace associated with the namespace prefix. |
14 |
lookupPrefix(DOMString namespaceURI)This method returns the closest prefix defined in the current namespace for the namespace URI. Returns an associated namespace prefix if found or null if none is found. |
15 |
normalize()Normalization adds all the text nodes including attribute nodes which define a normal form where structure of the nodes which contain elements, comments, processing instructions, CDATA sections, and entity references separates the text nodes, i.e, neither adjacent Text nodes nor empty Text nodes. |
16 |
removeChild(Node oldChild)This method is used to remove a specified child node from the current node. This returns the node removed. |
17 |
replaceChild(Node newChild, Node oldChild)This method is used to replace the old child node with a new node. This returns the node replaced. |
18 |
setUserData(DOMString key, DOMUserData data, UserDataHandler handler) This method associates an object to a key on this node. The object can later be retrieved from this node by calling getUserData with the same key. This returns the DOMUserData previously associated to the given key on this node. This has been removed. Refer specs. |
DOM - NodeList Object
NodeList 对象指定已排序节点集合的抽象。NodeList 中的项目可以通过从 0 开始的整数索引访问。
The NodeList object specifies the abstraction of an ordered collection of nodes. The items in the NodeList are accessible via an integral index, starting from 0.
Attributes
下表列出了 NodeList 对象的属性 −
The following table lists the attributes of the NodeList object −
Attribute |
Type |
Description |
unsigned long |
It gives the number of nodes in the node list. |
Methods
以下为 NodeList 对象的唯一方法。
The following is the only method of the NodeList object.
S.No. |
Method & Description |
1 |
item()It returns the indexth item in the collection. If index is greater than or equal to the number of nodes in the list, this returns null. |
DOM - NamedNodeMap Object
NamedNodeMap 对象用于表示可通过名称访问的节点集合。
The NamedNodeMap object is used to represent collections of nodes that can be accessed by name.
Attributes
下表列出了 NamedNodeMap 对象的属性。
The following table lists the Property of the NamedNodeMap Object.
Attribute |
Type |
Description |
unsigned long |
It gives the number of nodes in this map. The range of valid child node indices is 0 to length-1 inclusive. |
Methods
下表列出了 NamedNodeMap 对象的方法。
The following table lists the methods of the NamedNodeMap object.
S.No. |
Methods & Description |
1 |
getNamedItem ()Retrieves the node specified by name. |
2 |
getNamedItemNS ()Retrieves a node specified by local name and namespace URI. |
3 |
item ()Returns the indexth item in the map. If index is greater than or equal to the number of nodes in this map, this returns null. |
4 |
removeNamedItem ()Removes a node specified by name. |
5 |
removeNamedItemNS ()Removes a node specified by local name and namespace URI. |
6 |
setNamedItem ()Adds a node using its nodeName attribute. If a node with that name is already present in this map, it is replaced by the new one. |
7 |
setNamedItemNS ()Adds a node using its namespaceURI and localName. If a node with that namespace URI and that local name is already present in this map, it is replaced by the new one. Replacing a node by itself has no effect. |
DOM - DOMImplementation Object
DOMImplementation 对象提供许多方法来执行与任何特定文档对象模型实例无关的操作。
The DOMImplementation object provides a number of methods for performing operations that are independent of any particular instance of the document object model.
Methods
下表列出了 DOMImplementation 对象的方法：
Following table lists the methods of the DOMImplementation object −
S.No. |
Method & Description |
1 |
createDocument(namespaceURI, qualifiedName, doctype)It creates a DOM Document object of the specified type with its document element. |
2 |
createDocumentType(qualifiedName, publicId, systemId)It creates an empty DocumentType node. |
3 |
getFeature(feature, version) This method returns a specialized object which implements the specialized APIs of the specified feature and version. This has been removed. Refer specs. |
4 |
hasFeature(feature, version)This method tests if the DOM implementation implements a specific feature and version. |
DOM - DocumentType Object
DocumentType 对象是访问文档数据的关键，在文档中，doctype 属性可以具有空值或 DocumentType 对象值。这些 DocumentType 对象充当 XML 文档描述的实体的接口。
The DocumentType objects are the key to access the document’s data and in the document, the doctype attribute can have either the null value or the DocumentType Object value. These DocumentType objects act as an interface to the entities described for an XML document.
Attributes
下表列出了 DocumentType 对象的属性 -
The following table lists the attributes of the DocumentType object −
Attribute |
Type |
Description |
DOMString |
It returns the name of the DTD which is written immediately next to the keyword !DOCTYPE. |
|
NamedNodeMap |
It returns a NamedNodeMap object containing the general entities, both external and internal, declared in the DTD. |
|
NamedNodeMap |
It returns a NamedNodeMap containing the notations declared in the DTD. |
|
internalSubset |
DOMString |
It returns an internal subset as a string, or null if there is none. This has been removed. Refer specs. |
DOMString |
It returns the public identifier of the external subset. |
|
DOMString |
It returns the system identifier of the external subset. This may be an absolute URI or not. |
DOM - ProcessingInstruction Object
ProcessingInstruction 提供应用程序特定的信息，通常包含在 XML 文档的前言部分。
ProcessingInstruction gives that application-specific information which is generally included in the prolog section of the XML document.
处理指令 (PI) 可用于向应用程序传递信息。PI 可以出现在标记之外的文档中的任何位置。它们可以出现在前言中，包括文档类型定义 (DTD)、文本内容中或文档之后。
Processing instructions (PIs) can be used to pass information to applications. PIs can appear anywhere in the document outside the markup. They can appear in the prolog, including the document type definition (DTD), in textual content, or after the document.
PI 以特殊标记 <? 开头，以 ?> 结尾。在遇到字符串 ?> 后，内容的处理将立即结束。
A PI starts with a special tag <? and ends with ?>. Processing of the contents ends immediately after the string ?> is encountered.
Attributes
下表列出了 ProcessingInstruction 对象的属性 −
The following table lists the attributes of the ProcessingInstruction object −
Attribute |
Type |
Description |
DOMString |
It is a character that describes the information for the application to process immediately preceding the ?>. |
|
DOMString |
This identifies the application to which the instruction or the data is directed. |
DOM - Entity Object
Entity 接口表示已解析或未解析的已知实体。从 Node 继承的 nodeName 属性包含实体名称。
Entity interface represents a known entity, either parsed or unparsed, in an XML document. The nodeName attribute that is inherited from Node contains the name of the entity.
Entity 对象没有任何父节点，并且它所有的后续节点都是只读的。
An Entity object does not have any parent node, and all its successor nodes are read-only.
Attributes
下表列出 Entity 对象的属性：
The following table lists the attributes of the Entity object −
Attribute |
Type |
Description |
DOMString |
This specifies the encoding used by the external parsed entity. Its value is null if it is an entity from the internal subset or if it is not known. |
|
DOMString |
For an unparsed entities, it gives the name of the notation and its value is null for the parsed entities. |
|
DOMString |
It gives the name of the public identifier associated with the entity. |
|
DOMString |
It gives the name of the system identifier associated with the entity. |
|
DOMString |
It gives the xml encoding included as a part of the text declaration for the external parsed entity, null otherwise. |
|
DOMString |
It gives the xml version included as a part of the text declaration for the external parsed entity, null otherwise. |
DOM - Entity Reference Object
实体引用对象是插入到 XML 文档中的常规实体引用，它提供了更换文本的范围。EntityReference 对象不适用于预定义的实体，因为 HTML 或 XML 处理器会将它们视为已扩展的实体。
The EntityReference objects are the general entity references which are inserted into the XML document providing scope to replace the text. The EntityReference Object does not work for the pre-defined entities since they are considered to be expanded by the HTML or the XML processor.
此接口没有自己的属性或方法，但继承自 Node。
This interface does not have properties or methods of its own but inherits from Node.
DOM - Notation Object
在本章中，我们将学习 XML DOM Notation 对象。notation 对象属性提供了识别元素格式的范围，这些元素带有一个 notation 属性、一个特定处理指令或非 XML 数据。可以在 Notation 对象上执行 Node 对象属性和方法，因为它也被视为 Node。
In this chapter, we will study about the XML DOM Notation object. The notation object property provides a scope to recognize the format of elements with a notation attribute, a particular processing instruction or a non-XML data. The Node Object properties and methods can be performed on the Notation Object since that is also considered as a Node.
此对象从 Node 继承方法和属性。其 nodeName 是 notation 名称。无父级。
This object inherits methods and properties from Node. Its nodeName is the notation name. Has no parent.
DOM - Element Object
XML 元素可以定义为 XML 的构建模块。元素可以充当容器，以容纳文本、元素、属性、媒体对象或所有这些。每当解析器根据良好性分析 XML 文档时，解析器会导航一个元素节点。元素节点包含其内部的文本，称为文本节点。
The XML elements can be defined as building blocks of XML. Elements can behave as containers to hold text, elements, attributes, media objects or all of these. Whenever parser parses an XML document against the well-formedness, parser navigates through an element node. An element node contains the text within it which is called as the text node.
Element 对象继承 Node 对象的属性和方法，因为 element 对象也被视为 Node。除了节点对象属性和方法之外，它还具有以下属性和方法。
Element object inherits the properties and the methods of the Node object as element object is also considered as a Node. Other than the node object properties and methods it has the following properties and methods.
Properties
下表列出 Element 对象的属性 −
The following table lists the attributes of the Element object −
Attribute |
Type |
Description |
DOMString |
It gives the name of the tag for the specified element. |
|
schemaTypeInfo |
TypeInfo |
It represents the type information associated with this element. This has been removed. Refer specs. |
Methods
下表列出 Element 对象方法 −
Below table lists the Element Object methods −
Methods |
Type |
Description |
DOMString |
Retrieves the value of the attribute if exists for the specified element. |
|
DOMString |
Retrieves an attribute value by local name and namespace URI. |
|
Attr |
Retrieves the name of the attribute node from the current element. |
|
Attr |
Retrieves an Attr node by local name and namespace URI. |
|
NodeList |
Returns a NodeList of all descendant Elements with a given tag name, in document order. |
|
NodeList |
Returns a NodeList of all the descendant Elements with a given local name and namespace URI in document order. |
|
boolean |
Returns true when an attribute with a given name is specified on this element or has a default value, false otherwise. |
|
boolean |
Returns true when an attribute with a given local name and namespace URI is specified on this element or has a default value, false otherwise. |
|
No Return Value |
Removes an attribute by name. |
|
No Return Value |
Removes an attribute by local name and namespace URI. |
|
Attr |
Specified attribute node is removed from the element. |
|
No Return Value |
Sets a new attribute value to the existing element. |
|
No Return Value |
Adds a new attribute. If an attribute with the same local name and namespace URI is already present on the element, its prefix is changed to be the prefix part of the qualifiedName, and its value is changed to be the value parameter. |
|
Attr |
Sets a new attribute node to the existing element. |
|
Attr |
Adds a new attribute. If an attribute with that local name and that namespace URI is already present in the element, it is replaced by the new one. |
|
setIdAttribute |
No Return Value |
If the parameter isId is true, this method declares the specified attribute to be a user-determined ID attribute. This has been removed. Refer specs. |
setIdAttributeNS |
No Return Value |
If the parameter isId is true, this method declares the specified attribute to be a user-determined ID attribute. This has been removed. Refer specs. |
DOM - Attribute Object
Attr 接口表示 Element 对象中的一个属性。通常，属性允许的值在与文档关联的模式中定义。Attr 对象不被视为文档树的一部分，因为它们实际上并非其所描述元素的子节点。因此，对于子节点 parentNode、previousSibling 和 nextSibling，属性值为 null。
Attr interface represents an attribute in an Element object. Typically, the allowable values for the attribute are defined in a schema associated with the document. Attr objects are not considered as part of the document tree since they are not actually child nodes of the element they describe. Thus for the child nodes parentNode, previousSibling and nextSibling the attribute value is null.
Attributes
下表列出了 Attribute 对象的属性：
The following table lists the attributes of the Attribute object −
Attribute |
Type |
Description |
DOMString |
This gives the name of the attribute. |
|
boolean |
It is a boolean value which returns true if the attribute value exists in the document. |
|
DOMString |
Returns the value of the attribute. |
|
Element |
It gives the node to which attribute is associated or null if attribute is not in use. |
|
boolean |
It returns whether the attribute is known to be of type ID (i.e. to contain an identifier for its owner element) or not. |
DOM - CDATASection Object
在本章中，我们将学习 XML DOM CDATASection 对象。XML 文档中的文本是已解析或未解析的，具体取决于声明方式。如果文本被声明为已解析的字符数据 (PCDATA)，则它将由解析器解析，以将 XML 文档转换为 XML DOM 对象。另一方面，如果文本被声明为未解析字符数据 (CDATA)，则 XML 解析器不会解析其中的文本。这些不被视为标记，也绝不会展开实体。
In this chapter, we will study about the XML DOM CDATASection Object. The text present within an XML document is parsed or unparsed depending on what it is declared. If the text is declared as Parse Character Data (PCDATA), it is parsed by the parser to convert an XML document into an XML DOM Object. On the other hand, if the text is declared as the unparsed Character Data (CDATA) the text within is not parsed by the XML parser. These are not considered as the markup and will not expand the entities.
使用 CDATASection 对象的目的是转义包含字符的文本块，其他情况下这些字符将被视为标记。 "]]>" ，这是在终止 CDATA 部分的 CDATA 部分中识别的唯一分隔符。
The purpose of using the CDATASection object is to escape the blocks of text containing characters that would otherwise be regarded as markup. "]]>", this is the only delimiter recognized in a CDATA section that ends the CDATA section.
CharacterData.data 属性保存由 CDATA 部分包含的文本。此接口通过 Text 接口继承 CharacterData 接口。
The CharacterData.data attribute holds the text that is contained by the CDATA section. This interface inherits the CharatcterData interface through the Text interface.
DOM - Comment Object
在本章中，我们将学习 Comment 对象。注释作为注释或行添加，用于理解 XML 代码的目的。注释可用于包含相关链接、信息和术语。它们可能出现在 XML 代码的任何位置。
In this chapter, we will study about the Comment object. Comments are added as a notes or the lines for understanding the purpose of an XML code. Comments can be used to include related links, information and terms. These may appear anywhere in the XML code.
注释接口继承表示注释内容的 CharacterData 接口。
The comment interface inherits the CharacterData interface representing the content of the comment.
DOM - XMLHttpRequest Object
XMLHttpRequest 对象在网页客户端和服务器端之间建立了一个媒介，可供许多脚本语言（如 JavaScript、JScript、VBScript 和其他 Web 浏览器）用于传输和处理 XML 数据。
XMLHttpRequest object establishes a medium between a web page’s client-side and server-side that can be used by the many scripting languages like JavaScript, JScript, VBScript and other web browser to transfer and manipulate the XML data.
使用 XMLHttpRequest 对象可以更新网页某个部分，无需重新加载整个页面，并在页面已加载后向服务器请求和接收数据并向服务器发送数据。
With the XMLHttpRequest object it is possible to update the part of a web page without reloading the whole page, request and receive the data from a server after the page has been loaded and send the data to the server.
Syntax
可按以下方式实例化 XMLHttpRequest 对象：
An XMLHttpRequest object can be instatiated as follows −
xmlhttp = new XMLHttpRequest();为了支持所有浏览器，包括 IE5 和 IE6，请按以下方式检查浏览器是否支持 XMLHttpRequest 对象：
To handle all browsers, including IE5 and IE6, check if the browser supports the XMLHttpRequest object as below −
if(window.XMLHttpRequest) // for Firefox, IE7+, Opera, Safari, ... {
xmlHttp = new XMLHttpRequest();
} else if(window.ActiveXObject) // for Internet Explorer 5 or 6 {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}有关使用 XMLHttpRequest 对象加载 XML 文件的示例，请参阅 here
Examples to load an XML file using the XMLHttpRequest object can be referred here
Methods
下表列出了 XMLHttpRequest 对象的方法：
The following table lists the methods of the XMLHttpRequest object −
S.No. |
Method & Description |
1 |
abort() Terminates the current request made. |
2 |
getAllResponseHeaders() Returns all the response headers as a string, or null if no response has been received. |
3 |
getResponseHeader() Returns the string containing the text of the specified header, or null if either the response has not yet been received or the header doesn’t exist in the response. |
4 |
open(method,url,async,uname,pswd) It is used in conjugation with the Send method to send the request to the server. The open method specifies the following parameters − method − specifies the type of request i.e. Get or Post. url − it is the location of the file. async − indicates how the request should be handled. It is boolean value. where, 'true' means the request is processed asynchronously without waiting for a Http response. 'false' means the request is processed synchronously after receiving the Http response. uname − is the username. pswd − is the password. |
5 |
send(string) It is used to send the request working in conjugation with the Open method. |
6 |
setRequestHeader() Header contains the label/value pair to which the request is sent. |
Attributes
下表列出了 XMLHttpRequest 对象的属性：
The following table lists the attributes of the XMLHttpRequest object −
S.No. |
Attribute & Description |
1 |
onreadystatechange It is an event based property which is set on at every state change. |
2 |
readyState This describes the present state of the XMLHttpRequest object. There are five possible states of the readyState property − readyState = 0 − means request is yet to initialize. readyState = 1 − request is set. readyState = 2 − request is sent. readyState = 3 − request is processing. readyState = 4 − request is completed. |
3 |
responseText This property is used when the response from the server is a text file. |
4 |
responseXML This property is used when the response from the server is an XML file. |
5 |
status Gives the status of the Http request object as a number. For example, "404" or "200". |
6 |
statusText Gives the status of the Http request object as a string. For example, "Not Found" or "OK". |
Examples
node.xml 内容如下：
node.xml contents are as below −
<?xml version = "1.0"?>
<Company>
<Employee category = "Technical">
<FirstName>Tanmay</FirstName>
<LastName>Patil</LastName>
<ContactNo>1234567890</ContactNo>
<Email>tanmaypatil@xyz.com</Email>
</Employee>
<Employee category = "Non-Technical">
<FirstName>Taniya</FirstName>
<LastName>Mishra</LastName>
<ContactNo>1234667898</ContactNo>
<Email>taniyamishra@xyz.com</Email>
</Employee>
<Employee category = "Management">
<FirstName>Tanisha</FirstName>
<LastName>Sharma</LastName>
<ContactNo>1234562350</ContactNo>
<Email>tanishasharma@xyz.com</Email>
</Employee>
</Company>Retrieve specific information of a resource file
以下示例演示如何使用 getResponseHeader() 方法和 readState 属性来检索资源文件的特定信息。
Following example demonstrates how to retrive specific information of a resource file using the method getResponseHeader() and the property readState.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "content-type" content = "text/html; charset = iso-8859-2" />
<script>
function loadXMLDoc() {
var xmlHttp = null;
if(window.XMLHttpRequest) // for Firefox, IE7+, Opera, Safari, ... {
xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject) // for Internet Explorer 5 or 6 {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlHttp;
}
function makerequest(serverPage, myDiv) {
var request = loadXMLDoc();
request.open("GET", serverPage);
request.send(null);
request.onreadystatechange = function() {
if (request.readyState == 4) {
document.getElementById(myDiv).innerHTML = request.getResponseHeader("Content-length");
}
}
}
</script>
</head>
<body>
<button type = "button" onclick="makerequest('/dom/node.xml', 'ID')">Click me to get the specific ResponseHeader</button>
<div id = "ID">Specific header information is returned.</div>
</body>
</html>Execution
将此文件另存为服务器路径上的 elementattribute_removeAttributeNS.htm（此文件和 node_ns.xml 应在服务器中的同一路径下）。我们将获得如下所示的输出 −
Save this file as elementattribute_removeAttributeNS.htm on the server path (this file and node_ns.xml should be on the same path in your server). We will get the output as shown below −
Before removing the attributeNS: en
After removing the attributeNS: nullRetrieve header infomation of a resource file
以下示例演示如何使用 getAllResponseHeaders() 方法和 readyState 属性检索资源文件的标头信息。
Following example demonstrates how to retrieve the header information of a resource file, using the method getAllResponseHeaders() using the property readyState.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
<script>
function loadXMLDoc() {
var xmlHttp = null;
if(window.XMLHttpRequest) // for Firefox, IE7+, Opera, Safari, ... {
xmlHttp = new XMLHttpRequest();
} else if(window.ActiveXObject) // for Internet Explorer 5 or 6 {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlHttp;
}
function makerequest(serverPage, myDiv) {
var request = loadXMLDoc();
request.open("GET", serverPage);
request.send(null);
request.onreadystatechange = function() {
if (request.readyState == 4) {
document.getElementById(myDiv).innerHTML = request.getAllResponseHeaders();
}
}
}
</script>
</head>
<body>
<button type = "button" onclick = "makerequest('/dom/node.xml', 'ID')">
Click me to load the AllResponseHeaders</button>
<div id = "ID"></div>
</body>
</html>Execution
将此文件另存为服务器路径上的 http_allheader.html（此文件和 node.xml 应在服务器中的同一路径下）。我们将获得如下所示的输出（取决于浏览器） −
Save this file as http_allheader.html on the server path (this file and node.xml should be on the same path in your server). We will get the output as shown below (depends on the browser) −
Date: Sat, 27 Sep 2014 07:48:07 GMT Server: Apache Last-Modified:
Wed, 03 Sep 2014 06:35:30 GMT Etag: "464bf9-2af-50223713b8a60" Accept-Ranges: bytes Vary: Accept-Encoding,User-Agent
Content-Encoding: gzip Content-Length: 256 Content-Type: text/xmlDOM - DOMException Object
DOMException 表示在使用某个方法或属性时发生的异常事件。
The DOMException represents an abnormal event happening when a method or a property is used.
Properties
下表列出了 DOMException 对象的属性：
Below table lists the properties of the DOMException object
S.No. |
Property & Description |
1 |
name Returns a DOMString that contains one of the string associated with an error constant (as seen the table below). |
Error Types
S.No. |
Type & Description |
1 |
IndexSizeError The index is not in the allowed range. For example, this can be thrown by the Range object. (Legacy code value: 1 and legacy constant name: INDEX_SIZE_ERR) |
2 |
HierarchyRequestError The node tree hierarchy is not correct. (Legacy code value: 3 and legacy constant name: HIERARCHY_REQUEST_ERR) |
3 |
WrongDocumentError The object is in the wrong document. (Legacy code value: 4 and legacy constant name: WRONG_DOCUMENT_ERR) |
4 |
InvalidCharacterError The string contains invalid characters. (Legacy code value: 5 and legacy constant name: INVALID_CHARACTER_ERR) |
5 |
NoModificationAllowedError The object cannot be modified. (Legacy code value: 7 and legacy constant name: NO_MODIFICATION_ALLOWED_ERR) |
6 |
NotFoundError The object cannot be found here. (Legacy code value: 8 and legacy constant name: NOT_FOUND_ERR) |
7 |
NotSupportedError The operation is not supported. (Legacy code value: 9 and legacy constant name: NOT_SUPPORTED_ERR) |
8 |
InvalidStateError The object is in an invalid state. (Legacy code value: 11 and legacy constant name: INVALID_STATE_ERR) |
9 |
SyntaxError The string did not match the expected pattern. (Legacy code value: 12 and legacy constant name: SYNTAX_ERR) |
10 |
InvalidModificationError The object cannot be modified in this way. (Legacy code value: 13 and legacy constant name: INVALID_MODIFICATION_ERR) |
11 |
NamespaceError The operation is not allowed by Namespaces in XML. (Legacy code value: 14 and legacy constant name: NAMESPACE_ERR) |
12 |
InvalidAccessError The object does not support the operation or argument. (Legacy code value: 15 and legacy constant name: INVALID_ACCESS_ERR) |
13 |
TypeMismatchError The type of the object does not match the expected type. (Legacy code value: 17 and legacy constant name: TYPE_MISMATCH_ERR) This value is deprecated, the JavaScript TypeError exception is now raised instead of a DOMException with this value. |
14 |
SecurityError The operation is insecure. (Legacy code value: 18 and legacy constant name: SECURITY_ERR) |
15 |
NetworkError A network error occurred. (Legacy code value: 19 and legacy constant name: NETWORK_ERR) |
16 |
AbortError The operation was aborted. (Legacy code value: 20 and legacy constant name: ABORT_ERR) |
17 |
URLMismatchError The given URL does not match another URL. (Legacy code value: 21 and legacy constant name: URL_MISMATCH_ERR) |
18 |
QuotaExceededError The quota has been exceeded. (Legacy code value: 22 and legacy constant name: QUOTA_EXCEEDED_ERR) |
19 |
TimeoutError The operation timed out. (Legacy code value: 23 and legacy constant name: TIMEOUT_ERR) |
20 |
InvalidNodeTypeError The node is incorrect or has an incorrect ancestor for this operation. (Legacy code value: 24 and legacy constant name: INVALID_NODE_TYPE_ERR) |
21 |
DataCloneError The object cannot be cloned. (Legacy code value: 25 and legacy constant name: DATA_CLONE_ERR) |
22 |
EncodingError The encoding operation, being an encoding or a decoding one, failed (No legacy code value and constant name). |
23 |
NotReadableError The input/output read operation failed (No legacy code value and constant name). |
Example
以下示例演示了使用格式不正确的 XML 文档如何导致 DOMException。
Following example demonstrates how using a not well-formed XML document causes a DOMException.
error.xml 内容如下 −
error.xml contents are as below −
<?xml version = "1.0" encoding = "UTF-8" standalone = "no" ?>
<Company id = "companyid">
<Employee category = "Technical" id = "firstelement" type = "text/html">
<FirstName>Tanmay</first>
<LastName>Patil</LastName>
<ContactNo>1234567890</ContactNo>
<Email>tanmaypatil@xyz.com</Email>
</Employee>
</Company>以下示例演示了 name 特性的用法 −
Following example demonstrates the usage of the name attribute −
<html>
<head>
<script>
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else // code for IE5 and IE6 {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
</head>
<body>
<script>
try {
xmlDoc = loadXMLDoc("/dom/error.xml");
var node = xmlDoc.getElementsByTagName("to").item(0);
var refnode = node.nextSibling;
var newnode = xmlDoc.createTextNode('That is why you fail.');
node.insertBefore(newnode, refnode);
} catch(err) {
document.write(err.name);
}
</script>
</body>
</html>