javascript – 强迫ie8中的dom rerender

我已经尝试了所有经典的技巧,让我的网页重新呈现在dom中所做的更改但没有任何效果.我已经试过了

element.className = element.className;

以及访问我改变的一部分dom,但这也不起作用.

这是我的代码. onl oad正文调用queryDB,在html中有一个id为“plants”的段落.到目前为止,此代码仅适用于firefox 3和chrome.

var timeout = 5000; //get new plants every 5 seconds

function queryDB() {
    responseDoc = getXMLFrom("ajax/getallplants.PHP");
    paragraph = document.getElementById("plants");
    table = document.createElement("table");
    table.setAttribute("class", "viewTable");

    //clean up the last query
    cleanUpLastResult(paragraph);

    //loop through the responseDoc and dynamically add plants
    if(plantsFound(responseDoc)) {
        for(i = 0; i < responseDoc.documentElement.childNodes.length; i++) {
            currentChild = responseDoc.documentElement.childNodes[i];

            row = document.createElement("tr");
            //old way of printing where the whole sci name and common name was just text
            /*paragraph.appendChild(document.createTextNode(responseDoc.documentElement.childNodes[i].firstChild.nodeValue));
            paragraph.appendChild(document.createElement("br"));*/

            //newer way of printing where the common name is bolded
            /*paragraph.appendChild(document.createTextNode(currentChild.firstChild.nodeValue + " "));
            commonName = document.createElement("b");
            commonName.appendChild(document.createTextNode(currentChild.getAttribute("commonname")));
            paragraph.appendChild(commonName);
            paragraph.appendChild(document.createElement("br"));*/

            //newest way of printing that prints to a table
            col1 = document.createElement("td");
            col1.setAttribute("class", "viewTable");
            col1.appendChild(document.createTextNode(currentChild.firstChild.nodeValue));

            col2 = document.createElement("td");
            col2.setAttribute("class", "viewTable");
            col2Bold = document.createElement("b");
            col2Bold.appendChild(document.createTextNode(currentChild.getAttribute("commonname")));
            col2.appendChild(col2Bold);

            row.appendChild(col1);
            row.appendChild(col2);

            table.appendChild(row);
        }

        paragraph.appendChild(table);

        paragraph.className = paragraph.className;
        paragraph.firstChild.className = paragraph.firstChild.className;
    }
    else {
        paragraph.appendChild(document.createTextNode("no plants currently entered"));
    }

    //re-add the callback
    setTimeout(queryDB, timeout);
}

function plantsFound(responseDoc) {
    if(responseDoc.documentElement == null) {
        return false;
    }
    else {
        if(responseDoc.documentElement.firstChild.nodeType == 3) {
            //text node so no children

            return false;
        }
        else {
            return true;
        }
    }
}

function cleanUpLastResult(paragraph) {
    //old way of cleaning up where everything was only a childnode of the paragraph
    /*while(paragraph.childNodes.length >= 1) {
        paragraph.removeChild(paragraph.firstChild);
    }*/

    /* The three possible cases:
     * 1 first execution time so paragraph has no child
     * 2 nth execution time but nothing was found in db so only a textnode
     * 3 nth execution and there's a whole table to clean up
     */
    if(paragraph.firstChild == null) {
        //nothing there so nothing to delete
    }
    else if(paragraph.firstChild.nodeValue != null) {
        //no table printed, just remove that text node

        paragraph.removeChild(paragraph.firstChild);
    }
    else {
        //delete the whole table

        table = paragraph.firstChild;

        //remove each row
        while(table.childNodes.length >= 1) {
            //remove the two columns in it and their stuff

            row = table.firstChild;

            col1 = row.firstChild;
            col2 = row.lastChild;

            //remove column1 and it's text node
            col1.removeChild(col1.firstChild);
            row.removeChild(row.firstChild);

            //remove column2, it's bold node and its text node
            col2.firstChild.removeChild(col2.firstChild.firstChild);
            col2.removeChild(col2.firstChild);
            row.removeChild(row.firstChild);

            table.removeChild(row);
        }

        //finally delete the table
        paragraph.removeChild(paragraph.firstChild);
    }
}

function getXMLFrom(url) {
    if(window.XMLHttpRequest) {
        //regular browser
        xmlhttp = new XMLHttpRequest();
    }
    else {
        //ie6
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET", url, false);
    xmlhttp.send();
    responseDoc = xmlhttp.responseDoc;

    if(responseDoc == null) {
        if(window.XMLHttpRequest && (typeof DOMParser != "undefined")) {
            //firefox

            var parser = new DOMParser();
            responseDoc = parser.parseFromString(xmlhttp.responseText, "text/xml");
        }
        else {
            //ie6 or ie7

            var doc = new ActiveXObject("Microsoft.XMLDOM");
            doc.async = true;
            doc.loadXML(xmlhttp.responseText);
            responseDoc = doc;
        }

        if(responseDoc == null) {
            alert("error in parser xml from: " + url);
        }

        return responseDoc;
    }
}

我还测试了responseDoc,我知道我从getallplants.PHP得到了正确的响应,它生成了各种植物的xml表示.有想法该怎么解决这个吗？此外,由于各种原因,我不能使用JQuery.

编辑我有一个准好的解决方案,我在另一个SO线程上找到.如果我添加document.write(document.all [0] .innerHTML);在我将表格设置为段落的子表后查询DB.唯一的问题是,如果我这样做,页面将不会每5分钟刷新一次.因此,如果它改变了数据库,那么必须刷新这个页面,这使得javascript异步从数据库中获取信息的目的失败了.

解决方法:

几个星期前,我遇到了类似的问题,并且在body元素中添加了一个类.之后可以删除添加的类.