Detailed description of js operation xml and html

This article will introduce you to js operations related to xml and html operations. For more information, see references.

1. What is xml dom?
• The xml dom defines the standard methods for accessing and processing XML documents.
• Xml dom is a standard used to obtain, modify, add, or delete XML elements.
2. Concept of nodes
• The entire document is a document Node
• Each XML tag is an element node
• Text contained in XML elements is a text node
• Each XML Attribute is an attribute node.
• Annotations belong to annotation nodes

Parse xml

The Code is as follows:

Copy code

Parse xml (1) IE browser • XmlDoc = new ActiveXObject ("Microsoft. XMLDOM "); • XmlDoc. async = "false "; • XmlDoc. load ("books. xml "); Parse xml (2) • L xmlDoc = document. implementation. createDocument (); • XmlDoc. async = "false "; • XmlDoc. load ("books. xml "); // This method applies to IE // Instantiate an xmldom object Var xmlDoc = new ActiveXObject ('Microsoft. XMLDOM '); // Disable asynchronous loading mode XmlDoc. async = false; // Load the xml file and read the data in it XmlDoc. load ('demo14. xml ');*/ // This method is applicable to non-ie browsers. /* Var xmlDoc = document. implementation. createDocument ("", "", null ); XmlDoc. async = false; XmlDoc. load ('demo14. xml ');*/ Alert (xmlDoc ); // The final conclusion is as follows: // Different methods are used to instantiate xmldom in different browsers.

 

4 Encapsulation
Because the browser used by the client is unknown, we can write compatible code. That is to say, the code can be used by the client browser to create corresponding class objects.
We encapsulate the code into 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; }

Call code:

5. Get nodes

• NodeList getElementsByTagName (name)
Get nodes by node (Label) Name
Returns the number of node groups.
NodeList: node Array
Length: number of elements
Six common attributes
• NodeName: node name
• NodeValue: node value <p> item </p>
• ParentNode: parent node
• ChildNodes: subnode list
• Attributes: List of attribute nodes
• FirstChild: The first subnode
• LastChild: Last subnode
• NextSibling: Next Generation Node
• Previussibling: previous generation 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 + 'individual <br> '); Document. write (persons [0]. nodeName + '<br> '); // 1st individuals. 1st subnodes. 1st child nodes (text nodes). 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. previussibling. nodeName + '<br> '); Document.write(xmlDoc.doc umentElement. nodeName + '<br> ');

Example: Use the above knowledge points to traverse an xml document

The Code is as follows:

Copy code

Var xmlDoc = createXMLDocument ('demo14. xml '); Var persons = xmlDoc. getElementsByTagName ('person '); Var count = persons. length; // count Document. write ('total + count + 'individual <br> '); For (var I = 0; I <count; I ++ ){ Document. write ('quarter '+ (I + 1) +' personal information :'); 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) to create a text node AppendChild (newChild); add child nodes (element nodes and text nodes) SetAttributeNode (newAttr) add attribute nodes 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 6 '); 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.doc umentElement. lastChild ); Persons = xmlDoc. getElementsByTagName ('person '); Var count = persons. length; // count Document. write ('total + count + 'individual <br> '); For (var I = 0; I <count; I ++ ){ Document. write ('quarter '+ (I + 1) +' personal information :'); 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 a node

The Code is as follows:	Copy code
RemoveChild (oldChild)

3. Replace nodes

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 6 '); 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.doc umentElement. lastChild );

4. clone a node

CloneNode (true)
True: indicates the subnode and value of the copied node.
5. removeAttribute (name)