1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>js的DOM对象</title>
6 <script type="text/javascript">
7 // DOM:Document Object Model 文档对象模型
8 /*
9 文档:超文本文档html、xml
10 对象:提供了属性和方法
11 模型:使用属性和方法操作超文本标记型文档
12 可以使用js的DOM提供的对象,使用这些对象的属性和方法,对标记型文档进行操作
13 需要把HTML里面的标签、属性、文本内容都封装成对象
14 */
15 /*
16 DOM模型有三种
17 DOM level 1:将HTML文档封装成对象
18 DOM level 2:在level 1的基础上添加新的功能,例如:对于事件和CSS样式的支持
19 DOM level 3:支持XML 1.0的一些新特性
20 */
21 /*
22 解析过程
23 根据HTMl的层级结构,在内存中分配一个树形结构,需要把HTML中的每部分封装成对象
24 document:整个HTML文档
25 element:标签对象
26 属性对象
27 文本对象
28 Node节点对象:是这些对象的父对象
29 */
30 /*
31 常用属性
32 all[]提供对文档中所有HTML元素的访问,FF不支持
33 forms[]返回对文档中所有Form对象引用
34 body提供对<body>元素的直接访问
35 常用方法
36 getElementById()返回对拥有指定id的第一个对象的引用
37 getElementsByName()返回带有指定名称的对象集合
38 getElementsByTagName()返回带有指定标签名的对象集合
39 write()向文档写HTML代码或JavaScript代码
40 */
41 window.onload = function() {
42 var spans = document.getElementsByTagName("span")[1];
43 //for (var i = 0; i < spans.length; i++)
44 //{
45 //var span = spans[i];
46 document.write("<br />span:" + spans.innerHTML);
47 //}
48 }
49 </script>
50 </head>
51 <body>
52 <br /><br /><br />
53 <span>AAAAA</span>
54 <span>BBBBB</span>
55 <span>CCCCC</span>
56 <span>DDDDD</span>
57 </body>
58 </html>
![](https://images2015.cnblogs.com/blog/740085/201609/740085-20160912163856664-178102774.png)