Internet Explorer 11 won't read "getElementById" for XML and returns null

I wrote a webpage (with HTML, CSS, and javascript) which loads information from an XML file to "fill in the blanks" in the elements on the page. Everything works perfectly unless I load the page in Internet Explorer (I'm using IE 11.0).

I've had a few problems and worked around a couple of them, but new problems keep popping up, so I think I just don't understand how IE deals with XML.

The error I'm getting is:

Unable to get property 'querySelectorAll' of undefined or null reference

when I use the code:

selectedBookNodeList = bookDataDocument.getElementById(bookId);

In the IE debugger it shows "selectedBookNodeList" as NULL, but the bookDataDocument is NOT null. Again, this works perfectly fine in Chrome and Firefox (here's a link: http://ift.tt/11UrNHe).

Why is it NULL in IE11, but it works fine in the other browsers??

Here is all the code:

    var bookPage;

    var bookDataDocument;
    var XMLConnection;



    var bookDataRootNode;
    var selectedBookNode;

    var bookDescription;
    var bookDescription2;
    var bookDescription3;
    var bookImage;
    var bookTitle;
    var paperbackLink;
    var ebookLink;



function setupXML()
{

    if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  XMLConnection=new XMLHttpRequest();
  }
    else
  {// code for IE6, IE5
  XMLConnection=new ActiveXObject("Microsoft.XMLHTTP");
   }

    XMLConnection.open("GET", "novels/book_data.xml", false);
    XMLConnection.send(null);
    bookDataDocument = XMLConnection.responseXML;
}

    function setBook(bookId)
    {
        selectedBookNodeList = bookDataDocument.getElementById(bookId);

        bookTitle = selectedBookNodeList.querySelectorAll("title").item(0).childNodes[0].nodeValue;

        bookDescription = selectedBookNodeList.querySelectorAll("description").item(0).childNodes[0].nodeValue;

        bookDescription2 = selectedBookNodeList.querySelectorAll("description2").item(0).childNodes[0].nodeValue;

        bookDescription3 = selectedBookNodeList.querySelectorAll("description3").item(0).childNodes[0].nodeValue;

        ebookLink = selectedBookNodeList.querySelectorAll("ebookLink").item(0).childNodes[0].nodeValue;

        paperbackLink = selectedBookNodeList.querySelectorAll("paperbackLink").item(0).childNodes[0].nodeValue;

        bookImage = selectedBookNodeList.querySelectorAll("coverImage").item(0).childNodes[0].nodeValue;


        bookPage = document.getElementById("storiesWindow").contentWindow.document;

        bookPage.getElementById("bookTitle").innerHTML = bookTitle;
        bookPage.getElementById("description").innerHTML = bookDescription;
        bookPage.getElementById("description2").innerHTML = bookDescription2;
        bookPage.getElementById("description3").innerHTML = bookDescription3;
        bookPage.getElementById("buyEbookLink").href = ebookLink;
        bookPage.getElementById("buyPaperbackLink").href = paperbackLink;
        bookPage.getElementById("coverImage").src=bookImage;

    }

I'd really love a solution, but I'd love even more to understand the dynamics that I'm obviously not understanding. I want to use XML for other stuff in the future.