JavaScript学习笔记（四）——DOM

第五章 网页交互——文本对象模型【Document object model】

1 简单介绍DOM，dom是将html与javascript进行交互的工具。

【使用innerHTML时注意：html中的内容是按照HTML本身的先后顺序加载的。故js对应代码应置于html之后】

问题：

　　*document.getElementById时，id不存在返回null，存在返回对应字符串；

　　*planet.innerHTML其中innerHTML属性可以修改字符串的内容；

　　*getElementsByClassName可以返回类名的元素集合；

　　*getElementsByTagName返回与指定标签名匹配的元素；

　　*innerHTML甚至可以替换整个body的内容；

2 介绍window.onload=函数名;

回调函数，在网页加载完毕后再回调onload指向的指定函数。

3 关于元素的修改

（1）添加新元素

 1 
 2 
 3 
 4 
 5 
 6 
 7 

 8 
 9 
这是一个段落。
10 
11 
这是另一个段落。
12 
13 
14 
15 
30 
31 
32 
33 

 

（2）修改元素

1 var planet=document.getElementById("p2");//获取DOM指定ID的元素
2 
3 planet.innerHTML="Red Alert:hit by phaser fire!";//使用innerHtml属性修改内容

 

（3）删除元素

 1 
 2 
 3 
 4 
 5 
 6 
 7 

 8 
 9 
这是一个段落。
10 
11 
这是另一个段落。
12 
13 
14 
15 
24 
25 
26 
27 

 

4 特性

（1）设置setAttribute();

例如：

 1 planet.setAttribute("class","redtext");//为planet添加一个class名为redtext 

（2）获取特性getAttribute();

例如：

var alttext=scoop.getAttribute("alt");//其中scoop类似于planet，alt为获取其值的特性的名称？？

5 完整例子

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
10 
11 
20 
21 
40 
41 
42 
43 
44 
45 
My blog
46 
47 

48 
49 
Great day bird watching
50 
51 

52 
53 Today I saw three ducks!

54 
55 I named them 

56 
57 Huey,Louie,and Dewey.
58 
59 
60 
61 

62 
63 I took a couple of photos...
64 
65 
66 
67 
68 
69 
70