摘要：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>DOM练习作业</title> </head> <body> <ul id="ulbox"> <li>列表1&l
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM练习作业</title>
</head>
<body>
<ul id="ulbox">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ul>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>
<form action="" name="formbox" id="formYm">
<input type=te"text" name="user1" id="user1" value="请输入用户名"/>
<input type="password" name="user2" id="user2" value="请输入密码" />
</form>
<p><a href="http://www.php.cn">点击跳转php中文网</a></p>
<img src="images/1.jpg" name="images1" />
<ul class="ul">
<li class="red">列表1</li>
<li>列表2</li>
<li class="green">列表3</li>
<li>列表4</li>
<li class="coral large">列表5</li>
</ul>
<script>
//document.getElementById() 获取id
let ul =document.getElementById("ulbox")
//ul变量更改ul的背景颜色
ul.style.backgroundColor="yellowgreen";
//document.getElementsByName() 获取name的值
let name1 =document.getElementsByName("formbox").item(0);
//获取到form的name名称查找到位置修改name背景色
name1.style.backgroundColor="#ff2800"
//document.getElementsByTagName("")获取标签名
let ul2 = document.getElementsByTagName("ul")[1];
ul2.style.backgroundColor = "red"
//根据标签名和name属性选择元素
document.forms[0].style.backgroundColor="brown";
document.forms["formYm"].style.backgroundColor="darkcyan";
document.forms.formYm.style.backgroundColor="brown";
document.forms.item(0).style.backgroundColor="red";
//links连接
document.links[0].style.backgroundColor="teal";
//images 图片
document.images[0].style.width="200px";
//根据元素的class属性值获取元素
let red=document.getElementsByClassName("red");
console.log(red);
red[0].style.backgroundColor="red"
//使用css选择器来获取元素
//document.querySelector()返回指定的css选择器的元素
//document.querySelectorAll()根据指定的元素，进行修改
</script>
</body>
</html>
批改老师：韦小宝批改时间：2019-03-07 14:37:48
老师总结：写的很不错 js来获取元素还是蛮简单的 当然也挺重要的
