document.documentElement function does not display proper result - javascript

I am trying to parse XML file using java-script. According to the tutorial I read I found That To get the Root element, I have to use document.documentElement.
I use that syntax but when I tried to display the returned value from that Syntax, the browser displays [object HTMLHtmlElement].
My question is: (1) Why I am getting [object HTMLHtmlElement] displayed in the web browser.
(2) According to the below posted XML-File, What should I expect the output to be
after usingrootElement = document.documentElement;
Please find below the code I used(Javascript) and the XML file.
Javascript
function findWriter()
{
var schriftstellerKnoten, SpracheKnoten;
var FuellerKnoten, DichtungKnoten, Anzeige, rootElement;
rootElement = document.documentElement;
document.write(rootElement);
}
XML file:
<?xml version="1.0" ?>
<Schriftsteller>
<Englischsprache>
<Dichtung>
<fueller>
<name>Jane Austin</name>
<name>Rex Stout</name>
<name>Dashiell Hammett</name>
</fueller>
</Dichtung>
</Englischsprache>
</Schriftsteller>

document.documentElement will get you the root HTML tag of the page in which your javascript is present.
To fetch and display the XML content, you must get access to the XML document and then use it to load the XML file like the following:
function findWriter()
{
var schriftstellerKnoten, SpracheKnoten;
var FuellerKnoten, DichtungKnoten, Anzeige, rootElement;
if (window.XMLHttpRequest){
xhttp=new XMLHttpRequest(); //For non IE browsers
}
else { // for IE 5/6
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET","test.xml",false);
xhttp.send();
xmlDoc=xhttp.responseXML; //Fetch the XML file contents
var nameEl = xmlDoc.documentElement.getElementsByTagName("name"); //Get all <name> tags in it
for (i=0; i<nameEl.length; i++){
document.write("Name" + i + ": " + nameEl[i].firstChild.nodeValue + "<br/>"); //write names
}
}

Related

How to display the xml content in the browser

I have a variable in my JavaScript and I have retrieved and stored a huge XML content in this variable like
var content = ""
the content variable will hold huge XML content.
From my same JavaScript file, I am opening a new window using
var mywindow = window.open("\test.html")
and I am using document.write like
mywindow.document.write(content)
to display the stored XML content in the new window.
I am not using any XSLT or any other style sheet in my JavaScript file.
The content is loaded in the window, however the XML content is not loaded in the browser properly, I can see the exact content when I see the source of the page.
How to display the XML content in the browser directly?
try this ,
xmlhttp.open("GET","yourfile.xml",true);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
<script type="text/javascript">
var xhr= window.XMLHttpRequest? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
xhr.onreadystatechange= function() {
if (this.readyState===4 || this.status===200)
populateTable(this.responseXML);
};
xhr.open('GET', 'yourfile.xml', true);
xhr.send();
function populate(xml) {
var content= xml;
myElem.innerHTML += content;
};
</script>
document.write() will actually create the tags of your XML data rather than displaying it as raw text.
Something like this should work:
var xml = '<hello>world</hello>';
if (document.body.innerText !== undefined) {
document.body.innerText = xml;
}
else {
document.body.textContent = xml;
}

load an xml file using javascript i

i am trying to upload an xml file using javascript. my javascript code is given below:
var xmlDoc =null;
var abc = new Array();
if (window.ActiveXObject){
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
else if (document.implementation.createDocument){
xmlDoc=document.implementation.createDocument("","",null);
}
else{
alert('Browser cannot handle this script');
}
if (xmlDoc!=null){
xmlDoc.async=false;
xmlDoc.load("employee.xml");
var x = xmlDoc.getElementsByTagName("EMP");
for (i=0;i<x.length;i++)
{
abc[0] = x[0].getElementsByTagName("ID")[0].childNodes[0].nodeValue;
document.write("a is "+abc[0]);
abc[1] = x[0].getElementsByTagName("ID1")[0].childNodes[0].nodeValue;
document.write("<br>b is "+abc[1]);
}
}
and my xml file is:
<EMPLOYEE>
<EMP>
<ID>10.99</ID>
<ID1>20.54</ID1>
</EMP>
</EMPLOYEE>
the code is working properly in IE as well as firefox but in Google Chrome, it is not showing anything. can some one tell me where i am wrong or how to correct it.
In order to get the XML file in Chrome you need to execute a GET. For security reasons you cannot load it in a straight forward manner from the file system. Here's code:
var xmlhttp = new window.XMLHttpRequest();
xmlhttp.open("GET", xmlsrc, false);
xmlhttp.send(null);
var xmlDoc = xmlhttp.responseXML.documentElement;

JavaScript breaks when reading a self closing tag in XML

I am writing a XML file into a HTML file using JavaScript.
Here is the JavaScript I am using:
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","file.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var x=xmlDoc.getElementsByTagName("tagParent");
document.write(x.getElementsByTagName("tagChild")[0].childNodes[0].nodeValue);
The script will working for everything except for self closing xml elements (<element/>).
Example XML file:
<?xml version="1.0" encoding="ISO-8859-1"?>
<tagParent>
<tagChild/>
</tagParent>
The script breaks and stops when it reaches a self closing tag.
What do I need to do to get it either output 0 or ""? Why is it breaking?
It is breaking because the element is empty. It doesn't have any children so when you try to get the nodeValue of the first child, it errors because undefined doesn't have a 0 property.
You want something along the lines of:
var dataNodes, value;
dataNodes = x.getElementsByTagName("tagChild")[0].childNodes;
if (dataNodes.length) {
value = dataNodes[0].nodeValue;
} else {
value = 0;
}
document.write(value);

xml parsing in firefox not working

I have a xml file whose content is
<?xml version="1.0" encoding="UTF-8"?>
<ReturnMessage>
<root>ReturnMessage</root>
<cancelMessage>Request cancelled. /cancelMessage>
<confirmMessage>Click 'Create Document' to continue.</confirmMessage>
</ReturnMessage>
I load my xml like this
var result = responseText;
if (document.implementation && document.implementation.createDocument)
{
alert("firefox");
xml=document.implementation.createDocument("","",null);
xml.load(result);
}
When execute the below code
var cnfmMsgCnt = xml.getElementsByTagName("confirmMessage");
alert(cnfmMsgCnt.lenght);
it alerts a 0 is firefox.
var displayMsg = xml.getElementsByTagName("confirmMessage").item(0).text
also does not provide any output in FF.
It works perfect in IE but it is not working in Firefox.
The method load() takes a file name as argument, not an XML string. See https://developer.mozilla.org/en/DOM/document.load (and more normative: W3C DOM Level 3 Load & Save module)
What you probably want is explained here https://developer.mozilla.org/en/Parsing_and_serializing_XML
var sMyString = "<a id=\"a\"><b id=\"b\">hey!<\/b><\/a>";
var oParser = new DOMParser();
var oDOM = oParser.parseFromString(sMyString, "text/xml");

HTML entities not recognized and not displayed when retrieved from ajax

This happens in all tested browsers (Chrome, Firefox, Opera ...)
Some HTML entities are are swallowed and not displayed when retrieved from ajax. The same HTML entity is displayed when it is hardcoded in the HTML source file.
Here is the actual output: (the entity is not display nether in the web page nor in the console)
Here is the expected output:
Here is the javascript that retrieves the entity:
<html><head><script type="text/javascript"> function injectEntity(){ var xhr = new XMLHttpRequest(); xhr.open("POST", "entity.php", true); xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ var doc = xhr.responseXML; console.log(xhr.responseText); var div = document.getElementById("container"); div.appendChild(doc.getElementById("the-entity")); } } xhr.send(null); }</script></head><body> inject the following entity: ’ <div id="container"> </div></body></html>
And here is the php file that is used to retrieve the entity:
<?phpheader('Content-type: application/xml; charset=UTF-8');$xml = new DOMDocument('1.0', 'utf-8');$tag = $xml->createElement('b','’');$tag->setAttribute("id","the-entity");$xml->appendChild($tag);echo $xml->saveXML();?>
You want ’, not ’ (which is an unprintable control character)

Categories