DOM是文檔對象模型(Document Object Model)的縮寫,它是一種與平臺和語言無關(guān)的應(yīng)用程序接口(API),用于訪問和操作文檔。
JSON是JavaScript對象表示法(JavaScript Object Notation)的縮寫,它是一種輕量級的數(shù)據(jù)交換格式。
在開發(fā)中,我們可能會遇到需要將DOM節(jié)點轉(zhuǎn)換為JSON對象的場景,這時就需要使用到dom2json函數(shù)。
//定義一個dom2json函數(shù)
function dom2json(node) {
var obj = {};
//如果節(jié)點是元素節(jié)點,遍歷它的屬性
if (node.nodeType === 1) {
obj.nodeType = 'element';
obj.nodeName = node.nodeName.toLowerCase();
obj.attributes = {};
var attrs = node.attributes;
for (var i = 0; i< attrs.length; i++) {
obj.attributes[attrs[i].nodeName] = attrs[i].nodeValue;
}
//遍歷子節(jié)點
for (var j = 0; j< node.childNodes.length; j++) {
var child = node.childNodes[j];
//如果子節(jié)點是元素節(jié)點,則遞歸調(diào)用dom2json函數(shù)
if (child.nodeType === 1) {
if (!obj.childNodes) {
obj.childNodes = [];
}
obj.childNodes.push(dom2json(child));
//如果子節(jié)點是文本節(jié)點,則保存它的值
} else if (child.nodeType === 3) {
if (!obj.childNodes) {
obj.childNodes = [];
}
obj.childNodes.push(child.nodeValue);
}
}
//如果節(jié)點是文本節(jié)點,則保存它的值
} else if (node.nodeType === 3) {
obj = node.nodeValue;
}
return obj;
}
//調(diào)用dom2json函數(shù)
var node = document.getElementById('test');
var json = dom2json(node);
console.log(json);
上面的代碼中,dom2json函數(shù)首先判斷節(jié)點類型,如果是元素節(jié)點,則遍歷它的屬性并保存,然后遞歸遍歷其子節(jié)點。如果子節(jié)點是元素節(jié)點,則繼續(xù)遞歸調(diào)用dom2json函數(shù),如果是文本節(jié)點,則保存它的值。最終返回一個JSON對象。
通過調(diào)用dom2json函數(shù),我們可以將DOM節(jié)點和它的所有子節(jié)點轉(zhuǎn)換為JSON對象,方便后續(xù)的處理。
上一篇python 直線插補
下一篇vue為啥要異步