【前端每日一题】day11

一个盒子(DIV)里有若干个小盒子,每个小盒子里还可能有多个小盒子

多层盒子结构。每个盒子都有一个唯一的id和 name 属性。现在给出一个盒子的 id

请找到这个盒子并打开,输出这个盒子内部所有小盒子的id和 name,并继续打开这些小盒子输出id和 name(由外到内逐层打印)

javascript 复制代码
<!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);
            }
        }

        // 指定目标盒子的 ID
        const targetBoxId = "box1";

        // 开始查找并打开盒子
        findAndOpenBox(targetBoxId);
    </script>
</body>
</html>

先通过document.getElementById()方法获得指定id 的div DOM元素,然后向下递归调用开盒子方法。

getAttribute() 是一个用于获取元素属性值的方法。它允许你通过属性名来获取指定元素的属性值。

children属性可以返回一个类似数组的对象,其中包含了所有子元素。

such as

javascript 复制代码
<div id="parent">
    <div id="child1"></div>
    <div id="child2"></div>
    <div id="child3"></div>
</div>
javascript 复制代码
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]); // 输出第三个子元素
相关推荐
jingling55522 分钟前
【Vue3 实战】插槽封装与懒加载
前端·javascript·vue.js
??? Meggie27 分钟前
【Python】保持Selenium稳定爬取的方法(防检测策略)
开发语言·python·selenium
酷爱码2 小时前
如何通过python连接hive,并对里面的表进行增删改查操作
开发语言·hive·python
画个大饼2 小时前
Go语言实战:快速搭建完整的用户认证系统
开发语言·后端·golang
喵先生!3 小时前
C++中的vector和list的区别与适用场景
开发语言·c++
Thomas_YXQ4 小时前
Unity3D Lua集成技术指南
java·开发语言·驱动开发·junit·全文检索·lua·unity3d
xMathematics4 小时前
计算机图形学实践:结合Qt和OpenGL实现绘制彩色三角形
开发语言·c++·qt·计算机图形学·cmake·opengl
Freedom风间5 小时前
前端优秀编码技巧
前端·javascript·代码规范
萌萌哒草头将军6 小时前
🚀🚀🚀 Openapi:全栈开发神器,0代码写后端!
前端·javascript·next.js
萌萌哒草头将军6 小时前
🚀🚀🚀 Prisma 爱之初体验:一款非常棒的 ORM 工具库
前端·javascript·orm