abstract：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>DOM方法获取元素作业</title> <style type=&q
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM方法获取元素作业</title>
<style type="text/css">
.box{width:1201px;height:280px;background:#ccc;margin:0px auto;position:relative;}
#box1{width:200px;height:200px;background:#fff;position: absolute;top:20px;left:1px;float:left;}
.bt1{width:200px;height:30px;position: absolute;top:250px;left:1px;float:left;}
.box2{width:200px;height:198px;position:absolute;top:20px;float:left;left:250px;border:none;}
.bt2{width:200px;height:30px;position: absolute;top:250px;left:250px;float:left;}
ul{display:block;width:160px;height:200px;background:#fff;float:left;position: absolute;top:4px;left:500px;}
.bt3{width:200px;height:30px;position: absolute;top:250px;left:500px;float:left;}
.box3{width:200px;height:200px;background:#fff;position:absolute;top:20px;float:left;left:750px;}
.bt4{width:200px;height:30px;position: absolute;top:250px;left:750px;float:left;}
.box4{width:200px;height:200px;background:#fff;position:absolute;top:20px;float:left;left:1000px;}
.bt5{width:200px;height:30px;position: absolute;top:250px;left:1000px;float:left;}
</style>
<script type="text/javascript">
function bt1click(){
let box1=document.getElementById('box1');
box1.style.backgroundColor='green';
}
function bt2click(){
let box2=document.getElementsByName('text')[0];
box2.value='通过name改变了我的内容';
}
function bt3click(){
let ul=document.getElementsByTagName('ul')[0];
ul.style.backgroundColor='pink';
}
function bt4click(){
let box3=document.getElementsByClassName('box3')[0];
box3.style.backgroundColor='lightblue';
}
function bt5click(){
let box4=document.querySelector('.box4');
box4.style.backgroundColor='coral';
}
</script>
</head>
<body>
<div class="box">
<div id="box1"></div>
<button class="bt1" onclick="bt1click()">通过id改变div的颜色</button>
<input type="text" name="text" class="box2" value="我是改变之前！">
<button class="bt2" onclick="bt2click()">通过name改变input框的value</button>
<ul></ul>
<button class="bt3" onclick="bt3click()">通过TagName改变div的颜色</button>
<div class="box3"></div>
<button class="bt4" onclick="bt4click()">通过ClassName改变div的颜色</button>
<div class="box4"></div>
<button class="bt5" onclick="bt5click()">通过css选择器改变div的颜色</button>
</div>
</body>
</html>
作业时粗心 忘记了带elements的选择器是类数组的形式 后面要带[0] 导致错误 还有就是css选择器形式的如果只有一个 用querySelectorAll会报错
Correcting teacher：灭绝师太Correction time：2019-02-27 09:17:49
Teacher's summary：总结的很全面,好的学习习惯要继续保持呀!