摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选择器</title>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
</head>
<body>
<ul class="item">
<li id="li1">标签01</li>
<li>标签02</li>
<li id="item2">标签03</li>
<li>标签04</li>
<li>标签05</li>
</ul>
<form name="login">
<input type="text" name="username">
<input type="password" name="password">
<button name="button">提交</button>
</form>
<script type="text/javascript">
//根据id选择元素
/*let li1=document.getElementById('li1')
li1.style.backgroundColor='red';*/
//根据标签名来获取元素
/*let li=document.getElementsByTagName('li');
for(let i=0;i<li.length;i++){
li[i].style.color='blue';
}*/
//通过class获取元素
/* let item=document.getElementsByClassName('item')[0];
item.style.backgroundColor='lightblue';
let item1=document.getElementsByClassName('item').item(0)
item1.style.backgroundColor='lightgreen';*/
//根据name属性获取元素
/* let username=document.getElementsByName('username')[0];
username.style.backgroundColor='yellow';*/
//使用标签名和name属性选择元素的快捷方式
let form=document.forms['login'];
form.style.backgroundColor='coral';
//使用css选择器来获取元素
let ul=document.querySelectorAll('#item2')[0];
console.log(ul);
ul.style.backgroundColor='green';
let ul1=document.querySelector('#item2');
console.log(ul1);
ul.style.backgroundColor='red';
</script>
</body>
</html>总结：
通过选择器获取元素有以下几种方式
(1)根据id选择元素
(2)根据name属性获取元素
(3)根据标签名来获取元素
(4)通过class获取元素
(5)使用标签名和name属性选择元素的快捷方式
(6)使用css选择器来获取元素
学到了更多的选择器，在应用中更加的灵活。
批改老师：灭绝师太批改时间：2018-11-19 11:23:14
老师总结：想要运用灵活，需要你找案例做做奥！继续加油
