JavaScriptDOM基础1-6 编程练习

最新推荐文章于 2024-10-31 20:30:51 发布

原创最新推荐文章于 2024-10-31 20:30:51 发布 · 601 阅读

1 ·

CC 4.0 BY-SA版权

cnblog博客：https://www.cnblogs.com/f6056/

文章标签：

#DOM基础 #1-6 编程练习

Javascript 同时被 2 个专栏收录

57 篇文章

订阅专栏

基础案例

39 篇文章

订阅专栏

本文介绍了一个简单的DOM查找方法练习，通过使用getElementById方法获取特定ID的div元素，并使用JavaScript将其内容依次弹出显示。探讨了如何正确处理DOM对象，以展示更详细的HTML源代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1-6 编程练习

小伙伴们，今天我们学习了dom的查找方法，按要求补充下面的代码！

要求：通过ID选取的方法获取到html文件中的div元素，并让它们依次的在页面中弹出！

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>DOM的查找方法</title>
</head>
<body>
    <div id="div1">第一个元素</div>
    <div id="div2">第二个元素</div>
    <div id="div3">第三个元素</div>
<script>
    //补充代码

    
</script>
</body>
</html>

任务

第一步：通过ID选取的方法获取到每个div，并用变量进行接收

第二步：当打开页面时，依次弹出这几个变量

Tips:小伙伴们，看一下你们获取到的结果是不是dom对象呢？

参考代码:

        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
        var div3 = document.getElementById("div3");
        var arr = [div1, div2, div3];
        for (i = 0; i < arr.length; i++) {
            alert(arr[i].innerHTML);
        }

思考：

这种方式只能弹出[object HTMLDivElement]，并没有弹出HTML源代码，JS对其进行了自动转换！如果实现弹出HTML源代码的功效呢？