js 如何递归dom JSON？

Posted 2023-03-23

类似这样的dom结构
<div class="a">

<div class="a1">
<div class="a11"></div>

</div>
<div class="a2"></div>
<div class="a3"></div>
</div>
<div class="b">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
</div>
想用js递归生成这样的JSON树结构
[

className:"a",

children:[

className:"a1",
children:[
className:"a11",
children:[]

]

,


className:"a2",
children:[]
,

className:"a3",
children:[]

]

,


className:"b",

children:[


className:"b1",

children:[]

,


className:"b2",

children:[]



className:"b3",

children:[]



]


]
a b 标签的父级是body
我想传一个body 的参数进一个方法 例如
fn( document.body )
然后返回 以上JSON

你好，我给你写了一个函数：

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吗？ 麻烦您了

追答

好吧，帮人帮到底，送佛送上西，来个完整版的，代码超限，贴不上来，请下载附件：

console.log只是为了在控制台查看输出的json结构是否正确，实际使用需删除

wrap只是为了显示最终结果新增的标签，与题中所列结构无关，请自行删除

参考技术A 你的意思是获取这些div的className，然后添加到json中？

Vue.js中如何操作DOM

【中文标题】Vue.js中如何操作DOM

【英文标题】：How to operate DOM in Vue.js

【发布时间】：2019-04-19 05:27:51

【问题描述】：

在这种情况下，我使用 v-for 将 JSON 中的大量数据显示为单独的按钮。我想要做的是当我单击其中一个按钮时，按钮的背景颜色会改变。 我想使用@click 将函数绑定到每个按钮，并在该函数中执行 像这样

theButtonDOM.style.backgroundColor = 'black';

那么，我怎样才能得到 div 元素由 v-for 生成的 DOM？ 或者任何其他解决这个“背景颜色变化”问题的解决方案？

【参考方案1】：

任何时候你在 Vue 模板中触发点击事件，你都可以通过添加特殊变量 $event 作为函数的参数来访问该事件。

<button @click="my_method($event, other_argument)"></button>

然后在方法内部访问事件的目标：

methods: 
    my_method(event, other_paramethers) 
        let button = event.target

即使只是将方法绑定到 @click 事件而没有任何参数，您也可以将事件作为您的第一个参数来访问。

<button @click="my_method"></button>
...
methods: 
    my_method($event) 
        let button = $event.target

然后你就可以用你的按钮玩了。

查看this *** question 和the Vue documentation 了解更多详情。

【参考方案2】：

我假设您希望按钮充当单独的开关而不是 radio group，正如 @eag845 的回答中所实现的那样。

---

您可以向您的 JSON 对象添加一个“clicked”布尔属性。

arrayOfJSONObjects.forEach(object => object.clicked = false); // Add 'clicked' attribute and init to false

然后使用该属性作为条件，使用v-bind:class 或:class 绑定CSS 类，然后在@click 或您放在@click 中的任何事件处理函数中切换属性。

<button
    v-for="btn in arrayOfJSONObjects"
    :class=" 'button--activated': btn.clicked "
    @click="btn.clicked = !btn.clicked"
>btn.foo</button>

风格化

.button 
  background-color: white;

.button--activated 
  background-color: black;

【参考方案3】：

您可以使用@click 和v-bind:class。当您单击一个项目时，其索引将存储在selectedItem 中。然后v-bind:class 会自动将类添加到index 等于selectedItem 的项目中。

new Vue(
  el: '#app',
  data: 
    selectedItem: ""
  ,
  computed:,
  methods: 
  
)

.selectedItemClass 
  background-color:green

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">

  <div v-for="(item,index) in ['aa','bb','cc']"
    v-bind:class="  selectedItemClass : (selectedItem === index) "
    @click="selectedItem = index"
  >item</div>
  
</div>

【参考方案4】：

你可以传$event

<button @click="changeColor($event)"></button>

然后在你的方法中

this.changeColor = function(evt) evt.target.style.backgroundColor = 'red';