DOM API获取元素的N中方法

如何获取元素

以下是HTML代码

<div class="word1" id='one'></div>
<div class="word2" id='two'></div>

该如何获取第一个或者第二个呢，以下有5种方法。

1. element.querySelector()

该方法接受CSS选择器作为参数，返回父元素的第一个匹配的子元素。

var a = document.querySelector('div') 
var b = document.querySelector('.word1')
console.log(a) //<div class="word1" id='one'></div>
console.log(b) //<div class="word1" id='one'></div>

2. element.querySelectorAll()

该方法接受CSS选择器作为参数，返回一个NodeList对象，包含所有匹配的子元素。即使匹配的只有一个子元素，返回的也是对象。

var c = document.querySelectorAll('div')
console.log(c) 
console.log(c[0])

以下是控制台打印的消息：

3. element.getElementById()

由于每个元素的ID是唯一的，所以该方法返回唯一的匹配的子元素。
var d = document,getElementById('two') ,console.log(b) //<div class="word1" id='one'></div>

4. element.getElementsByTagName()

该方法返回一个对象，其里面的成员是当前节点的所有匹配指定标签名的子元素。

var e = document.getElementsByTagName('div')
console.log(e)
console.log(e[1])

以下是控制台打印的消息：

5. element.getElementsByClassName()

该方法返回一个对象，成员是当前元素节点的所有匹配指定的class子元素。

var f = document.getElementsByClassName('word2')
console.log(f)
console.log(f[0])

以下是控制台打印的消息：