Ajax--dom the operation of XML and HTML

In the previous article on the basis of the DOM, Dom was able to manipulate XML and HTML, this time mainly written using the DOM API to how to manipulate XML and HTML documents.

DOM manipulation XML

The DOM must load the XML document into an XML DOM object before manipulating the XML document, thus requiring two steps 1. Load an XML document with JavaScript. 2.dom to manipulate the loaded XML document.

Loading XML documents with JavaScript can also be divided into: 1. Load the XML file of the same domain. 2. Load a paragraph representing the XML string.

/* * Encapsulate the method of loading the same domain XML file and XML string in IE and Firefox class browser, return the root element node in the XML Object DOM Object * @param flag True load XML file, false expression load XML string * @param XmlDoc flag loads the path of the XML file to False, and flag is false to denote the XML string */function LoadXML (Flag,xmldoc) {if (window. ActiveXObject) {//ie browser var activexname = ["MSXML2.        DOMDocument "," Miscrosoft.xmldom "];        var xmlobj; for (var i = 0; i < activexname.length; i++) {try {xmlobj = new ActiveXObject (activexname[i                ]);            Break            } catch (E) {}} if (Xmlobj) {///synchronous loading of XML data Xmlobj.async = FALSE;            if (flag) {//loaded in XML file Xmlobj.load (xmldoc); } else {//load XML string Xmlobj.loadxml (xmldoc);//Parse an XML tag string to form the document}/        /return root element node return xmlobj.documentelement; } else {alert ("Object creation failed to load XML document.
");        return null;        }} else if (document.implementation.createDocument) {//Creates a new Document object and the specified root element.        For Firfox browser var xmlobj;  if (flag) {//mount XML file Xmlobj = Document.implementation.createDocument ("", "", null);//Create a new document            Object and the specified root element.                if (xmlobj) {//Synchronous load Xmlobj.async = false;                Xmlobj.load (xmldoc);            return xmlobj.documentelement;   }} else {//load XML string xmlobj = new Domparser (); The Domparser object parses the XML text and returns an XML Document object var docroot = xmlobj.parsefromstring (xmldoc, "text/xml");//parsing XML        Mark return docroot.documentelement; }} alert ("Object creation failed to load XML document.    "); return null;}

XML document

<?xml version= "1.0" encoding= "UTF-8"?><books>    <book>        <author>peter</author >        <name>hello ajax</name>    </book>    <book>        <author>jack</ author>        <name>ajax puzzle</name>    </book></books>

DOM manipulating XML documents

            function test () {                var rootelement=loadxml (True, "testbook.xml");  Loads the XML document and returns the root element of the XML DOM object node                var rootdocument=rootelement.parentnode;  Find the parent node                var bookelement=rootdocument.createelement ("book");//create book node                var textnode= Rootdocument.createtextnode ("AJAX Hello");                Bookelement.appendchild (textnode);  Add the text node                rootelement.appendchild (bookelement) after bookelement and/or add var after the text node                bookelements= Rootelement.getelementsbytagname ("book");  Returns all the book Node                alert ("");            }

Dom manipulating HTML

HTML Document

Manipulate HTML documents using the properties and methods of the root node. Ability to create element nodes, text nodes, ELEMENT nodes.
                Gets the root element node                var htmlrootelement=document.documentelement;                Gets the specified element node                var Divnode=document.getelementbyid ("Div1");                Gets the entire page of the DIV element node                var divnodes=document.getelementsbytagname ("div");                Create element node                var newdivnode=document.createelement ("div");                Create a text node                var newtextnode=document.createtextnode ("Aaaaaaaa");
Manipulate HTML documents with attributes and methods of ELEMENT nodes. Ability to manipulate attributes of element nodes.
                Returns the uppercase tag name                var tagname=divnode.tagname;                Gets the element node                var Divnode2=document.getelementbyid ("Div2") according to the tag name;                var divnodes2=document.getelementsbytagname ("div");                Operation Attribute                var Inputtext=document.getelementbyid ("Inputtext");                var flag=inputtext.hasattribute ("value");//Infer whether there is this attribute                inputtext.setattribute ("value", "texttest");//Set Property                var textvalue=inputtext.getattribute ("value");//Gets the property value                inputtext.removeattribute ("value");//Remove the attribute value                                // There is also a property of Operation                inputtext.value= "121212";                var Textvalue2=inputtext.value;                                var Clic=document.getelementbyid ("clic");                Clic.onclick=function () {alert ("12")};
Manipulate HTML documents with properties and methods owned by all nodes. Ability to manage all nodes of an HTML document.
                var Divnode2=document.getelementbyid ("Div2");                               var Inputtext=document.getelementbyid ("Inputtext");                Returns the included attribute node on the element node Var attributs=inputtext.attributes;                NodeName NodeValue nodeType var inputname=inputtext.nodename;                var Nodetype=inputtext.nodetype;                                var Nodevalue=inputtext.nodevalue;                Returns all child nodes Var Childs=divnode2.childnodes;                Gets the parent node Var Parent=divnode2.parentnode;                Gets the first node and the last node Var first=divnode2.firstchild;                var last=divnode2.lastchild; Get the brother node Var next=divnode2.nextsibling;                Previous sibling node Var prev=divnode2.previoussibling;//next sibling node//infer if there are child nodes                               var flag2=divnode2.haschildnodes (); Append node var new2=documenT.createelement ("div");                var text2=document.createtextnode ("Insert");                New2.appendchild (TEXT2);  Divnode2.insertbefore (New2,divnode2.firstchild);                Insert a child node and move the child nodes to the first var new3=document.createelement ("div");                var text3=document.createtextnode ("Insert3");                New3.appendchild (TEXT3);  Divnode2.insertbefore (new3,null);//Insert child node Divnode2.insertbefore (new3,divnode2.firstchild);                Move child nodes to first//Remove node var remove=divnode2.removechild (NEW3);                Replace the node with a node var text4=document.createtextnode ("Insert4") with a node that replaces the former node.                var new4=document.createelement ("div");                New4.appendchild (TEXT4);                var replace=divnode2.replacechild (New4,divnode2.firstchild);                                var replace=divnode2.replacechild (Newdivnode,divnode2.firstchild); Clone node                var clone1=divnode2.clonenode (true);//Clone child node Var clone2=divnode2.clonenode (false);//Do not clone child nodes 
DOM objects operate on XML documents and HTML documents, with the advantage of being able to be faster in the client. More directly manage the nodes in the document. The disadvantage is that there are differences in the operation and loading of documents in different browsers.
 
Ajax--dom the operation of XML and HTML