JavaScript基础15——js的DOM对象

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript基础15——js的DOM对象相关的知识,希望对你有一定的参考价值。

 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>

技术分享

以上是关于JavaScript基础15——js的DOM对象的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript基础

JavaScript基础和js概括

javascript DOM

前端:JavaScript基础

四javaScript基础&DOM

JavaScript基础