各种getElementBy**的区别和总结，附示例代码一看就懂

原生js里的DOM操作，首先要获取待操作的元素，而初学者对获取元素所使用的getElement的几个方法是不是经常容易混呢？看了本文就全明白了！

一般说明：

1、注意大小写！

2、注意其中Element的单、复数！

方法一：getElementById

通过Id来取得元素,Id是唯一的，示例如下：

<div id="cat"></div>
<script>
	a = document.getElementById('cat');
	a.innerHTML = "hello cat!";
</script>

说明：在这个代码中，a为id是cat的元素，操作a把它的内容改成 hello cat!

getElementById 这个方法是最常用的，通常记住这个就够你用的了！

方法二：getElementsByName

通过NAME来获得元素,

注意,因为NAME可以重复,所以Element是复数，要加个s，所以这个方法是取得一个数组。IE不支持。示例如下：

<div name="dog">第一个</div>
<div name="dog">第二个</div>
<script>
	a = document.getElementsByName('dog');
	a[1].innerHTML = "hello dog!";
</script>

说明：在这个代码中，a为所有name是dog的元素集合，操作其中的第2个，把内容改成 hello dog!

方法三：getElementsByTagName

通过TAGNAME（HTML的标签名字）来获得元素，

注意，因为标签可以重复,所以Element是复数，要加个s，所以这个方法也是取得一个数组。示例如下：

<div>
	<span>第一个</span>
	<span>第二个</span>
</div>
<script>
	a = document.getElementsByTagName('span');
	a[1].innerHTML = "hello span!";
</script>

说明：在这个代码中，a为所有标签是span的元素集合，操作其中的第2个，把内容改成 hello span!

方法四：getElementsByClassName

通过class（样式名）来获得元素，

注意，因为样式引用可以重复,所以Element是复数，要加个s，所以这个方法也是取得一个数组。示例如下：

<div class="apple">第一个</div>
<div class="apple">第二个</div>
<script>
	a = document.getElementsByClassName('apple');
	a[1].innerHTML = "hello apple!";
</script>

说明：在这个代码中，a为所有样式class是apple的元素集合，操作其中的第2个，把内容改成 hello apple!

至此四个方法都搞定了！再也不会混淆了吧？