元素选择方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择元素获取</title>
</head>
<body>
<ul>
<li id="item1">ONE</li>
<li>TWO</li>
<li>THREE</li>
</ul>
<img src="http://imgsrc.baidu.com/forum/pic/item/ec3ec65c1038534322e31ac69a13b07eca80883a.jpg" alt="" name="pic">
<form action="" name="login">
<input type="text" placeholder="用户名">
<input type="password" placeholder="密码" name="" id="">
<button>登录</button>
</form>
<p><a href="www.php.cn">php中文网</a></p>
<script>
//使用ID来选择元素
//document是Document对象的一个引用，是一个全局变量
//let 当前代码块有效
let item1 = document.getElementById('item1');
//设置ID元素样式
item1.style.backgroundColor = 'orange';
//使用class选择元素
let item2 = document.getElementsByClassName('item2');
// console.log(item2);
// 设置class元素样式
item2[0].style.backgroundColor = 'blue';
//使用document对象调用,在元素上调用，一般在父级上调用
document.getElementsByClassName('ul').item(0)//返回UL
.getElementsByClassName('item3').item(0)//返回li
.style.backgroundColor='green';
//使用TAG标签选择元素
let list_t = document.getElementsByTagName('ul').item(0);
list_t.style.backgroundColor = 'lightgreen';
//获取所有li元素
let list_li = document.getElementsByTagName('li');
console.log(list_li.length)
console.log(list_li)
for (let i = 0;i <list_li.length; i++){
list_li[1].style.backgroundColor='lightpink';
}
//以文档对象的方式来访问这些特定的元素集合
//document.images 获取所有img元素 返回数组
document.images[0].style.width='350px';//标签数字索引
//推荐此用法！！！
document.images['pic'].style.width='180px';//name属性
//如果将images看成对象 name就可以看属性
document.images.pic.style.width='250px';//name做为images对象的属性
//form属性 获取页面中所有的form
document.form.login.style.backgroundColor='purple';//个人比较喜欢用此方法!!!!!!!!!!!!!!!!!!!
//通过CSS选择器获取元素
let list_01 = document.querySelectorAll('li');//根据标签选择器 li来获取
console.log(list_01);
list_01[0].style.backgroundColor='red';
list_01.item(1).style.backgroundColor='gray';
</script>
</body>
</html>