4種JavaScript中獲取HTML元素的方式

對于許多前端開發(fā)項目來說，獲取元素進行操作是必不可少的，例如tab標簽，全屏切換，自動滾播等效果都需要通過獲取節(jié)點元素來實現(xiàn)。下面我們來看一下JavaScript獲取html元素的幾種方式。

1、getElementById( )

作用：用于獲取一個基于唯一的ID的元素。

用法：getelementById(),接受一個你要獲取的id參數(shù)，如果找到相應(yīng)的元素則返回該元素，如果找不到就返回null。

代碼：

HTML中代碼：

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

JavaScript中代碼：

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

2、getElementsByTagName

作用：用于獲取對應(yīng)標簽的所有對象

用法：getElementsByTag(),接受一個你要獲取的標簽的參數(shù)，返回含零或多個元素的NodeList（節(jié)點列表，與數(shù)組類似）

代碼：

HTML中代碼：

<p>hello</p><p>hi</p><p>i am fine</p>

JavaScript中代碼：

 var array = document.getElementsByTagName(“p”);           //獲取p的元素節(jié)點列表 P[0].style.color =”red”                      //”hello”變?yōu)榧t色字體

3、getElementsByName

作用：用于獲取對應(yīng)name名的所有元素

用法：getElementsByName(),接受一個你要獲得name名的參數(shù)，返回含零或多個元素的NodeList（節(jié)點列表，與數(shù)組類似）

代碼：

HTML中代碼：

 <p name=”lid”>hello</p> <p name=”lid”>hi</p>

JavaScript中代碼：

 var name = document.getElementsByName(“l(fā)id”);  //獲取name為lid所有元素節(jié)點 Name[0];            //”hello”

4、getElementsByClassName

作用：用于獲取對應(yīng)class名的所有元素

用法：getElementsByClassName(),接受一個你要獲得class名的參數(shù)，返回含零或多個元素的NodeList（節(jié)點列表，與數(shù)組類似）

HTML中代碼：

<p class=”lid”>hello</p><p class=”lid”>hi</p>

JavaScript中代碼：

var name = document.getElementsByClassName(“l(fā)id”);   //獲取name為lid所有元素節(jié)點Name[0];            //”hello”

本文完?