本例用到的图
<!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>