js 如何递归dom JSON?

JavaScript08

js 如何递归dom JSON?,第1张

你好,我给你写了一个函数:

function nodeTree(node) {

    var root = node.tagName,

        tree = '<span style="color:#fff">' + root + '</span><br>',

        output = '',

        kcolors = ['#cc99cc', '#78dead', '#3ba264', '#ffcc54'],

        vcolors = ['#bb512d', '#6798e8', '#f3825b', '#c1cff4']

    function listObj(obj, _root) {

        var first = true,

            root = _root

        for (var k in obj) {

            if (first) {

                root += '::' + k

                first = false

            }

            var deep = root.split('::').length - 1,

                v = typeof(obj[k]) == 'function' || typeof(obj[k]) == 'string' || ('' + obj[k]).indexOf('function') === 0 ? typeof(obj[k]) : obj[k]

            tree += '<span class="gray">&nbsp&nbsp&nbsp' + '|....'.repeat(deep - 1) + '|.. </span><span style="color:' + kcolors[deep - 1] + '">' + k + '</span>: <span style="color:' + vcolors[deep - 1] + '">' + v + '</span><br>'

            if ((Object.prototype.toString.call(obj[k]) === '[object Object]' || Object.prototype.toString.call(obj[k]).match(/^\[object\sHTML[^I]/)) && deep < 3) {

                listObj(obj[k], root)

            }

        }

        return tree

    }

    tree = listObj(node)

    document.body.style.backgroundColor = '#2d2d2d'

    document.body.style.color = '#fff'

    document.body.innerHTML = tree

}

使用方法很简单,打开任意页面,在控制台先执行上面的函数声明,然后调用函数显示指定节点的属性列表:

nodeTree(document.body) // or

nodeTree(document.getElementsByTagName('div')[0])

返回结果直接就会覆盖body中的内容,并高亮缩进显示,查看非常方便

递归显示内容比较多,执行会略慢,现在控制在显示三级,调用时需略作等待

希望是你想要的结果,望采纳~~

json的“亲爸”就是JavaScript,还用转吗?

有2种方法直接使用json数据:

var jsonObject = eval("(" + jsonString + ")")

var jsonObject = JSON.parse(jsonString)

如果你想遍历转换后的json对象,可以用for in语句,具体用法请查阅JavaScript API。

递归经常碰到的问题了。

出问题的地方是 Run(temp,path)

既然是递归的调用 而且这个函数本身 有 return 值 那么 你应该在

调用 Run(temp,path)的时候 接收他的返回值

应该写成 value = Run(temp,path)

1. 现在你可以设成 局部变量 var value 了。

之所以出现undefined就是因为

return value 这行代码 就执行了 1次 也就是 第一个执行 var test=Run(myjson,mypath)的时候

这个时候 value 变量还没有定义出来, value是在 最后一次执行 Run(temp,path)的时候才定义的,而需要把这个 返回出来 并接收 才有效。

2. json=json[path[0]],

这个地方 不会报错 你是写错了代码

你如果 把这个地方 写成 json=json[path[0]],

那么下面 Run(temp,path)是不是也应该写成 Run(json,path)呢?

这样就不会报错。

3. 在javascript里 数组和 对象 都是属于 引用类型的, 这是为了 节省内存空间。

其实道理简单, var a = {b:1} 这个时候 a变量里面 存储的是 保存这个 对象的内存地址,

打个比方 这个对象是一个宝箱 他是隐藏在内存的, a变量里面是打开这个宝箱的钥匙和地图

那么 b=a的时候 只是 复制了 钥匙和地图, 宝箱还是一个, 所以这个时候 a 和b 是指同一个对象的。

最后代码 修改后是这样

function Run(json,path){

if(path.length<=1){

var value=json[path[0]] // 如果这里换成var value=json[path[0]]结果是undefined

} else {

var temp

json=json[path[0]] //这里为什么不能用 json=json[path[0]]

path.splice(0,1)

value = Run(json,path)

//arguments.callee(temp,path)

}

return value

}

var myjson={a:1,b:{c:{e:3},d:4}}

var mypath=['b','c','e']

var test=Run(myjson,mypath)

alert(test)