一個盒子(DIV)里有若干個小盒子，每個小盒子里還可能有多個小盒子
多層盒子結構。每個盒子都有一個唯一的id和 name 屬性。現在給出一個盒子的 id
請找到這個盒子并打開，輸出這個盒子內部所有小盒子的id和 name，并繼續打開這些小盒子輸出id和 name(由外到內逐層打印)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Open Div</title>
</head>
<body><div id="box1" name="box1"><div id="box2" name="box2"><div id="box4" name="box4"></div></div><div id="box3" name="box3"><div id="box5" name="box5"><div id="box7" name="box7"></div></div><div id="box6" name="box6"></div></div></div><script>function findAndOpenBox(targetId) {const box = document.getElementById(targetId);if (!box) {console.log("盒子未找到");return;}openBox(box);}function openBox(box) {console.log("盒子ID:", box.id, "盒子名稱:", box.getAttribute("name"));const childBoxes = box.children;for (let i = 0; i < childBoxes.length; i++) {const childBox = childBoxes[i];console.log("子盒子ID:", childBox.id, "子盒子名稱:", childBox.getAttribute("name"));openBox(childBox);}}// 指定目標盒子的 IDconst targetBoxId = "box1";// 開始查找并打開盒子findAndOpenBox(targetBoxId);</script>
</body>
</html>先通過document.getElementById（）方法獲得指定id 的div DOM元素，然后向下遞歸調用開盒子方法。
getAttribute() 是一個用于獲取元素屬性值的方法。它允許你通過屬性名來獲取指定元素的屬性值。
children屬性可以返回一個類似數組的對象，其中包含了所有子元素。
such as
<div id="parent"><div id="child1"></div><div id="child2"></div><div id="child3"></div>
</div>const parent = document.getElementById("parent");
const childElements = parent.children;console.log(childElements.length); // 輸出 3，因為有三個子元素
console.log(childElements[0]); // 輸出第一個子元素
console.log(childElements[1]); // 輸出第二個子元素
console.log(childElements[2]); // 輸出第三個子元素
