如何使用JavaScript阅读包含html标记的XML文件上的Childnode内容

Question

To read a child node content I use :

MYDATA = xhr.responseXML.getElementsByTagName("MenuItem")[INDEX].getElementsByTagName("PageContent")[0].childNodes[0].nodeValue;

sometimes when the childNode data contains an HTML tag (eg <b> or <br> tags), I have problems since they are counted like XML tags (like childnodes).

My question is how to get the entire data from a child node even if it contains other html tags

Example:

<MenuItem> 
    <MenuText>menu <b> text <b><MenuText>
</MenuItem >

would return "menu", but I want it to return: menu <b> text <b>

Answer 1

Yes, and no, depending on your parser. Reason for this is because all text nodes in XML are suppose to have < and > replaced with their htmlentity() counterparts, and all other special characters replaced with htmlspecialchars() . I'm fairly certain that it creates a new node, with the HTML tag as the name.

The only two solutions for this is to store the XML data into a string, use regex to take out the HTML tags (well, all the < and > characters for that matter), and replace them with the correct values I noted above, before you pass it to a parser ( parser.parseFromString() in javascript, given that 'parser' is a DOM parser). The other is to take the node, and then get the entire node's set of child nodes using a recursive loop, and then concatenate together their names and contents. The second method is more programming work, and more processing involved, and I suggest the simple remedy of regex and replacement of the characters.

Or, you can read about CDATA here , and escape the tags instead, by placing all of the content within a ![CDATA[] tag, but that's if you're the one creating that XML file. You should notify the webmaster for the site that you got the XML from, that the XML is incorrectly created, and the tags need to be escaped with the ![CDATA[] tag, or replaced the < and > with their htmlentity() counterparts. I suppose that you can also use regex to place the HTML code within a ![CDATA[] tag, but that's probably slower and less efficient than replacing the < and > tags.

Answer 2

The official W3C element property to return all text from an element and all it's descendants is part of DOM v3 and called textContent , but it's not supported in every browser yet (I'm looking at you IE; I think it's called innerText there) - if that is even relevant for you.

So your line of code would look something like this for your XML snippet:

MYDATA = xhr.responseXML.getElementsByTagName("MenuItem")[INDEX].getElementsByTagName("MenuText")[0].textContent;

That will not retain the HTML tags though. So in the end it depends on what you're trying to do with that XML. Do you want to add it to another DOM tree? If so, you can just take that element with all it's descendants and append it elsewhere.

MYDATA = xhr.responseXML.getElementsByTagName("MenuItem")[INDEX].getElementsByTagName("MenuText")[0].cloneNode(true);
someOtherElement.appendChild(MYDATA);

Otherwise you'd have to write a loop that will copy each node (text content is a node, too, just like whitespace) from source to destination and append it there.