JavaScript基础15——js的DOM对象

最新推荐文章于 2025-11-29 13:42:57 发布

转载最新推荐文章于 2025-11-29 13:42:57 发布 · 65 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/linyisme/p/5865303.html

文章标签：

#javascript #ViewUI

本文详细介绍了JavaScript中的DOM（文档对象模型）概念及其不同级别，包括DOM Level 1的基础封装，Level 2对事件和CSS的支持，以及Level 3对XML的新特性支持。通过实例展示了如何使用DOM提供的对象及方法来操作HTML文档。

 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://www.cnblogs.com/linyisme/p/5865303.html