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>

时间： 2024-08-25 17:05:53

JavaScript基础15——js的DOM对象的相关文章

JavaScript基础17——js的Date对象

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js的Date对象</title> 6 <script type="text/javascript"> 7 var date = new Date(); 8 document.write("当前日期:" + date); 9

JavaScript基础13——js的string对象

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js的string对象</title> 6 <script type="text/javascript"> 7 var str = "abcdefg"; 8 document.write("str字符串:"

JavaScript基础14——js的Math对象

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js的Math对象</title> 6 <script type="text/javascript"> 7 // Math对象中的都是静态方法,不用实例化对象就可以使用 8 var num = 10.5; 9 document.write(&qu

JavaScript基础18——js的Array对象

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js的Array对象</title> 6 <script type="text/javascript"> 7 var arr = [1,2,3,4,5]; 8 document.write("数组:" + arr); 9 //

JavaScript基础16——js的BOM对象

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js的BOM对象</title> 6 <script type="text/javascript"> 7 // BOM:Broswer Object Model 浏览器对象模型 8 /* 9 navifator 获取客户端(浏览器)的信息 10

js之DOM对象三一.JS中for循环遍历测试 for循环遍历有两种第一种:是有条件的那种,例如 for(var i = 0;i<ele.length;i++){} 第二种:for (var i in li ){} 现在我们来说一下测试一下第二种(数组和obj的) 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8">

js之DOM对象三

JS and DOM 对象列表

JavaScript 对象(9个) JS Array JS Boolean JS Date JS Math JS Number JS String JS RegExp JS Functions JS Events Browser 对象(5个) Window Navigator Screen History Location HTML DOM 对象(4个) DOM Document DOM Element DOM Attribute DOM Event HTML 对象(...) <a> <

关于JS读取DOM对象(标签)的自定义属性

DOM对象对于js来说,是个很基础的元素,我们写js一般来说,都一定会对它进行操作.我们可以很方便地给它加上自定义的属性,比如: var test = document.getElementById("test"); test.adang = "adang"; alert(test.adang); 我们会发现,已经给这个id为test的DOM元素添加了一个叫做adang的属性了,然后在js中,可以调用这个属性.我在写js的时候经常用到这种方法,可以很方便地对某个do