abstract：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <img src="images/1.png"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="images/1.png" name="img1" alt="">
<ul>
<li id="li1">列表项01</li>
<li>列表项02</li>
<li>列表项03</li>
<li>列表项04</li>
<li>列表项05</li>
</ul>
<a href="" name="a1">111</a>
</body>
<script>
let li = document.getElementById('li1');//id选择器
console.log(li);
li.style.background = "lightblue";
let li3 = document.getElementsByClassName('li3')[0];//class选择器
li3.style.background = 'lightyellow';
document.getElementsByClassName('li3').item(0).style.background = 'lightgreen';
let a1 = document.links[0];
console.log(a1);
a1.style.background = 'lightblue';
a1.href = 'http://www.baidu.com/';
let img1 = document.getElementsByName('img1')[0];//name选择器
console.log(img1);
img1.style.width="200px";
let ul = document.getElementsByTagName('ul').item(0);//元素选择器
ul.lastElementChild.style.background = 'lightyellow';
li = document.querySelector(".li3");//css选择器 及时有多个也返回所有元素的第一个元素
console.log(li)
li = document.querySelectorAll("li").item(1);//css选择器返回数组
console.log(li);
/*
let c = 1;
const a = 4;
function test(){
let c = 2;
console.log(c);
}
test();
console.log(c);
console.log(a);
*/
</script>
</html>DOM选择器中4个常用选择器，和2个css选择器
document.getElementById(); //DOM中的ID选择器 返回一个元素对象
document.getElementsByName(); //DOM中的name选择器 返回一个对象/数组集合
document.getElementsByTagName(); //DOM中的元素名称选择器 返回一个对象/数组集合
document.getElementsByClassName(); //DOM中的类名选择器 返回一个对象/数组集合
document.querySelector(); //DOM中CSS选择器，返回的一个元素，如果匹配多个则返回数组中第一个元素
document.querySelectorAll(); //DOM中CSS选择器 返回一个对象/数组集合
Correcting teacher：韦小宝Correction time：2019-02-28 13:08:33
Teacher's summary：选择器是很重要的 选择器掌握不了 其他的都别想了 课后一定要多去练习