摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>DOM方法獲取元素作業(yè)</title> <style type=&q
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM方法獲取元素作業(yè)</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改變了我的內(nèi)容';
}
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>
作業(yè)時粗心 忘記了帶elements的選擇器是類數(shù)組的形式 后面要帶[0] 導(dǎo)致錯誤 還有就是css選擇器形式的如果只有一個 用querySelectorAll會報錯
批改老師：滅絕師太批改時間：2019-02-27 09:17:49
老師總結(jié)：總結(jié)的很全面,好的學(xué)習(xí)習(xí)慣要繼續(xù)保持呀!