一 获取Element对象
点击查看代码
Document对象中提供了以下获取 Element元素对象的函数
getElementById()：根据id属性值获取，返回单个Element对象
getElementsByTagName()：根据标签名称获取，返回Element对象数组
getElementsByName()：根据name属性值获取，返回Element对象数组
getElementsByClassName()：根据class属性值获取，返回Element对象数组
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<img id="light" src="../imgs/off.gif"> <br>
<div class="cls">呼呼</div> <br>
<div class="cls">QIQIQI</div> <br>
<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<br>
<script>/*获取：使用Document对象的方法来获取* getElementById：根据id属性值获取，返回一个Element对象* getElementsByTagName：根据标签名称获取，返回Element对象数组* getElementsByName：根据name属性值获取，返回Element对象数组* getElementsByClassName：根据class属性值获取，返回Element对象数组*///1. getElementById：根据id属性值获取，返回一个Element对象var img = document.getElementById("light");// alert(img);//2. getElementsByTagName：根据标签名称获取，返回Element对象数组var divs = document.getElementsByTagName("div");// alert(divs.length);/* for (let i = 0; i < divs.length; i++) {alert(divs[i]);}*///3. getElementsByName：根据name属性值获取，返回Element对象数组var hobbys = document.getElementsByName("hobby");/* for (let i = 0; i < hobbys.length; i++) {alert(hobbys[i]);}*///4. getElementsByClassName：根据class属性值获取，返回Element对象数组var clss = document.getElementsByClassName("cls");for (let i = 0; i < clss.length; i++) {alert(clss[i]);}
</script>
</body>
</html>
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<img id="light" src="../imgs/off.gif"> <br><div class="cls">QIQIIQ</div> <br>
<div class="cls">呼呼呼</div> <br>
<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<br>
<script>//1. getElementById：根据id属性值获取，返回一个Element对象var img = document.getElementById("light");// alert(img);img.src = "../imgs/on.gif";//2. getElementsByTagName：根据标签名称获取，返回Element对象数组var divs = document.getElementsByTagName("div");/*style:设置元素css样式innerHTML：设置元素内容*/for (let i = 0; i < divs.length; i++) {//divs[i].style.color = 'red';divs[i].innerHTML = "呵呵";}//3. getElementsByName：根据name属性值获取，返回Element对象数组var hobbys = document.getElementsByName("hobby");for (let i = 0; i < hobbys.length; i++) {//alert(hobbys[i]);hobbys[i].checked = true;}//4. getElementsByClassName：根据class属性值获取，返回Element对象数组var clss = document.getElementsByClassName("cls");/*for (let i = 0; i < clss.length; i++) {alert(clss[i]);}*/
</script>
</body>
</html>
