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元素，如果有多个的话，返回的是一个数组。