Search code examples
javascripthtmldomparser

DOM Parser giving error on img tag

Hi i am trying to parse img using DOM PARSER and it throws parse error for some reason. please help me find the solution. As far as i know image tag doesn't need closing tag and browser removes it on load which is creating the parsing issue.

enter image description here

Fiddle:

http://jsfiddle.net/ygR4L/

HTML:

<body>
    <img src="test">
</body>

or

<body>
    <img src="test"/>
</body>

or

<body>
    <img src="test"></img>
</body>

javascript:

var html = document.body.innerHTML;
function parseXML(html)
{
    var parser, componentDoc;
    if (window.DOMParser)
    {
        parser = new DOMParser(); // should work for FF and IE 9
        componentDoc = parser.parseFromString(html,"application/xhtml+xml");//this line must be creating the issue. which mime type is better 
    }
    else
    {
        componentDoc = windowsParse(html);
    }
    return componentDoc;
} 

var component = parseXML(html);
console.log(component);
Solution

  • An image tag, after being handled by the DOM parser, is internally treated as:

    <img src="test">

    Notice that it is not self-closing (that doesn't exist in HTML), nor does it have a closing tag (because <img> does not have </img>).

    (To demonstrate this, try console.log(html);)

    As such, the HTML you are trying to parse is... well, just an opening tag. But you're telling it to parse as XHTML+XML, which does not have this rule on <img> tags.

    You could potentially use text/html as the type of document, however keep in mind that this will generate a bare-bones <html><head></head><body><img></body></html> structure.