在前端開發中，DOM對象與JSON的相互轉換是一種非常常見的操作。DOM（Document Object Model）是一種表示文檔結構的對象樹，而JSON（JavaScript Object Notation）則是一種輕量級的數據交換格式。在前后端數據傳輸中，我們經常需要將DOM對象轉換成JSON格式或將JSON格式轉換成DOM對象。

// 一個簡單的DOM對象示例
var dom = {
tagName: 'div',
props: {
className: 'container',
id: 'myDiv'
},
children: [
{
tagName: 'p',
props: null,
children: ['Hello World']
}
]
}
// 將DOM對象轉換成JSON
var json = JSON.stringify(dom);
console.log(json);
// 將JSON格式轉換成DOM對象
var obj = JSON.parse(json);
console.log(obj);
// 創建DOM對象
function createDOM(obj) {
var $el = document.createElement(obj.tagName);
if (obj.props) {
for (var prop in obj.props) {
$el.setAttribute(prop, obj.props[prop]);
}
}
if (obj.children) {
for (var i = 0; i< obj.children.length; i++) {
var $child = createDOM(obj.children[i]);
$el.appendChild($child);
}
}
return $el;
}
// 使用上述DOM對象
var $dom = createDOM(obj);
document.body.appendChild($dom);

在上述代碼中，我們首先定義了一個簡單的DOM對象，并通過JSON.stringify()方法將其轉換成了JSON格式。接著，我們使用JSON.parse()方法將JSON格式轉換回了DOM對象。最后，我們再定義了一個createDOM()方法，該方法接受一個DOM對象作為參數，并將其轉換成真實的DOM元素。通過這個方法，我們能夠將之前轉換后的JSON格式轉換成真正的DOM元素，并插入到頁面中。