我正在尝试掌握保存(序列化)和还原(反序列化)DOM选择或范围的最佳方法.这里有一篇关于将范围对象字符串化的文章,但是坦率地说,它实际上并没有用.

这种情况是使用Adobe Air的Webkit视图的交互式教科书.我有静态(内置)html内容,用户可以突出显示和添加书签(注释).这种机制都可以使用,但是我需要能够存储和恢复这些注释.我宁愿不存储DOM的修改版本,而是使用静态版本,然后重新应用我存储在SQLite DB中的用户注释以及其他所需的元数据. DOM操作对我来说是很新的东西,到目前为止,我对DOM :: range进行序列化的尝试都失败了.但是我意识到,实际上我似乎只需要start和end容器以及start和end偏移量.然后,我可以使用document.createRange()重新创建范围.

我可以使用的指导是对起始容器和结束容器进行序列化的最佳方法.我的第一个想法是xpath,但是到目前为止,我的尝试还很短.看一下DOM :: Range的Mozilla文档似乎很简单,但是创建一个可靠的xpath来还原范围对我来说并不是一件容易的事.

解决方法:

的HTML

<div>
    <div id="container" style="background-color: red;">
        <p id="paraText">Text</p>
    </div>
</div>

的JavaScript

function serialize(node) {
    if (typeof XMLSerializer != "undefined") {  // Firefox, etc.
        return (new XMLSerializer()).serializeToString(node);
    }
    else if (node.xml) {  // IE
        return node.xml;
    }
};

function parseXMLString(xml) {
    if (typeof DOMParser != "undefined") {  // Firefox, etc.
       var dp = new DOMParser();
       return dp.parseFromString(xml, "application/xml");
    }
    else if (typeof ActiveXObject != "undefined") {  // IE
        var doc = XML.newDocument();
        doc.loadXML(xml);
        return doc;
    }
};

var contextNode = document.getElementById('container');
var xmlString = serialize(contextNode);
var doc = parseXMLString(xmlString);

// Get elements from document using XPath
var xpathResult = doc.evaluate('//.', doc.firstChild, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);

// Insert elements back into document (I used replace in order to show that the document is actually changed)
contextNode.parentNode.replaceChild(xpathResult.singleNodeValue.firstChild, contextNode);