在 JavaScript 中，如何将 DOM 的一部分序列化为 XHTML？

发布于 2024-12-06 20:37:29 字数 360 浏览 0 评论 0原文

我想将 DOM 的一部分序列化为 XHTML（有效的 XML）。假设我在中只有一个元素，并且这是我想要序列化的元素：

<div>
    <hr>
    <img src="/foo.png">
</div>

有了这个，document.innerHTML 几乎可以满足我的需求，除非它返回 HTML，而不是 XHTML（即

和将无法正确关闭）。由于 innerHTML 不能解决问题，我如何将部分 DOM 序列化为 XHTML？

原文

I would like to serialize part of the DOM to XHTML (valid XML). Let's assume I have just one element inside <body>, and that this is the element I want to serialize:

<div>
    <hr>
    <img src="/foo.png">
</div>

With this, document.innerHTML gives me almost what I want, except it returns HTML, not XHTML (i.e. the <hr> and <img> won't be properly closed). Since innerHTML doesn't do the trick, how can I serialize part of the DOM to XHTML?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

吐个泡泡 2024-12-13 20:37:29

我不确定是否可以选择使用其他语言（在 JavaScript 引擎之上）。如果这有任何帮助，这将是 XQuery (XQIB) 的执行方式：

<script type="application/xquery">
  serialize(b:dom()//div)
</script>

例如，在以下页面中，序列化的 XHTML 在 div 标记之后以文本形式写入页面上，而不是 script 标记

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>   
    <title>Serializing part of the DOM</title>
    <meta charset="UTF-8"/>
    <script type="text/javascript" src="mxqueryjs/mxqueryjs.nocache.js"></script>
  </head>
  <body>
    <div>
      <hr>
      <img src="/foo.png">
    </div>
    <script type="application/xquery">
      serialize(b:dom()//div)
    </script>
  </body>
</html>

： HTML DOM 映射到 XQuery 数据模型（XML 之上的数据模型）。 b:dom() 返回页面的文档节点， //div 导航到所有后代 div 标签。然后，序列化函数将其序列化为字符串。

但是，这适用于 IE9+（不是 6+）以及最新版本的 Chrome、Firefox、Safari、Opera。

I am not sure if using another language (on top of the JavaScript engine) is an option. If this is of any help, this would be the XQuery (XQIB) way of doing it:

<script type="application/xquery">
  serialize(b:dom()//div)
</script>

For example, in the following page, the serialized XHTML is written as text on the page instead of the script tag, after the div tag:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>   
    <title>Serializing part of the DOM</title>
    <meta charset="UTF-8"/>
    <script type="text/javascript" src="mxqueryjs/mxqueryjs.nocache.js"></script>
  </head>
  <body>
    <div>
      <hr>
      <img src="/foo.png">
    </div>
    <script type="application/xquery">
      serialize(b:dom()//div)
    </script>
  </body>
</html>

The HTML DOM is mapped to the XQuery data model (a data model on top of XML). b:dom() returns the document node of the page, and //div navigates to all descendant div tags. The serialize function then serializes this to a string.

However, this will work for IE9+ (not 6+) and recent versions of Chrome, Firefox, Safari, Opera.

回复收藏 0 原文

最美的太阳 2024-12-13 20:37:29

这不是经过测试的代码，但我会递归扫描父元素的子元素并构建 XHTML，如下所示：

var parent;
var parse = function(el) {
  var res = "";
  for(var i=0; i < el.childNodes.length; i++) {
    var child = el.childNodes[i];
    res += "<"+child.tagName;
    // scan through attributes
    for(var k=0; k < child.attributes.length; k++) {
      var attr = child.attributes[k];
      res += " "+attr.name+"='"+attr.value+"'";
    }
    res += ">";
    res += parse(child);
    res += "</"+child.tagName+">";
  }
  return res;
}
var xhtml = parse(parent);

this is not tested code, but I would scan recursively children of the parent element and build XHTML like this:

var parent;
var parse = function(el) {
  var res = "";
  for(var i=0; i < el.childNodes.length; i++) {
    var child = el.childNodes[i];
    res += "<"+child.tagName;
    // scan through attributes
    for(var k=0; k < child.attributes.length; k++) {
      var attr = child.attributes[k];
      res += " "+attr.name+"='"+attr.value+"'";
    }
    res += ">";
    res += parse(child);
    res += "</"+child.tagName+">";
  }
  return res;
}
var xhtml = parse(parent);

回复收藏 0 原文

沉鱼一梦 2024-12-13 20:37:29

Sarissa，跨浏览器 Javascript 兼容性库，为缺少 XMLSerializer 的浏览器提供了一个 XMLSerializer 实现：

http://dev.abiss.gr/sarissa/jsdoc/symbols/XMLSerializer.htm

他们还有一个如何使用它的示例，这只是：

var xmlString = new XMLSerializer().serializeToString(someXmlDomNode);

根据他们的说法，浏览器对其库的支持很好：

支持的浏览器包括 Mozilla - Firefox 及其系列、MSXML3.0 及更高版本的 Internet Explorer、Konqueror（肯定是 KDE 3.3+）、Safari 和 Opera。

Sarissa, the cross-browser Javascript compatibility library has an XMLSerializer implementation for browsers that lack one:

http://dev.abiss.gr/sarissa/jsdoc/symbols/XMLSerializer.htm

They also have an example of how to use it, which is just:

var xmlString = new XMLSerializer().serializeToString(someXmlDomNode);

According to them, the browser support for their library is good:

Supported browsers are Mozilla - Firefox and family, Internet Explorer with MSXML3.0 and up, Konqueror (KDE 3.3+ for sure), Safari and Opera.

回复收藏 0 原文

~没有更多了~

关于作者

↘人皮目录ツ

暂无简介

0 文章

0 评论

25 人气

关注发私信

友情链接

文江博客

在 JavaScript 中，如何将 DOM 的一部分序列化为 XHTML？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

已经忘了多久

15867725375

LonelySnow

走过海棠暮

轻许诺言

信馬由缰

友情链接

在 JavaScript 中，如何将 DOM 的一部分序列化为 XHTML？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

已经忘了多久

15867725375

LonelySnow

走过海棠暮

轻许诺言

信馬由缰

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。