對于許多前端開發項目來說，擷取元素進行操作是必不可少的，例如tab标簽，全屏切換，自動滾播等效果都需要通過擷取節點元素來實作。下面我們來看一下JavaScript擷取html元素的幾種方式。
1、getElementById( )
作用：用于擷取一個基于唯一的ID的元素。
用法：getelementById(),接受一個你要擷取的id參數，如果找到相應的元素則傳回該元素，如果找不到就傳回null。
代碼：
HTML中代碼：
<div id =”mydiv”>Hello</div> JavaScript中代碼：
var mydiv = document.getElementById(“mydiv”); //擷取<div>元素 2、getElementsByTagName
作用：用于擷取對應标簽的所有對象
用法：getElementsByTag(),接受一個你要擷取的标簽的參數，傳回含零或多個元素的NodeList（節點清單，與數組類似）
代碼：
HTML中代碼：
<p>hello</p>
<p>hi</p>
<p>i am fine</p> JavaScript中代碼：
var array = document.getElementsByTagName(“p”); //擷取p的元素節點清單
P[0].style.color =”red” //”hello”變為紅色字型 3、getElementsByName
作用：用于擷取對應name名的所有元素
用法：getElementsByName(),接受一個你要獲得name名的參數，傳回含零或多個元素的NodeList（節點清單，與數組類似）
代碼：
HTML中代碼：
<p name=”lid”>hello</p>
<p name=”lid”>hi</p> JavaScript中代碼：
var name = document.getElementsByName(“lid”); //擷取name為lid所有元素節點
Name[0]; //”hello” 4、getElementsByClassName
作用：用于擷取對應class名的所有元素
用法：getElementsByClassName(),接受一個你要獲得class名的參數，傳回含零或多個元素的NodeList（節點清單，與數組類似）
HTML中代碼：
<p class=”lid”>hello</p>
<p class=”lid”>hi</p> JavaScript中代碼：
var name = document.getElementsByClassName(“lid”); //擷取name為lid所有元素節點
Name[0]; //”hello” 本文完〜
