JS之DOM篇-选择器
getElementById()
任何HTML元素都可以有一个id属性，在文档中该值必须唯一。如果出现了多个同名id，CSS会对所有同名id生效，但是JS脚本仅对第一个出现该id名的元素生效
getElementById(id)方法接收一个参数，表示要获取元素的id，若找到则返回该元素，若不存在则返回null
<div id="test">test</div>
<script>
var test = document.getElementById('test')
test.style.color = 'red'
</script>
getElementsByTagName()
getElementsByTagName(tagName)方法接收一个参数，表示要获取元素的标签名，最终返回一个包含匹配元素的类数组对象HTMLCollection。该方法既可以用于document文档对象，也可以用于element元素对象。可以使用方括号语法或item()方法访问类数组对象种的项
<div>1</div>
<div>2</div>
<script>
var divs = document.getElementsByTagName('div')
divs[0].style.color = 'red'
divs.item(1).style.color = 'yellow'
</script>
getElementsByClassName
HTML5新增了getElementsByClassName()方法，它接收一个以空格分隔的列表，返回带有指定类的所有元素的类数组对象HTMLCollection。该方法既可以用于document文档对象，也可以用于element元素对象。可以使用className属性获取class属性值
<ul id="list">
<li class="a">a</li>
<li class="a b">a b</li>
<li class="a b c">a b c</li>
</ul>
<script>
console.log(list.getElementsByClassName('a')[1].className) // a b
console.log(list.getElementsByClassName('a b')[1].className) // a b c
</script>
classList
通常在操作类名时，需要通过className属性获取到一个字符串，然后操作这个字符串达到修改类名的效果
HTML5为所有元素添加了classList属性，classList属性是新集合DOMTokenList的实例，可以通过方括号语法或者item()方法取得每个元素。它有一个Length属性表示包含多少元素
<div id="test" class="a b c"></div>
<script>
console.log(test.classList) // ["a", "b", "c", value: "a b c"]
console.log(test.classList.length) // 3
console.log(test.classList[0]) // a
console.log(test.classList.item(1)) // b
</script>
这个新类型还定义了以下四个方法：
add(value) 将给定的字符串值添加到列表中，如果值已存在，则不添加
contains(value) 表示列表中是否存在给定的值，如果存在则返回true,否则返回false
remove(value) 从列表中删除给定的字符串
toggle(value) 如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它
<style>
.red {
color: red;
}
</style>
<body>
<div id="test">测试</div>
<button onclick="test.classList.add('red')">add</button>
<button onclick="test.classList.contains('red') ? alert(true) : alert(false)">contains</button>
<button onclick="test.classList.remove('red')">remove</button>
<button onclick="test.classList.toggle('red')">toggle</button>
</body>
注意： IE9-浏览器不支持classList属性，所以也不支持上面的四个方法
selector
HTML5新增了3种selector方法：querySelectorAll()、querySelector()和matchesSelector()
querySelector()
querySelector()方法接收一个CSS选择符，返回匹配到的第一个元素。如果没有找到这个匹配元素则返回null。该方法既可用于document文档类型，也可用于element元素类型
<body id="body">
<div id="test">测试</div>
<script>
console.log(document.querySelector('div#test').innerHTML) // 测试
console.log(body.querySelector('div#test').innerHTML) // 测试
</script>
</body>
querySelectorAll()
querySelectorAll()接收一个CSS选择符，返回一个类数组对象NodeList的实例。如果没有匹配元素，则返回空的类数组对象。该方法既可用于document文档类型，也可用于element元素类型
<body id="body">
<div id="test">测试</div>
<script>
console.log(document.querySelectorAll('div')) // [div#test]
console.log(body.querySelectorAll('span')) // []
</script>
</body>
matches()
matches()方法接收一个CSS选择符参数，如果调用元素与该选择符相匹配，返回true；否则返回false
<body>
<ul id="list">
<li>one</li>
<li class="active">two</li>
<li>three</li>
</ul>
<script>
var list = document.querySelectorAll('#list li')
for (let index = 0; index < list.length; index++) {
const element = list[index];
console.log(element.matches('.active'));
}
// false true false
</script>
</body>
非实时
与getElementById()和getElementsByTagName()方法不同，querySelector()和querySelectorAll()方法得到的结果是非动态实时的
<ul id="list">
<li>第一个</li>
<li>第二个</li>
</ul>
<script>
var list = document.getElementById('list')
var lastOne = list.querySelector('li:last-child')
var all = list.querySelectorAll('li')
console.log(lastOne.innerHTML, all.length) // 第二个 2
console.log(list.children.length) // 2
// 新增
var newLi = document.createElement('li')
newLi.innerHTML = '第三个'
list.appendChild(newLi)
console.log(lastOne.innerHTML, all.length) // 第二个 2
console.log(list.children.length) // 3
</script>
缺陷
当selector类方法在元素上调用时会有一个缺陷：选择器字符串能包含元素的祖先而不仅仅是所匹配的元素
<div id="list">
<div>第一个</div>
<div>第二个</div>
</div>
<script>
var list = document.getElementById('list')
var divs = list.querySelectorAll('div div')
console.log(divs) // [div, div]
</script>
示例中以list元素为基点，选择div的子div，按正常逻辑应该返回一个空的类数组对象，但实际返回了[div, div]，这是因为参数中的选择器包含了元素的祖先。为了防止该情况的发生，当出现后代选择器时，可以在参数中显式地添加当前元素的选择器
<div id="list">
<div>第一个</div>
<div>第二个</div>
</div>
<script>
var list = document.getElementById('list')
var divs = list.querySelectorAll('#list div div')
console.log(divs) // []
var allLi = list.querySelectorAll('#list div')
console.log(allLi) // [div, div]
</script>
