1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6
7 </head>
8 <body>
9 <div id="one">
10 <span>
11 在 HTML 中 DOM（文檔對象模型）是 Web 前端里最基礎、最常用的—模型。 12 例如，一個網頁其實就是一個 HTML 文件，經過瀏覽器的解析，最終呈現在用戶面前。 13 </span>
14 </div>
15 <div class="two">
16 <span>
17 每一層可以同時存在很多標簽，比如 head 和 body 屬於同一層，它們被外面的 html 套着。 18 這樣的結構很像計算機里的文件夾。例如，“我的電腦”是最外層，里面套着 C、D、E、F 盤，每個 19 盤里又有很多文件夾，文件夾里又有文件夾，逐個打開后才能看到具體的文件。 20 </span>
21 </div>
22 <div class="three" name="last">
23 <span>
24 為什么要按照這種結構來組織呢？目的其實是方便解析和查詢。解析的時候，從外向里循序漸進， 25 好比按照圖紙蓋房子，先蓋圍牆，再蓋走廊，最后才蓋卧室。查詢的時候，會遵循一條明確的路線， 26 例如“D盤/文化交流/影視作品/給產品經理講技術avi”，一層一層地縮小范圍，查找效率會非常高。 27 </span>
28 </div>
29 </body>
30 </html>
31 <script type="text/javascript">
32 var div = document.getElementById("one"); //通過id訪問
33 console.log(div); 34
35 var div2 = document.getElementsByTagName("div"); //通過TagName訪問
36 console.log(div2); 37 /*第三種方法*/
38 var div3 = document.getElementById("one"); 39 var arr1 = div3.getElementsByTagName("span"); //調用div3里面的通過標簽名訪問的函數,限定范圍
40 console.log(arr1); 41
42 /*第四種方法*/
43 var arr2 = document.getElementsByClassName("two"); //通過類名訪問
44 console.log(arr2); 45
46 var arr3 = document.getElementsByName("last"); //第五種方法，通過name訪問
47 console.log(arr3); 48 </script>
DOM是文檔對象模型，這里文檔代表的是整個網頁，所以獲取元素都是通過document對象來獲取的。第一行JS代碼的作用是會把html元素轉換為一個JS對象，那個div就是一個JavaScript對象。其次應注意，像這種方式獲取html元素，如果有多個的話，返回的是一個數組。