DOM 获取Element对象和常见HTML Element对象的使用-CFANZ编程社区

DOM 获取Element对象和常见HTML Element对象的使用

凯约 2022-05-06 阅读 43

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img id="light" src="img/亮.png" style="width: 100px; height: 100px;"><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">游戏
    <br>
</body>
<script>
   /* 
    Element：元素对象
    获取：使用Document对象的方法来获取
    1.getElementByld：根据id属性值获取，返回一个Element对象
    2.getElementsByTagName：根据标签名称获取，返回Element对象数组
    3. getElementsByName：根据name属性值获取，返回Element对象数组
    4.getElementsByClassName：根据class属性值获取，返回Element对象数组
    */
    // 1.
    var img = document.getElementById("light");
    // alert(img);

    // 2.
    var divs =document.getElementsByTagName("div");
    // alert(divs.length);
    // for(let i=0;i<divs.length;i++){
    //     alert(divs[i]);
    // }
    // 3
    var names = document.getElementsByName("hobby");
//    for(let i=0;i<names.length;i++){
//         alert(names[i]);
//     }
    // 4.
    var clss = document.getElementsByClassName("cls");
    // for(let i=0;i<clss.length;i++){
    //     alert(clss[i]);
    // }

    // 常见HTML Element对象的使用
    // src属性
    var img = document.getElementById("light");
    img.src = "img/灭.png";

    // div 文字样式 
    // style属性设置css样式 innerHTML设置或返回元素的内容
    var divs =document.getElementsByTagName("div");
    // alert(divs.length);
    for(let i=0;i<divs.length;i++){
    //   divs[i].style.color="red";
      divs[i].innerHTML="哈哈";
    }

    // checked 属性设置或返回 checkbox 是否应被选中
    // checkboxobject.checked = true | false
    // 可以设置 页面中一键全选中的状态
    var names = document.getElementsByName("hobby");
    for(let i=0;i<names.length;i++){
        names[i].checked = "true";
    }
</script>
</html>

查阅文档查看属性和方法