欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript学习笔记(四)——DOM

程序员文章站 2024-01-30 11:50:46
第五章 网页交互——文本对象模型【Document object model】 1 简单介绍DOM,dom是将html与javascript进行交互的工具。 【使用innerHTML时注意:html中的内容是按照HTML本身的先后顺序加载的。故js对应代码应置于html之后】 问题: *docume ......

第五章 网页交互——文本对象模型【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 <!doctype html>
 2 
 3 <html>
 4 
 5 <body>
 6 
 7 <div id="div1">
 8 
 9 <p id="p1">这是一个段落。</p>
10 
11 <p id="p2">这是另一个段落。</p>
12 
13 </div>
14 
15 <script>
16 
17 var para=document.createelement("p");//创建标签元素
18 
19 var node=document.createtextnode("这是新段落。");//创建文本
20 
21 para.appendchild(node);//为p添加文本
22 
23 //为div1添加元素
24 
25 var element=document.getelementbyid("div1");
26 
27 element.appendchild(para);
28 
29 </script>
30 
31 </body>
32 
33 </html>

 

(2)修改元素

1 var planet=document.getelementbyid("p2");//获取dom指定id的元素
2 
3 planet.innerhtml="red alert:hit by phaser fire!";//使用innerhtml属性修改内容

 

(3)删除元素

 1 <!doctype html>
 2 
 3 <html>
 4 
 5 <body>
 6 
 7 <div id="div1">
 8 
 9 <p id="p1">这是一个段落。</p>
10 
11 <p id="p2">这是另一个段落。</p>
12 
13 </div>
14 
15 <script>
16 
17 var parent=document.getelementbyid("div1");//获取父元素
18 
19 var child=document.getelementbyid("p1");//获取子元素
20 
21 parent.removechild(child);//删除
22 
23 </script>
24 
25 </body>
26 
27 </html>

 

4 特性

(1)设置setattribute();

例如:

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

(2)获取特性getattribute();

例如:

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

5 完整例子

 1 <!doctype html>
 2 
 3 <html lang="en">
 4 
 5 <head>
 6 
 7 <title>my blog</title>
 8 
 9 <meta charset="utf-8">
10 
11 <style type="text/css">
12 
13 .redtext{
14 
15 color:red;
16 
17 }
18 
19 </style>
20 
21 <script language="javascript" type="text/javascript">
22 
23 function inni(){
24 
25 var planet=document.getelementbyid("p2");//获取dom指定id的元素
26 
27 planet.innerhtml="red alert:hit by phaser fire!";//使用innerhtml属性修改内容
28 
29 planet.setattribute("class","redtext");//设置特性
30 
31 var attribute=planet.getattribute("text");//获取特性,返回为null,不太清楚什么是特性?
32 
33 console.log("i'm not see the image in the console,but i'm told it looks like:"+attribute);
34 
35 }
36 
37 window.onload=inni;
38 
39 </script>
40 
41 </head>
42 
43 <body>
44 
45 <h1>my blog</h1>
46 
47 <div id="entry1">
48 
49 <h2>great day bird watching</h2>
50 
51 <p id="p1">
52 
53 today i saw three ducks!<br />
54 
55 i named them <br />
56 
57 huey,louie,and dewey.
58 
59 </p>
60 
61 <p id="p2">
62 
63 i took a couple of photos...
64 
65 </p>
66 
67 </div>
68 
69 </body>
70 </html>