JS对象-DOM

1、DOM：文档对象类型
2、DOM就是将标记语言的各个组成部分封装为对应的对象：
Document:整个文档对象
Element:元素对象
Atrribute:属性对象
Text：文本对象
Comment：注释对象
3、HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img id = "h1" src = "./Picture/电灯泡.jpg"> <br><br>
    <div class = "cls">传智教育</div><br>
    <div class = "cls">黑马程序员</div><br>
    <input type="checkbox"name= "hobby">电影    
    <input type="checkbox"name= "hobby">旅游   
    <input type="checkbox"name= "hobby">游戏    
</body>
    <script>
    //一、获取Element元素
        //1、获取元素-根据ID获取
        var img = document.getElementById('h1');//由于ID是不会重复的，所以Element用单数
        alert (img);
        //2、获取元素-根据标签获取-div
        var divs = document.getElementsByTagName('div');//
        for (let i = 0; i < divs.length; i++) { //用for循环遍历数组中的所有元素
            alert(divs[i]); //可以拿到两个div元素
        }
        //3、获取元素-根据name属性获取
        var ins = document.getElementsByName('hobby');
        for (let i = 0; i < ins.length; i++) {
           alert(ins[i]);
        }
        //4、获取元素-根据class属性获取
        var divs = document.getElementsByClassName('cls');//Elements一定要加复数！！
        for (let i = 0; i < divs.length; i++) {
            alert(divs[i]);    
        }
    //二、查询参考手册，属性、方法
        //下面divs是一个数组，已知里面已经包含了2个元素，要改变第一个元素的值
        var divs = document.getElementsByClassName('cls');
        var div1 = divs[0];//拿到了第一个divs中的元素
        div1.innerHTML = "传智教育666";//改变了第一个div元素的文本内容，将其设置为新的值
    </script>
</body>
</html>
posted @ 2025-05-11 21:22  琬六岁  阅读(13)  评论(0)    收藏  举报