JavaScriptのオブジェクトをDOMも含めてJSON化っぽくできないかと思って頑張ってみたけどダメだった...。
DOMは循環参照するため、「JSON.stringify(window)」を実行すると「TypeError: Converting circular structure to JSON」となる。
一度参照したDOMは走査しないようにすると、今度は「TypeError: Accessing selectionEnd on an input element that cannot have a selection.」が発生した。これはフォーカスが当たってないinput要素のselectionEndを参照してしまったため。
じゃあ、例えばDOM要素はそのまま文字化してしまおうと考えた。例えば、div要素は「[object HTMLDivElement]」のようになる。実行してみると「RangeError: Maximum call stack size exceeded」...。
ダメだこりゃ...。
以下、コード。
DOMは循環参照するため、「JSON.stringify(window)」を実行すると「TypeError: Converting circular structure to JSON」となる。
一度参照したDOMは走査しないようにすると、今度は「TypeError: Accessing selectionEnd on an input element that cannot have a selection.」が発生した。これはフォーカスが当たってないinput要素のselectionEndを参照してしまったため。
じゃあ、例えばDOM要素はそのまま文字化してしまおうと考えた。例えば、div要素は「[object HTMLDivElement]」のようになる。実行してみると「RangeError: Maximum call stack size exceeded」...。
ダメだこりゃ...。
以下、コード。
var DOMJson=function(obj){
return JSON.stringify(
obj,
(
function(){
var ary=[];
return function(k,v){
if(ary.indexOf(v)==-1){
ary.push(v);
var s=Object.prototype.toString.apply(v);
if(/\[object HTML[A-Za-z]*Element\]/.test(s)){
return s;
}else{
return v;
}
}else{
return "[reflexive]";
}
}
}
)(),
4
);
}
console.log(DOMJson({a:3,b:"abc",ary:[1,2,3,location]})); //=> OK!
console.log(DOMJson({win:window})); //=> RangeError: Maximum call stack size exceeded
console.log(DOMJson({doc:document})); //=> RangeError: Maximum call stack size exceeded
return JSON.stringify(
obj,
(
function(){
var ary=[];
return function(k,v){
if(ary.indexOf(v)==-1){
ary.push(v);
var s=Object.prototype.toString.apply(v);
if(/\[object HTML[A-Za-z]*Element\]/.test(s)){
return s;
}else{
return v;
}
}else{
return "[reflexive]";
}
}
}
)(),
4
);
}
console.log(DOMJson({a:3,b:"abc",ary:[1,2,3,location]})); //=> OK!
console.log(DOMJson({win:window})); //=> RangeError: Maximum call stack size exceeded
console.log(DOMJson({doc:document})); //=> RangeError: Maximum call stack size exceeded