20220707_JavaScript对象_DOM_HTML文档对象模型

最新推荐文章于 2026-01-08 16:39:17 发布

原创最新推荐文章于 2026-01-08 16:39:17 发布 · 155 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #前端

JavaWeb 专栏收录该内容

32 篇文章

订阅专栏

本文探讨了JavaScript在处理HTML文档对象模型（DOM）时的角色，详细解释了如何使用JavaScript对象来操纵DOM元素，实现页面动态效果和交互。通过实例展示了如何选择、创建和修改DOM节点，帮助前端开发者提升网页动态化能力。

本例用到的图
请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM in JS</title>
</head>
<body>
    <img id="lamp" src="../Files/lightOff.jpg"> <br>
    <span class="cls">像花虽未红</span><br>
    <span class="cls">如冰虽不冻</span><br>

    <label>
        <input type="checkbox" name="hobby">
    </label>电影
    <label>
        <input type="checkbox" name="hobby">
    </label>音乐
    <label>
        <input type="checkbox" name="hobby">
    </label>哔哩哔哩
    <br>

    <script>
        //整个文档对象，的方法之一， getElementById, 返回一个Element对象
        var img = document.getElementById("lamp")
        // alert(img)
        // img.src = "../Files/lightOn.jpg"

        //getElementByTagName, return a array
        var spans = document.getElementsByTagName("span")
        // alert(spans.length)
        for (let i = 0; i < spans.length; i++){
            // alert(spans[i])
            spans[i].style.color = 'blue'
            // spans[i].innerHTML = '闹春风，我心何以闹春风'
        }

        //getElementByName
        var hobbys = document.getElementsByName("hobby")
        for (let i = 0; i < hobbys.length; i++){
            // alert(hobbys[i])
            hobbys[i].checked = true
        }

        //getElementsByClassName
        // var clss = document.getElementsByClassName("cls")
        // for (let i = 0; i < clss.length; i++){
        //     alert(clss[i])
        // }

    </script>

</body>
</html>