DOM获取元素的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用Css选择器来选择元素</title>
</head>
<body>
<ul id="ul">
<li class="red">列表项1</li>
<li>列表项2</li>
<li class="green">列表项3</li>
<li class="green">列表项4</li>
<li class="coral large">列表项5</li>
</ul>
<script type="text/javascript">
// 选择页面元素最简单的方式就是用css选择器:.red ->>class='red';
// 标签选择器
let lists = document.querySelectorAll('li');
// console.log(lists)
lists[0].style.background = 'coral';
lists.item(1).style.background = 'skyblue';
// 该方法也可以在元素上调用
let ul = document.querySelector('#ul');// 返回满足条件的第一个
// console.log(ul)
// 获取当前ul下的class为green的元素
let li = ul.querySelectorAll('.green');
// console.log(li)
for(let i=0;i<li.length;i++){
li[i].style.background = 'green'
}
// 获取DOM元素的方法有以下集种
// 1、 通过ID 选择 document.getElementById('id');// 获取唯一id的元素
// 2、 通过标签选择 document.getElementsByTagName('ul')[0];// 标签选择器 返回集合
// 3、 通过name属性获取 docuemnt.getElementsByName('name')[0];// 返回集合
// 4、 通过Class选择 document.getElementsByClassName('name')[0];// 返回集合
// 5、 通过css选择器获取 document.querySelectorAll('li');// 获取所有li的元素 返回集合
// 获取单个: document.querySelector();// 返回单个元数据，等价于 document.querySelectorAll('li')[0];
// 其中操作属性可以使用数组方式：
// li[0].style.background = 'red';
// li.item(0).style.background = 'red';
// li.red.style.background = 'green';
// li['red'].style.backgrond = 'skyblue'
</script>
</body>
</html>
