选择要序列化的属性

Question

使用div将new XMLSerializer().serializeToString()序列化为字符串时，我想选择要序列化的DOM属性。

示例：

var blah = document.getElementById('blah');
var blah1 = document.getElementById('blah1');
blah1.style.top = "100px";
console.log(new XMLSerializer().serializeToString(blah));

#blah1 { position: absolute; }

<div id="blah"><div id="blah1">Bonjour1</div></div>

例如，而不是......

<div xmlns="http://www.w3.org/1999/xhtml" id="blah"><div id="blah1" style="top: 100px;">Bonjour1</div></div>

...我想序列化除top样式属性之外的所有内容：

<div xmlns="http://www.w3.org/1999/xhtml" id="blah"><div id="blah1">Bonjour1</div></div>

如何在使用new XMLSerializer().serializeToString()时选择要序列化的属性？

Answer 1

1. 使用node.cloneNode(true)深度克隆树并插入DocumentFragment
2. 使用fragment.querySelectorAll("[style]")查找具有您要删除的属性的所有元素
3. 从匹配元素中删除属性
4. 序列化片段

---

var blah = document.getElementById('blah');
var blah1 = document.getElementById('blah1');

blah1.style.top = "100px";

var frag = new DocumentFragment()
frag.appendChild(blah.cloneNode(true))

for(var e of frag.querySelectorAll("[style]")) {
   e.removeAttribute("style")
}

console.log(new XMLSerializer().serializeToString(frag))

使用Firefox 33进行测试