0.前言
上一節我只和大家分享了DOM,但是也只是說了一些基礎知識，用法還沒給大家分享，今天就和大家分享一下用法：
- 獲取標簽(元素)節點
- 獲取屬性節點
-
獲取文本節點
今天主要說一下獲取標簽（元素）節點，剩下的往后說。1.獲取標簽（元素）節點
獲取標簽（元素）節點有種方法，接下來一一和大家分享。我用代碼和大家分享，顯得更加直觀。
首先搭出框架：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>獲取標簽(元素)節點</title> </head> <body> <div id="idDiv"></div> <div class="classDiv"></div> <div class="classDiv"></div> <div class="classDiv"></div> <div class="classDiv"></div> <input type="text" name="inputText"> <input type="text" name="inputText"> <input type="text" name="inputText"> <script type="text/javascript"> </script> </body> </html>(1)根據id值獲取元素節點
在script標簽中添加下面代碼:
//1、根據id值獲取元素節點 var jsDivId = document.getElementById("idDiv"); console.log(jsDivId); console.log(typeof jsDivId);運行結果如下：
捕獲.PNG
可見，通過getElementById()獲取到了id為idDiv的標簽節點，而且是object對象類型。
(2)根據class值獲取元素節點
var jsDivsClass = document.getElementsByClassName("classDiv"); for (var i in jsDivsClass) { console.log(jsDivsClass[i]); } for (var j = 0; j < jsDivsClass.length; j++) { console.log(jsDivsClass[j]); }運行結果：
捕獲.PNG
可見通過getElementsByClassName()獲取用class命名的標簽節點，得到的結果是一個數組，每一個元素代表一個div標簽。
(3)根據標簽名獲取元素節點
var jsDivTagName = document.getElementsByTagName("div"); for (var m = 0; m < jsDivTagName.length; m++) { console.log(jsDivTagName[m]); }運行結果：
捕獲.PNG
這是用getElementsByTagName()獲取到所有的div標簽，同時返回的也是一個數組。
(4)根據name屬性值獲取元素節點
var jsDivsName = document.getElementsByName("inputText"); for (var n = 0; n < jsDivsName.length; n++) { console.log(jsDivsName[n]); }運行結果：
捕獲.PNG
可見該方法視同過getElementsByName()方法獲取用name屬性命名的標簽。得到的也是一個數組。
2.總結
上面是最常用的四種獲取標簽(元素)節點的方法，希望對大家有所幫助，謝謝！！！