Ajax-dom operations on xml and html

The previous article mentioned the basics of dom. dom can operate on xml and html. This time, it mainly describes how to use dom APIs to operate xml and html documents.

Dom operation xml

Before dom operations on xml documents, you must load xml documents to xml dom objects. Therefore, two steps are required: 1. use javascript to load xml documents. 2. dom to operate the loaded xml document.

Xml files loaded using javascript can also be divided into: 1. xml files loaded in the same domain. 2. Load a segment to indicate an xml string.

/** Encapsulate methods for loading xml files and xml strings in the same domain in IE and firefox browsers, the returned result is the root element node * @ param flag of the xml object in the xml object. The false expression loads the xml string * @ param xmldoc. The flag is false, false indicates the xml string */function loadXML (flag, xmldoc) {if (window. activeXObject) {// 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) {// load xml data xmlObj in synchronous mode. async = false; if (flag) {// install xml file xmlObj. load (xmldoc);} else {// xml-loaded string xmlObj. loadXML (xmldoc); // parse an XML tag string to form this document} // return the root element node return xmlObj.doc umentElement ;} else {alert ("failed to create the object for loading the xml document. "); Return null ;}} else if (document. implementation. createDocument) {// create a new Document object and the specified root element. // For firfox browser var xmlObj; if (flag) {// load xml file xmlObj = document. implementation. createDocument ("", "", null); // create a new Document object and the specified root element. If (xmlObj) {// load xmlObj in synchronous mode. async = false; xmlObj. load (xmldoc); return xmlObj.doc umentElement;} else {// xml-loaded string xmlObj = new DOMParser (); // The DOMParser object parses the XML text and returns an XML Document Object var docRoot = xmlObj. parseFromString (xmldoc, "text/xml"); // parse the XML tag return docRoot.doc umentElement ;}} alert ("An error occurred while creating the object for loading the 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 operation xml document

Function test () {var rootElement = loadXML (true, "TestBook. xml "); // load the xml document and return the root element node var rootDocument = rootElement of the xml dom object. parentNode; // find the parent node var bookElement = rootDocument. createElement ("book"); // create the book node var textNode = rootDocument. createTextNode ("AJAX Hello"); bookElement. appendChild (textNode); // Add the text node rootElement after bookElement. appendChild (bookElement); // Add var bookElements = rootElement after the text node. getElementsByTagName ("book"); // return all book nodes alert ("");}

Dom operation html

Html document

You can use the attributes and methods of the root node to operate html documents. You can create element nodes, text nodes, and element nodes.

// Obtain the root element node var htmlrootelement?document.doc umentElement; // obtain the specified Element Node var divNode = document. getElementById ("div1"); // obtain the div Element Node var divNodes = document. getElementsByTagName ("div"); // create an element node var newDivNode = document. createElement ("div"); // create a text node var newTextNode = document. createTextNode ("aaaaaaaa ");

You can use the attributes and methods of element nodes to operate html documents.

// Return the upper-case label name var tagName = divNode. tagName; // obtain the Element Node var divNode2 = document based on the tag name. getElementById ("div2"); var divNodes2 = document. getElementsByTagName ("div"); // operation attribute var inputtext = document. getElementById ("inputtext"); var flag = inputtext. hasAttribute ("value"); // determines whether the attribute is inputtext. setAttribute ("value", "textTest"); // sets the property var textValue = inputtext. getAttribute ("value"); // get the attribute value inputtext. removeAttribute ("value"); // remove the attribute value // The inputtext operation for another attribute. value = "121212"; var textValue2 = inputtext. value; var clic = document. getElementById ("clic"); clic. onclick = function () {alert ("12 ")};

You can use the attributes and methods of all nodes to operate html documents and manage all nodes of html documents.

Var divNode2 = document. getElementById ("div2"); var inputtext = document. getElementById ("inputtext"); // return the attribute node var attributs = inputtext on the element node. attributes; // nodeName nodeValue nodeType var inputname = inputtext. nodeName; var nodetype = inputtext. nodeType; var nodevalue = inputtext. nodeValue; // return all sub-nodes var childs = divNode2.childNodes; // obtain the parent node var parent = divNode2.parentNode; // obtain the first node and the last node var first = divNode2.firstChild; var last = divNode2.lastChild; // obtain the sibling node var next = divNode2.nextSibling; // var prev = divnode2.previussibling; // next sibling node // determine whether a subnode var flag2 = divNode2.hasChildNodes (); // append the node var new2 = document. createElement ("div"); var text2 = document. createTextNode ("insert"); new2.appendChild (text2); divNode2.insertBefore (new2, divNode2.firstChild); // insert the child node and move the child node to the first var new3 = document. createElement ("div"); var text3 = document. createTextNode ("insert3"); new3.appendChild (text3); divNode2.insertBefore (new3, null); // insert a subnode divNode2.insertBefore (new3, divNode2.firstChild ); // move the child node to the first node // remove the node var remove = divNode2.removeChild (new3); // Replace the node with another node and replace the previous node var text4 = document. createTextNode ("insert4"); 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 the subnode var clone2 = divNode2.cloneNode (false); // do not clone the subnode
Dom objects operate on xml and html documents. The advantage is that they can manage nodes in documents more quickly and directly on the client. The disadvantage is that there is a difference in operations and loading of documents in different browsers.