DOM选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li id="item1">这里是列表11</li>
<li name="item2">这里是列表22</li>
<li>这里是列表33</li>
<li>这里是列表44</li>
<li>这里是列表55</li>
<li>这里是列表66</li>
<li>这里是列表77</li>
<li>这里是列表88</li>
<li>这里是列表99</li>
<li>这里是列表00</li>
</ul>
<div style="width:100px;height:100px"></div>
</body>
<script type="text/javascript">
//id选择器
let item1 = document.getElementById('item1')
item1.style.backgroundColor = 'blue'
//name属性获取
let item2 = document.getElementsByName('item2')[0]
item2.style.backgroundColor = 'red'
//tag获取元素
//let div = document.getElementsByTagName('div')[0];
let div = document.getElementsByTagName('div').item(0);
div.style.backgroundColor = 'green'
//class属性
let item3 = document.getElementsByClassName('li3')
for (var i = item3.length - 1; i >= 0; i--) {
item3[i].style.backgroundColor = '#ccc'
}
//js
let li = document.querySelectorAll('.li4').item(0);
li.style.backgroundColor = '#333'
</script>
</html>