DOM（Document Object Model）是HTML和XML文檔的編程接口。在瀏覽器中打開一個(gè)網(wǎng)頁時(shí)，瀏覽器會將HTML代碼解析成一棵DOM樹，每個(gè)節(jié)點(diǎn)都可以被JavaScript操作。

將DOM節(jié)點(diǎn)轉(zhuǎn)化為JSON（JavaScript Object Notation）格式的數(shù)據(jù)，在前端開發(fā)中非常常用。因?yàn)镴SON格式的數(shù)據(jù)可以被各種編程語言和系統(tǒng)輕松解析和處理，這使得我們可以輕松地從瀏覽器中提取所需的數(shù)據(jù)。

// DOM節(jié)點(diǎn)轉(zhuǎn)化為JSON格式數(shù)據(jù)的函數(shù)
function nodeToJson(node) {
var obj = {};
obj.nodeType = node.nodeType;
obj.nodeName = node.nodeName;
obj.nodeValue = node.nodeValue;
obj.textContent = node.textContent;
obj.attributes = {};
obj.children = [];
// 遍歷節(jié)點(diǎn)屬性并將其添加到JSON對象中
if (node.attributes) {
for (var i = 0; i< node.attributes.length; i++) {
var attr = node.attributes[i];
obj.attributes[attr.name] = attr.value;
}
}
// 遍歷子節(jié)點(diǎn)并將其添加到JSON對象中
if (node.childNodes.length >0) {
for (var i = 0; i< node.childNodes.length; i++) {
var child = node.childNodes[i];
obj.children.push(nodeToJson(child));
}
}
return obj;
}
// 示例：將DOM中id為example的元素轉(zhuǎn)化為JSON格式數(shù)據(jù)
var example = document.getElementById("example");
var json = nodeToJson(example);
console.log(json);

該函數(shù)通過遍歷DOM樹的節(jié)點(diǎn)，將節(jié)點(diǎn)的信息保存到JSON對象中。其中，節(jié)點(diǎn)類型、節(jié)點(diǎn)名稱、節(jié)點(diǎn)值、文本內(nèi)容、屬性和子節(jié)點(diǎn)信息都被保存在JSON對象中。使用該函數(shù)將DOM節(jié)點(diǎn)轉(zhuǎn)化為JSON數(shù)據(jù)后，我們可以使用JavaScript代碼對數(shù)據(jù)進(jìn)行操作和處理，這在前端開發(fā)中非常有用。