JS operation XML and HTML detailed

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)