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>
