20220707_JavaScript对象_DOM_HTML文档对象模型

本例用到的图

<!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>