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 <!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>
上一篇: Winform中实现颜色拾取器获取RGB与16进制颜色程序与源码分享
下一篇: 浅谈单例
推荐阅读
-
JavaScript学习笔记(四)——DOM
-
JavaScript学习笔记
-
JavaScript高级程序设计(第3版)学习笔记10 再访js对象_基础知识
-
CAS单点登录学习笔记四之HTTPS 单向认证方式 服务端和客户端配置
-
javascript学习笔记(二) 鼠标经过时,改变div块的背景色的代码_基础知识
-
《Unix & Linux 大学教程》 - 第三、四章 学习笔记
-
JavaScript学习笔记: 数组(七)_html/css_WEB-ITnose
-
JavaScript 权威指南(第四版) 读书笔记_javascript技巧
-
CS231n课程学习笔记(四)——反向传播
-
学习笔记(一) JavaScript中“==”和“===”的区别