SOURCE

function DOM2JSON(node) {
    var obj = {};
    obj['tag'] = node.nodeName;
    obj['children'] = [];
    var child = node.children;
    for (var i = 0; i < child.length; i++) {
        obj['children'].push(DOM2JSON(child[i]))
    }
    return obj;
}

let root = document.getElementById('test');
console.log(JSON.stringify(DOM2JSON(root)));
document.getElementsByClassName('out-json')[0].innerText = JSON.stringify(DOM2JSON(root));
/*
let out = {
    "tag":"DIV",
    "children":[{
        "tag": "DIV",
        "children": [{"tag": "DIV", "children": [{"tag": "IMG", "children": []}]}, {
            "tag": "DIV",
            "children": []
        }, {
            "tag": "DIV",
            "children": [{"tag": "IMG", "children": []}, {
                "tag": "DIV",
                "children": [{"tag": "DIV", "children": [{"tag": "IMG", "children": []}]}, {
                    "tag": "DIV",
                    "children": []
                }]
            }]
        }]
    }]
}*/

<div id="test">
    <div class="row clearfix"  data-layout-value="4-4-4">
        <div class="col-md-4 column">
            <img src="http://placehold.it/200x150?text=Test4" alt='' data-widgetIdentity="c-c:3.0" data-styleId="4" />
        </div>
        <div class="col-md-4 column">
        </div>
        <div class="col-md-4 column">
            <img src="http://placehold.it/200x150?text=Test4" alt='' data-widgetIdentity="c-c:3.0" data-styleId="4" />
            <div class="row clearfix"  data-layout-value="6-6">
                <div class="col-md-6 column">
                    <img src="http://placehold.it/200x150?text=Test3" alt='' data-widgetIdentity="x-a:4.0" data-styleId="2"/>
                </div>
                <div class="col-md-6 column" data-empty="true">
                </div>
            </div>
        </div>
    </div>
</div>
<div class="out-json"></div>