I have the following code:
var xmlString = ajaxRequest.responseText.toString();
parser = new DOMParser()
doc = parser.parseFromString(xmlString, "text/xml");
The response text is a complete HTML document. After I create the XMLDocument (doc), I want to go over each node, manipulate some stuff and print it.
How can I iterate the XMLDocument? I want to go on each one of its nodes.
Thanks!
A little example if you want to get all links from this XML and print their text
var links = doc.documentElement.getElementsByTagName("a");
for (i=0;i<links.length;i++) {
var txt=links[i].firstChild.nodeValue;
document.write(txt + '<br>');
}
Almost sure that this is correct, didn't had time to test it.
You may read this articles to go deeper:
getElementsByTagName
nodeName
NodeList
Hope this helps.
Best regards!
Related
var html = '<p>sup</p>'
I want to run document.querySelectorAll('p') on that text without inserting it into the dom.
In jQuery you can do $(html).find('p')
If it's not possible, what's the cleanest way to to do a temporary insert making sure it doesn't interfere with anything. then only query that element. then remove it.
(I'm doing ajax requests and trying to parse the returned html)
With IE 10 and above, you can use the DOM Parser object to parse DOM directly from HTML.
var parser = new DOMParser();
var doc = parser.parseFromString(html, "text/html");
var paragraphs = doc.querySelectorAll('p');
You can create temporary element, append html to it and run querySelectorAll
var element = document.createElement('div');
element.insertAdjacentHTML('beforeend', '<p>sup</p>');
element.querySelectorAll('p')
I am trying to parse the below xml data by traversing through each node.
<example>
<name>BlueWhale</name>
<addr>101 Yesler Way, Suite 402</addr>
<city>Seattle</city>
<state>Washington</state>
</example>
Now I want to access each node without doing getElementsByTagName and print each NodeName & NodeValue in javascript, with the help of things like, rootElement,firstchild,nextSibling which i am not sure of.
I am trying the following manner
var txt = " <example> <name>BlueWhale</name> <addr>101 Yesler Way, Suite 402</addr> <city>Seattle</city> <state>Washington</state> </example> "
var domParser = new DOMParser();
xml = domParser.parseFromString(txt, "text/xml");
var el =xml.documentElement.nodeName;
console.log(el);
and print each var.
Could anyone please help.
if you xml is stored inside a string variable you can use jQuery.
var xml = "<example>...";
$(xml).children().each(function() {
var tagName = this.tagName;
var text = this.innerHtml
});
You should consider using library that does that for you rather than doing it by hand. One of commonly used one's you can find here.
I am trying to convert this XML tree
<IN1>
<IN1.1>
<IN1.1.1>1</IN1.1.1>
</IN1.1>
<IN1.17>
<IN1.17.1>1</IN1.17.1>
</IN1.17>
<IN1.47>
<IN1.47.1>C</IN1.47.1>
</IN1.47>
<IN1.3>
<IN1.3.1>paycode</IN1.3.1>
</IN1.3>
</IN1>
into this
<IN1>
<IN1.1>
<IN1.1.1>1</IN1.1.1>
</IN1.1>
<IN1.3>
<IN1.3.1>paycode</IN1.3.1>
</IN1.3>
<IN1.17>
<IN1.17.1>1</IN1.17.1>
</IN1.17>
<IN1.47>
<IN1.47.1>C</IN1.47.1>
</IN1.47>
</IN1>
My current code is
for each (field in msg['IN1'].children())
{
fields.push(field.toString());
}
fields.sort();
This sorts the last two elements but then re-arranges the first two. What is a good way to approach this?
You might be able to find some luck by using the jQuery TinySort plugin. You can sort DOM elements based on numerical/alphabetical parameters.
XSLT was created to transform XML from one form to another (jsFiddle):
var xml = "<IN1><IN1.1><IN1.1.1>1</IN1.1.1></IN1.1><IN1.17><IN1.17.1>1</IN1.17.1></IN1.17><IN1.47><IN1.47.1>C</IN1.47.1></IN1.47><IN1.3><IN1.3.1>paycode</IN1.3.1></IN1.3></IN1>";
var xsl = "<xsl:stylesheet version=\"1.0\" xmlns:xsl=\"http://www.w3.org/1999/XSL/Transform\"><xsl:template match=\"IN1\"><IN1><xsl:apply-templates select=\"*\"><xsl:sort select=\"substring-after(name(), 'IN1.')\" data-type=\"number\"/></xsl:apply-templates></IN1></xsl:template><xsl:template match=\"*\"><xsl:copy-of select=\".\"/></xsl:template></xsl:stylesheet>";
var parser = new DOMParser();
var domToBeTransformed = parser.parseFromString(xml, "text/xml");
var xslt = parser.parseFromString(xsl, "text/xml");
var processor = new XSLTProcessor();
processor.importStylesheet(xslt);
var newDocument = processor.transformToDocument(domToBeTransformed);
var serializer = new XMLSerializer();
var newDocumentXml = serializer.serializeToString(newDocument);
alert(newDocumentXml);
The above code works in Chrome and Firefox; the fiddle has an implementation for IE. The trick with IE is its dependence on Active X. It's all installed with IE, though, so really, no "external" libraries were used.
Good luck.
1) Write a recursive algorithm that sorts each node in the tree.
For each child:
2) Gather all the children under the element into a JavaScript array.
3) Sort the array based on custom criteria.
4) Iterate the array, adding the children to the parent in sorted order.
Note: re-adding a child into the DOM automatically removes it from its previous location.
If you need additional help with any of these parts, feel free to clarify.
I'm developing a Windows 8 Metro App using JavaScript. I need to manipulate a string of HTML to select elements like DOM.
How can I do that?
Example:
var html = data.responseText; // data.response is a string of HTML received from xhr function.
// Now I need to extract an element from the string like document.getElementById("some_element")...
Thanks!
UPDATE:
I solved!
var parser = new DOMParser();
var xml = parser.parseFromString(data.responseText);
I think your approach to the problem isn't the best, you could return JSON or xml. But if you need to do it that way:
To my knowledge you wont be able to use getElementById without inserting a new element in the document (in the example below, doing inserting div in document, for example document.appendChild(div)), but you could do this:
var div = document.createElement("div");
div.innerHTML = '<span id="rawr"></span>'; //here you would put data.responseText
var elements = div.getElementsByTagName("span"); // [<span id="rawr"></span>], there you could ask elements[0].id === "rawr" or whatever you like
I am trying to parse a large XML file using JavaScript. Looking online, it seems that the easiest way to start is to use the browser's DOM parser. This works, and I can get elements by ID. I can also get the "class" attribute for those elements, and it returns what I would expect. However, I don't appear to be able to get elements by class.
The following was tried in the latest Chrome:
xmlString = '<?xml version="1.0"?>';
xmlString = xmlString + '<example class="test" id="example">content</example>'
parser = new DOMParser();
xmlDoc = parser.parseFromString(xmlString,"text/xml");
xmlDoc.getElementById("example");
// returns the example element (good)
xmlDoc.getElementById("example").getAttribute("class");
// returns "test" (good)
xmlDoc.getElementsByClassName("test");
// returns [] (bad)
Any ideas?
This should get all elements of a given class, assuming that the tag name will be consistent.
var elements = xmlDoc.getElementsByTagName('Example');
var classArray = [];
for(var i=0;i<elements.length;i++){
if(elements[i].className=="test"){
classArray.push(elements[i])
}}
You can use JQuery to parse an XML file by using a class selector. http://jquery.com
Updating the parser type to HTML as opposed to XML should work.
parser = new DOMParser();
xmlDoc = parser.parseFromString(xmlString,"text/html")