这个东西很有趣，看了这个小米商城的汇总也做出来了。
<!DOCTYPE html>
<html>
<head>
<title>DOM</title>
</head>
<body>
<p class="class1" id="id1">class1 这是一个P标签 id1</p>
<p class="class2" id="id2">class2 这是一个P标签 id2</p>
<a href="www.baidu.com" name="na">www.baidu.com</a>
<form action="" name="na">
<input type="text" name="username">
<input type="password" name="password">
<button name="button">提交</button>
</form>
<div onclick="function_id()">点击对id1进行backgroundColor='red'操作</div>
<div onclick="function_n()">点击对name进行backgroundColor='yellow'操作</div>
<div onclick="function_tag()">点击对p标签进行backgroundColor='blue'操作</div>
<div onclick="function_form0()">点击对forms[0]标签进行backgroundColor='lightgreen'操作</div>
<div onclick="function_link()">点击对links[0].style.backgroundColor=#505050操作</div>
<div onclick="function_link1()">点击对links['na'].style.backgroundColor='#900000'操作</div>
<div onclick="function_link2()">点击对links.na.style.backgroundColor='#800000'操作</div>
<div onclick="function_link3()">点击对links.item(0).style.backgroundColor='#100000'操作</div>
<script type="text/javascript">
function function_id() {
document.getElementById('id1').style.backgroundColor='red'
console.log(document.getElementById('id1'))
}
function function_n(){
document.na.style.backgroundColor='yellow'
}
function function_tag(){
let a = document.getElementsByTagName('p')
for (let i=0;i<a.length;i++){
document.getElementsByTagName('p')[i].style.backgroundColor='blue'
}
}
function function_form0(){
document.forms[0].style.backgroundColor='lightgreen'
}
function function_link(){
document.links[0].style.backgroundColor='#505050'
}
function function_link1(){
document.links['na'].style.backgroundColor='#900000'
}
function function_link2(){
document.links.na.style.backgroundColor='#800000'
}
function function_link3(){
document.links.item(0).style.backgroundColor='#100000'
}
</script>
</body>
</html>