What is a dom tree? In short, DOM is the Document Object Model, which provides a structured representation for documents and defines how to access the document structure through scripts. DOM is composed of nodes. After the HTML is loaded, the rendering engine will generate a DOM tree in memory based on the HTML document. This article uses a small case to traverse the dom tree recursively. The core of the method is to determine whether the incoming data is an array, and then traverse the root node. Note that there must be an end condition when using recursion.
The following is part of the case code
<style>
*{
margin:0 10px;
}
.main>div{
margin-top: 10px;
}
.main>div>p{
width: 100px;
height: 20px;
border: 1px solid red;
}
.main>div>div>p{
width: 100px;
height: 20px;
border: 1px solid pink;
margin-left: 10px;
}
.main>div>div>div>p{
width: 100px;
height: 20px;
border: 1px solid blue;
margin-left: 20px;
}
</style>
</head>
<body>
<div class="main">
</div>
</div>
<script>
let arr=[
{
type:"digital",
data:[
{
type:"Phone",
data:["phone1","phone2","phone3"]
},
{
type:"Computer",
data:["computer","computer2","computer3"]
}
]
},
{
type:"Book",
data:[
{
type:"Math",
data:["math1","math2","math3"]
},
{
type:"Physics",
data:["physics1","physics2","physics3"]
}
]
}
];
//
function fun(arr,element){
//
for(let i=0;i<arr.length;i++){
//
let box=document.createElement("div");
// if(i===1){
box.innerHTML=`<p>${arr[i].type||arr[i]}</p>`;
// }
element.appendChild(box);
if(arr[i].data){
fun(arr[i].data,box);
}
}
}
fun(arr,document.querySelector(".main"))
</script>
Comments
Post a Comment