document.getelementbyid(document.getelementbyid.value)

原生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!

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