JavaScript中獲取html元素經常使用手法和區分

        對於許多前端開發項目來講，獲取元素進行操做是必不可少的，例如tab標籤，全屏切換，自動滾播等效果都須要經過獲取節點元素來實現。下面我來總結下JavaScript最經常使用的4個Document對象中獲取元素的方法 getElementById、getElementsByTagName、getElementsByName、getElementsByClassName.

注意的是後三個方法獲取的都是對象組，不是單個對象，須要經過下標來調用他們中的元素

 

getElementById()

做用：用於獲取一個基於惟一的ID的元素。

用法：getelementById(),接受一個你要獲取的id參數，若是找到相應的元素則返回該元素，若是找不到就返回null。

代碼：

HTML中代碼：

<div id =」mydiv」>Hello</div>

JavaScript中代碼：

var mydiv = document.getElementById(「mydiv」);      //獲取<div>元素

 

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」變爲紅色字體

 

 

 

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」

 

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」