<!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>
查阅文档查看属性和方法