javascript - 选择要序列化的属性

Question

当使用 new XMLSerializer().serializeToString() 将 div 序列化为字符串时，我想选择要序列化的 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 测试