aiduciukas
New Member
HTML:\[code\]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><head><TITLE>Personal DOM Lesson</TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT=""><META NAME="Keywords" CONTENT=""><META NAME="Description" CONTENT=""><script>/////////////////////////////////////////////////////////// To Do //// -------------------------------------------- //// ElementTag Recursion //// - test recursion function - done //// - copy/adapt test - not done //// - top level node is #document //// - firstChild: <xml> //// - lastChild:<root (hierarchy)> //// * Hierarchy-level monitoring variable [branchLevel] //// //// Attribute Array ///////////////////////////////////////////////////////////function loadjscssfile(filename, filetype){// if filename is a external JavaScript fileif (filetype=="js") {var fileref = document.createElement('script')fileref.setAttribute("type","text/javascript")fileref.setAttribute("src", filename)}// if filename is an external CSS fileelse if (filetype=="css") {var fileref=document.createElement("link")fileref.setAttribute("rel", "stylesheet")fileref.setAttribute("type", "text/css")fileref.setAttribute("href", filename)}if (typeof fileref!="undefined")document.getElementsByTagName("head")[0].appendChild(fileref)}loadjscssfile("domLesson.js", "js");loadjscssfile("prepDomLesson.js", "js");loadjscssfile("domLesson.css", "css");</script></head><BODY></BODY></HTML>\[/code\]Javascript:\[code\]//////////////////////////////////////////////////// Hillegasse3.js //// To Do//// -------------------------------------------- ////////////////////////////////////////////////////// verifyFileLoaded("Hillegasse3.js Loaded");function verifyFileLoaded(pMessage) {// alert(pMessage);}var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");// alert(xmlDoc);objXmlData = http://stackoverflow.com/questions/10899317/loadXML("Hillegasse3.xml");// alert(objXmlData.text);function loadXML(xmlFile) {xmlDoc.async = "false";xmlDoc.onreadystatechange = verify;xmlDoc.load(xmlFile);// alert(xmlDoc.lastChild.nodeName);// alert(xmlDoc.nodeName); // top level node is #documentxmlObj = xmlDoc.documentElement;xmlChapters = xmlDoc.documentElement.childNodes;// alert(xmlChapters.length);// alert(xmlObj.nodeName);// alert(xmlObj.hasAttributes);// alert(xmlObj.hasAttribute("name"));// alert(xmlObj.childNodes.length);// alert(1);// alert(xmlSubChapters.length);// for (i=0; i<xmlChapters.length; i++) {// alert("# of childrn: " + xmlChapters.item(i).childNodes.length);// alert("hasChildNodes: " + xmlChapters.item(i).hasChildNodes);// for (j=0; j<xmlChapters.item(i).childNodes.length; j++) {// alert(xmlChapters.item(i).childNodes.item(j).text);// }// }return xmlDoc;}function verify() {// alert("verifying");// 0 Object is not initialized// 1 Loading object is loading data// 2 Loaded object has loaded data// 3 Data from object can be worked with// 4 Object completely initializedif (xmlDoc.readyState != 4) {// alert("xmlDoc.readyState: " + xmlDoc.readyState);return false;} else {// alert("xmlDoc.readyState: " + xmlDoc.readyState);}}//////////////////////////////////////////////////// prepHillegasse3.js //// To Do//// - organize setEndTag based on node.lastChild ////////////////////////////////////////////////////// verifyFileLoaded("prepHillegasse3.js Loaded");// Define a walk_the_DOM function that visits every// node of the tree in HTML source order, starting// from some given node.It invokes a function,// passing it each node in turn.walk_the_DOM calls// itself to process each of the child nodes.var objLevelsAndIndices = new Object;objLevelsAndIndices = { nTreeLevel : 0,nNodeIndex : 0};objLevelsAndIndices.nTreeLevel = 0;objLevelsAndIndices.nNodeIndex = 0;walk(xmlObj, func, objLevelsAndIndices);function walk(node, func, objLevelsAndIndices) {if (node.nodeName == "#text") {} else {indentText(objLevelsAndIndices.nTreeLevel * 4);// alert("treeLevel2: " + objLevelsAndIndices.nTreeLevel);document.write(setBegTag(node, node.nodeName, "title=" + node.getAttribute("id"), ""));document.write(node.firstChild.nodeValue);document.write(setEndTag(node.nodeName));// document.write("treeLevel: " + // objLevelsAndIndices.nTreeLevel+" ");document.write("Vn: " + node.childNodes.length + " ");document.write("Vi: " + objLevelsAndIndices.nNodeIndex);document.write("<br/>");}func(node);// Node has no childrenif (node.firstChild == null) {}// Node has childrenelse {node = node.firstChild; // focus moves down the hierarchy hereobjLevelsAndIndices.nTreeLevel++; // increase indentation levelwhile(node) {objLevelsAndIndices.nNodeIndex++;walk(node, func, objLevelsAndIndices);if (node.nextSibling == null) {break;}else {node = node.nextSibling;} // end of looking for Siblings} // end of looking at this nodeobjLevelsAndIndices.nTreeLevel--; // decrease indentation level}// return treeLevel;return objLevelsAndIndices;} // end of walk functionfunction func(node) {}////////////////////////////////////////////////////// utility functionfunction indentText(size) {for(spacer=0; spacer<size; spacer++) {document.write(" ");}}// Set the Beginning Tagfunction setBegTag(nodeObj, nodeName, attr, attributeArray) {var t = attr.split("=");// alert(t[0]);// alert(t[1]);// alert(nodeObj.nodeName + "-" + nodeName);// alert(nodeObj.hasAttributes); >> IE7 !support "hasAttributes"// att = " " + "\"" + attr + "\""att = " " + t[0] + "=" + "\"" + t[1] + "\""btResult = "< " + nodeName + att + ">"return btResult;}function setEndTag(nodeName) {etResult = "< /" + nodeName + ">"return etResult;}\[/code\]XML:\[code\]<?xml version="1.0" ?><!-- generic.xml --><generic id="Generic Title"><chapter id="001">A<subChapter id="0001">B</subChapter><subChapter id="0002">C</subChapter><subChapter id="0003">D</subChapter><subChapter id="0004">E<subtopic>AA</subtopic><subtopic>BB</subtopic></subChapter><subChapter id="0001">F<subtopic id="0002">G</subtopic><subtopic id="0003">H</subtopic><subtopic id="0004">I</subtopic></subChapter><subChapter id="0001">J</subChapter></chapter><chapter id="002">W</chapter><chapter id="003">X</chapter><chapter id="004">Y</chapter><chapter id="005">Z</chapter></generic>\[/code\]My output ends up in the format:\[code\]<root>A</root><-- This ending tag should appear AFTER the other elements, but I don't know how to move it with the above code.<element>E</element></code>\[/code\]etc...I am using this code as an attempt to understand how to work with the xml dom. Also, I'm not quite ready to use jQuery here; I understand that jQuery is easy to learn, however, I probably won't be permitted to use external libraries.Question: How do I "sandwich" my output?Almost Forgot: I'm being strictly forced to use IE7.