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"盒子裡的內容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="box" onclick="getValue()">我是测试代码</div>
<script>
function getValue(){
var x=document.getElementById("box")
alert(x.innerHTML)
}
</script>
</body>
</html>效果圖：
注意：getElementById()括號中的不需要在前面加“#”，因為方法就決定了括號中的值是一個元素的id值。該方法傳回一個DOM物件。
2、透過標籤名稱尋找並取得到元素：getElementsByTagName()
getElementsByTagName()方法：是透過元素的標籤名稱來尋找並取得一組元素物件（有多少就取得多少），其傳回的是指定標籤名的物件集合。
語法：
document.getElementsByClassName("元素的标签名");程式碼範例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>Hello World!</p>
<div id="main">
<p>The DOM is very useful.</p>
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>
</div>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id 为 "main" 的 div 中的第一段文本是：' + y[0].innerHTML);
</script>
</body>
</html>效果圖：
3、透過class （類別）尋找並取得到元素：getElementsByClassName()
getElementsByClassName()方法：是透過指定的class（類別）屬性值來尋找並取得元素的，其傳回的是帶有指定類別名稱的元素集合，可以說它是一個物件的集合。
語法：
document.getElementsByClassName("元素的class");程式碼範例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="main">
<p class="a">我是测试代码1</p>
<p class="a">我是测试代码2</p>
</div>
<script>
var x = document.getElementById("main");
var y = x.getElementsByClassName("a");
document.write('id 为 "main" 的 div 中的第一段文本是：' + y[0].innerHTML);
</script>
</body>
</html>效果圖：
總結：以上就是這篇文的全部內容，希望對大家的學習有所幫助。更多相關教學請造訪JavaScript影片教學！
相關推薦：
以上是js如何取得dom元素？ js透過dom尋找和取得元素物件的方法（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
