JS operation XML and HTML detailed

Source: Internet
Author: User
Tags xml attribute

What is an XML DOM
The XML DOM defines a standard way to access and process XML documents.
XML DOM is the standard for getting, changing, adding, or deleting XML elements
Two concepts about nodes
• The entire document is a document node
• Each XML tag is an element node
• Text that is contained in an XML element is a text node
• Each XML attribute is an attribute node
• Annotations belong to annotation nodes

Three parsing of XML

The code is as follows Copy Code
parsing xml (i) IE browser
xmldoc=new ActiveXObject ("Microsoft.XMLDOM");
xmldoc.async= "false";
xmldoc.load ("books.xml");
Parsing XML (ii)
l xmldoc=document.implementation.createdocument ();
xmldoc.async= "false";
xmldoc.load ("books.xml");
The following approach is applicable to IE browser
Instantiating a Xmldom object
var xmldoc=new activexobject (' microsoft.xmldom ');
Turn off asynchronous Load mode
Xmldoc.async=false;
Load XML file, read the data inside
Xmldoc.load (' Demo14.xml ');
The following is true for non-IE browsers
/*var xmldoc=document.implementation.createdocument ("", "", null);
Xmldoc.async=false;
Xmldoc.load (' Demo14.xml ');
alert (xmldoc);
Finally we come to the conclusion that
Instantiating xmldom differently in different browsers

Four Package
Since the browser used by the client is unknown, we write code that is compatible, which means that the client browser uses the code to create the corresponding class object
We encapsulate the code in the Public.js

The code is as follows Copy Code
function createxmldocument (file) {
var str=window.navigator.useragent;
var xmldoc;
if (Str.indexof (' msie ') >0) {
Xmldoc=new ActiveXObject (' microsoft.xmldom ');
}
else{
Xmldoc=document.implementation.createdocument ("", "", null);
}
Xmldoc.async=false;
Xmldoc.load (file);
return xmldoc;
}

Calling code:

Five Get nodes

nodelist getElementsByTagName (name)
To get a node through a node (label) name
The return value is a number of node groups
NodeList: Array of nodes
Length: Number of elements
Six Common Properties
nodename: node name
nodevalue: Node value <p> product </p>
ParentNode: Parent node
childnodes: List of child nodes
attributes: List of attribute nodes
firstchild: First child node
lastchild: Last child node
nextsibling: Next Peace node
previoussibling: Previous peace node
documentelement: Root node

The code is as follows Copy Code

var xmldoc= Createxmldocument (' Demo14.xml ');
//Find the person node in the XML document
Var persons=xmldoc.getelementsbytagname ("person");
document.write (' total ' + persons.length+ ' personal <br> ');
document.write (persons[0].nodename+ ' <br> ');
//1th person. 1th child node. 1th Person child node (text node). NodeValue
document.write (persons[0].childnodes[0].childnodes[0].nodevalue+ ' <br> ');
document.write (persons[0].parentnode.nodename+ ' <br> ');
document.write (persons[0].attributes[0].nodevalue+ ' <br> ');
document.write (persons[0].firstchild.nodename+ ' <br> ');
document.write (persons[0].lastchild.nodename+ ' <br> ');
document.write (persons[0].firstchild.nextsibling.nodename+ ' <br> ');
document.write (persons[0].lastchild.previoussibling.nodename+ ' <br> ');
document.write (xmldoc.documentelement.nodename+ ' <br> ');

Example: Through the above knowledge point to complete the traversal of an XML document

The code is as follows Copy Code
var xmldoc=createxmldocument (' Demo14.xml ');
var persons=xmldoc.getelementsbytagname (' person ');
var count=persons.length; Take the number
document.write (' total ' +count+ ' personal <br> ');
for (Var i=0;i<count;i++) {
document.write (' first ' + (i+1) + ' personal information is: ');
document.write (' ID: ' +persons[i].attributes[0].nodevalue);
document.write (Persons[i].childnodes[0].childnodes[0].nodevalue);
document.write (Persons[i].childnodes[1].childnodes[0].nodevalue);
document.write (' <br> ');
}

Seven common methods

1. Add nodes

The code is as follows Copy Code

CreateElement (TagName); Create an element node
CreateAttribute (name); Create an attribute node
createTextNode (text) creates a text node
AppendChild (newchild); Add child nodes (element nodes and text nodes)
Setattributenode (newattr) Add attribute node
var xmldoc=createxmldocument (' Demo14.xml ');
var person=xmldoc.createelement (' person ');
var name=xmldoc.createelement (' name ');
var age=xmldoc.createelement (' age ');
var namevalue=xmldoc.createtextnode (' Yellow Six ');
var agevalue=xmldoc.createtextnode (' 30 ');
var id=xmldoc.createattribute (' id ');
var value=xmldoc.createtextnode (' s105 ');
Id.appendchild (value);
Name.appendchild (Namevalue);
Age.appendchild (Agevalue);
Person.appendchild (name);
Person.appendchild (age);
Person.setattributenode (ID);
XmlDoc.documentElement.replaceChild (Person,xmldoc.documentelement.lastchild);
Persons=xmldoc.getelementsbytagname (' person ');
var count=persons.length; Take the number
document.write (' total ' +count+ ' personal <br> ');
for (Var i=0;i<count;i++) {
document.write (' first ' + (i+1) + ' personal information is: ');
document.write (' ID: ' +persons[i].attributes[0].nodevalue);
document.write (Persons[i].childnodes[0].childnodes[0].nodevalue);
document.write (Persons[i].childnodes[1].childnodes[0].nodevalue);
document.write (' <br> ');
}

2. Delete node

The code is as follows Copy Code

RemoveChild (Oldchild)

3. Replacement node

The code is as follows Copy Code
ReplaceChild (Newchild,oldchild);

Newchild: New node
Oldchild: Original node

The code is as follows Copy Code
var xmldoc=createxmldocument (' Demo14.xml ');
var person=xmldoc.createelement (' person ');
var name=xmldoc.createelement (' name ');
var age=xmldoc.createelement (' age ');
var namevalue=xmldoc.createtextnode (' Yellow Six ');
var agevalue=xmldoc.createtextnode (' 30 ');
var id=xmldoc.createattribute (' id ');
var value=xmldoc.createtextnode (' s105 ');
Id.appendchild (value);
Name.appendchild (Namevalue);
Age.appendchild (Agevalue);
Person.appendchild (name);
Person.appendchild (age);
Person.setattributenode (ID);
XmlDoc.documentElement.replaceChild (Person,xmldoc.documentelement.lastchild);

4. Cloning nodes

CloneNode (True)
true: Represents the child nodes of a replication node and the value of the node
5. RemoveAttribute (name)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.