js如何取得dom元素？ js透過dom尋找和取得元素物件的方法（程式碼範例）

js如何取得dom元素？這篇文章就跟大家介紹js透過dom找出並取得元素物件的方法，讓大家了解js中的dom是什麼、如何透過dom來找出並取得元素的。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

首先我們來簡單了解一下js中dom是什麼？

dom：HTML DOM ，文檔物件模型（Document Object Model）的簡稱，當網頁被載入時，瀏覽器就會建立頁面的文檔物件模型。

通常，透過 JavaScript，我們需要操作 HTML元素。為了做到這件事情，就必須先尋找並取得到該元素。以下我們來介紹一下在JavaScript中透過dom尋找並取得元素物件的三種常見方法：

1、透過id 尋找並取得到元素：getElementById()

getElementById() 方法：透過ID取得節點元素，如果頁面上含有多個相同id的節點對象，那麼只傳回第一個節點物件。

語法：

document.getElementById("元素的id");

程式碼範例：點擊id="box"盒子就會出現彈跳窗，顯示id="box"盒子裡的內容

	
		
	
	
		
我是测试代码
		
	

效果圖：

注意：getElementById()括號中的不需要在前面加“#”，因為方法就決定了括號中的值是一個元素的id值。該方法傳回一個DOM物件。

2、透過標籤名稱尋找並取得到元素：getElementsByTagName()

getElementsByTagName()方法：是透過元素的標籤名稱來尋找並取得一組元素物件（有多少就取得多少），其傳回的是指定標籤名的物件集合。

語法：

document.getElementsByClassName("元素的标签名");

程式碼範例：

Hello World!


     
The DOM is very useful.
     
本例演示 getElementsByTagName 方法。

效果圖：

3、透過class （類別）尋找並取得到元素：getElementsByClassName()

getElementsByClassName()方法：是透過指定的class（類別）屬性值來尋找並取得元素的，其傳回的是帶有指定類別名稱的元素集合，可以說它是一個物件的集合。

語法：

document.getElementsByClassName("元素的class");

程式碼範例：

	
		
	
	
		

			
我是测试代码1
			
我是测试代码2
		
		
	

效果圖：

總結：以上就是這篇文的全部內容，希望對大家的學習有所幫助。更多相關教學請造訪JavaScript影片教學！

相關推薦：

php公益訓練影片教學

#JavaScript圖文教學

JavaScript線上手冊

以上是js如何取得dom元素？ js透過dom尋找和取得元素物件的方法（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！