abstract：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></ti
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
form.login{padding: 30px;}
form.login input{background: #eee;width: 200px; border: none; height:40px; line-height: 40px; padding: 0 10px; margin-bottom: 15px;}
form.login button{background: #ff6700;width: 200px; text-align: center; color: #fff; border: none; height:40px; line-height: 40px; padding: 0 10px; margin-bottom: 15px;}
</style>
</head>
<body>
<ul id="ul">
<li id="list1">列表项目 1</li>
<li class="Clist1 large">列表项目 2</li>
<li id="list2">列表项目 3</li>
<li class="Clist2">列表项目 4</li>
<li id="list3">列表项目 5</li>
<li class="Clist2">列表项目 6</li>
</ul>
<form action="" name="login" class="login">
<input type="text" name="username" placeholder="点击输入您的姓名">
<input type="text" name="password" placeholder="点击输入您的密码">
<button name="button">提交</button>
</form>
<img src="" name="pic" style="border:1px solid #ddd; display: block; background: #eee;" width="300px" height="200px" alt="">
<a name="link" href="http://www.baidu.com">百度</a>
<script type="text/javascript">
//使用id来选择元素
//使用id来选择元素
//document是Document对象的一个引用,是一个全局变量
//let与var类似,但不相同
let list1 = document.getElementById('list1');
let list2 = document.getElementById('list2');
let list3 = document.getElementById('list3');
list1.style.backgroundColor='red';
list2.style.backgroundColor='yellow';
list3.style.backgroundColor='blue';
//通过函数来写
function getElements(){//参数是多个id字符串
let elements = {};//用来保存获取到的dom对象元素
for (let i=0;i<arguments.length;i++){
let id = arguments[i];//获取参数id
let elt = document.getElementById(id);//根据id字符串
if(elt === null){
throw new Error("没有这个元素"+id);//抛出异常
}
elements[id]=elt;//将获取到的元素保存到结果集合中
}
return elements;//将获取到的元素返回
}
//根据id获取页面上的指定元素,返回一个关联数组对象,键名就是id
let elements=getElements('list1','list2','list3');
console.log(elements);
//根据name属性获取元素
//根据name属性获取元素
let login = document.getElementsByName('login')[0];
login.style.border='1px solid #ddd'
//我们可以把name当成document对象的属性来用
let login1 = document.login;
login1.style.backgroundColor='#fafafa';
//根据标签名获取元素
//根据标签名获取元素
//返回的是一个元素的集合,就会有一个length
let ul = document.getElementsByTagName('ul')[0];
ul.style.backgroundColor='#f1f1f1';
//元素的集合其实是一个对象,它的上面有一个方法:item()
let ul1 = document.getElementsByTagName('ul').item(0);
ul1.style.padding='30px';
//获取所有li元素
let lists = document.getElementsByTagName('li');
for(let i=0;i<lists.length;i++){
lists[i].style.color='green';
}
/* //该方法不仅定义在document对象上,还在元素对象上也有定义
let ul2 = document.getElementsByTagName('ul').item(0);
let list2 = ul2.getElementsByTagName('li').item(1);//这个写法总是提示有问题
ul2.style.color='#000' */
//name属性和标签名获取元素的快捷方式
//name属性和标签名获取元素的快捷方式
//以文档对象的方式来访问这些特定的元素集合
//document.images:获取所有的<img>元素,返回是一个数组
document.images[0].style.backgroundColor='#ffa200';//标签的数字索引
document.images['pic'].style.borderColor='red';//name属性索引
//如果将images看成对象,name就可以看成属性
document.images.pic.style.width='400px'//name做为images对象的属性
//forms 属性:获取到页面中所有的form标签
document.forms[0].style.border='1px solid #999';
document.forms['login'].style.backgroundColor='#fff';
document.forms.login.style.backgroundColor='#fafafa';
document.forms.item(0).style.border='none';//使用元素集合的item()方法
//link链接获取所有的<a>
document.links[0].style.border='1px solid #999';
document.links['link'].style.backgroundColor='#ffa200';
document.links.link.style.color='#fff';
//body:<body>
document.body.style.backgroundColor='#fafafa';
//head:<head>
let sytle=document.createElement('style');
//document.head.appendChild(style);//创建新的style标签
//documentElement<html>
console.log(document.documentElement);
//根据class来获取元素
let classList = document.getElementsByClassName('Clist2');
classList[0].style.backgroundColor='red';
classList.item(1).style.backgroundColor='#666'
//该方法不仅可以在document对象上调用，也可以在元素上调用，一般是在父元素上调用
document.getElementsByClassName('ul').item(0)
document.getElementsByClassName('Clist2').item(0)
.style.backgroundColor='#fff';
//多class值写法
let large= document.getElementsByClassName('Clist1 large')[0];
large.style.fontSize='30px';
//选择页面元素最简单的方式就是用css选择器:.Clist1---->class='Clist1'
let Clist = document.querySelectorAll('li');
Clist[0].style.fontSize='50px';
Clist.item(2).style.fontSize='24px';
</script>
</body>
</html>
Correcting teacher：天蓬老师Correction time：2019-05-17 17:36:44
Teacher's summary：当你有多种方法用来选择一个元素的时候, 一定要选择最简单的那个, 代码的可读性永远是排到第一位的