深入解读JavaScript中BOM和DOM
BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的接口,提供访问文档各个功能部件(如窗口本身、屏幕功能部件、浏览历史记录等)的途径以及操作方法。
遗憾的是,BOM只是JavaScript脚本实现的一部分,没有任何相关的标准,每种浏览器都有自己的BOM实现,这可以说是BOM的软肋所在通常情况下浏览器特定的JavaScript 扩展都被看作BOM的一部分,主要包括:
◆关闭、移动浏览器及调整浏览器窗口大小;
◆弹出新的浏览器窗口;
◆提供浏览器详细信息的定位对象;
◆提供载入到浏览器窗口的文档详细信息的定位对象;
◆提供用户屏幕分辨率详细信息的屏幕对象;
◆提供对cookie的支持;
◆加入ActiveXObject类扩展BOM,通过JavaScript实例化ActiveX对象。
BOM有一些事实上的标准,如窗口对象、导航对象等,但每种浏览器都为这些对象定义或扩展了属性及方法。Document Object Model,这个就是标准了,由著名的w3c制定,目前最高的级别是level 3,不过3还没有彻底完成。
目前主流的浏览器都可以支持到(仅仅是支持到哦,并不是完全遵守的)level 2,对html,也就是html4.x,目前最高的是4.01,后来w3c向把html统一向xml靠拢,于是就有了xhtml1.0,再后来,w3c想搞一个xhtml2.0,结果进度缓慢,加之各大厂商又不看好,于是就有了html5.0
1、创建节点
1.createElement():
2.var a = document.createElement(“p”);
它创建的是一个元素节点,所以nodeType等于1,a.nodeName将返回p。
注意;createElement()方法创建出来的新元素节点不会被自动添加到文档里,既然没添加到文档里,说明它还是一个游离的状态。所以它也没有nodeParent属性。如果想把它添加到文档里,可以使用 appendChild()或者insertBefore()方法或者replaceChild()方法。当然我们在前面的例子中,自己写了一个 insertAfter()方法,比如:
3.var a = document.createElement(“p”);
4.document.body.appendChild(a);
注意: appendChild()默认是添加到文档的最后。也就是lastChild子节点。如果想添加到某个地方,可以使用insertBefore()。如果想在元素插入之前给元素添加属性。可以这么做:
5.var a = document.createElement(“p”);
6. a.setAttribute(“title”,”my demo”);
7.document.body.appendChild(a);
8.createTextNode():
9.var b = document.createTe xtNode(“my demo”);
它创建的是一个文本节点,所以nodeType等于3 。b.nodeName 将返回 #text ; 跟createElement()一样,用createTextNode()创建的节点也不会自动添加到文档里。需要使用 appendChild()或者insertBefore()方法或者replaceChild()方法。它经常与createElement()配合使用,知道为什么吗?(一个元素节点,一个文本节点。)
10.var mes = document.createText Node(“hello world”);
11.var container = document.createElement(“p”);
12.container.appendChild(mes);
13.document.body.appendChild(container);
2、复制节点
cloneNode(boolean):
14.var mes = document.createTextNode("hello world");
15.var container = document.createElement("p");
16.container.appendChild(mes);
17.document.body.appendChild(container);
18.var newpara = container.cloneNode(true);//true和false的区别
19.document.body.appendChild(newpara );
注意:
◆true的话:是
aaaa
克隆。◆false:只克隆
,不克隆里面的文本。◆可以自己写个例子,然后用firebug看看。
克隆后的新节点,和createTextNode()一样不会被自动插入到文档。需要appendChild();另外还有一个注意:如果克隆后,id一样,不要忘记用
setAttribute(“id” , “ another_id “);改变新的节点的ID。
3、插入节点
appendChild() :
1.var container = document.createElement("p");
2.var t = document.createTextNode("cssrain");
3.container.appendChild(t);
4.document.body.appendChild(container);
它经常跟createElement()和createTextNode(),cloneNode()配合使用。另外appendChild()不仅可以用来追加新的元素,也可以你挪动文档中现有的元素。看下面的例子:
5.
msg
6.
content
7.
aaaaaaaa
8.
9.var mes = document.getElementById("msg");
10.var container = document.getElementById("content");
11.container.appendChild(mes);
12.
13.//发现msg放到 content 后面去了。
14.
15.content
16.
msg
17.
18.
aaaaaaaa
第二个参数是可选,如果第二个参数不写,将默认添加到文档的最后,相当于appendChild();我们看看insertBefore()怎么使用:
19.
20.
1111
21.
22.
222
23.
aaaaaaaa
24.
25.
26.var msg = document.getElementById("msg");
27.var aaa = document.getElementById("aaa");
28.var test = document.getElementById("cssrian");
29.test.insertBefore( msg , aaa );
30.
31.// 我们发现ID为msg的插入到了aaa的前面。
Js内部处理方式跟 appendChild()相似。
4、删除节点
removeChild():
32.
33.
34.
35.
36.
37.
38.
39.
40.var msg = document.getElementById("cssrain");
41.var b = document.getElementById("b");
42.msg.removeChild(b);
43.
如果不知道要删除的节点的父节点是什么?可以使用parentNode属性。比如:
44.
45.
46.
47.
48.
49.
50.
51.
52.var b = document.getElementById("b");
53.var c = b.parentNode;
54. c.removeChild(b);
55.
注意:你如果想把某个节点从一处移动到另一个地方,不必使用removeChild()。可以使用前面的 appendChild()和insertBefore(),他们都会自动先删除节点,然后移动到你指定的地方。
5、替换节点
56.Element.repalceChild( newNode , oldNode ):
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.var cssrain = document.getElementById("cssrain");
67.var msg = document.getElementById("b");
68.var para = document.createElement("p");
69.cssrain.replaceChild( para , msg );
70.
6、设置/获取属性节点
1.setAttribute();//设置
2.
3.var a = document.createElement(“p”);
4. a.setAttribute(“title”,”my demo”);
5.
6.var a =document.getElementById(“cssrain”);
7.var b = a.getAttribute(“title”);
获取的时候,如果属性不存在,则返回空,注意ie和ff返回不同,可以看我以前的例子。返回虽然不同,但是可以用一个方法来判断:if(a.getAttribute(“title”) ){ }
7、查找节点
getElementById();
返回一个对象,对象拥有 nodeName , nodeType , parentNode , ChildNodes 等属性。getElementsByTagName():查找标签名的所有元素。返回一个集合,可以用循环取出每个对象,对象拥有 nodeName , nodeType , parentNode , ChildNodes 等属性。例子:
8.var ps = document.get ElementsByTagName(“p”);
9.for(var i=0 ; i 10.ps[i].setAttribute(“title”,”hello”); 11.//也可以使用: ps.item(i).setAttribute("title","hello"); 12.} 13. 14.
15.
16.
17.
18.
19.
20.
21.
22.var ps = document.getElementById("cssrain")
23.if(ps.hasChildNodes){
24. alert( ps.childNodes.length );
25.}
26.
8、DOM属性
我们常用的3中类型:
nodeType == 1 :元素节点
nodeType == 2 :属性节点
nodeType == 3 :文本节点
如果想记住的话,上面的顺序我们可以看做是从前到后。比如:
test
从前往后读:你会发现先是元素节点,然后是属性节点,最后是文本节点,这样你就很容易记住了nodeType分别代表什么类型了。nodeType属性经常跟if配合使用,以确保不会在错误的节点类型上执行错误的操作。比如:27.function cs_demo(mynode){
28. if(mynode.nodeType == 1){
29. mynode.setAttribute("title","demo");
30. }
31.}
代码解释:先检查mynode的nodeType属性,以确保它所代表的节点确实是一个元素节点。和nodeName属性一样,他也是只读属性,不能进行设置.
32.
33.
34.var c= document.getElementById("c");
35.alert( c.nodeValue );//返回null
36.
nodeValue是一个可以读、写的属性。但它不能设置元素节点的值。看下面的例子:
37.
38.
39.var c= document.getElementById("c");
40. c.nodeValue =" dddddddddddd"; //不能设置
41. //alert( c.firstChild.nodeValue ) //元素节点包括属性节点和文本节点。
42. c.firstChild.nodeValue = "test"//能设置
43.
当然我们为了确保能正确运行:可以加一段代码:
44.
45.
46.var c= document.getElementById("c");
47. c.nodeValue =" dddddddddddd"; //不能设置
48. //alert( c.firstChild.nodeValue )
49. if( c.firstChild.nodeType==3 ){ //判断是不是文本节点
50. c.firstChild.nodeValue = "test"//能设置
51. }
52.
nodeValue一般只用来设置文本节点的值。如果要刷新属性节点的值,一般使用setAttribute(). childNodes属性:返回一个数组,数组由元素节点的子节点构成。由于文本节点和属性节点都不可能再包含任何子节点,所以他们的childNodes属性永远返回一个空数组。
可以使用hasChildNodes方法,它用来判断某个元素有没有子节点。或者if (container.childNodes.length < 1) ;childNodes也是一个只读属性。如果要增加节点,可以使用appendChild()或者insertBefore() ,删除节点可以使用removeChild(); 操作后,childNodes属性会自动刷新。
firstChild属性
由于文本节点和属性节点都不可能再包含任何子节点,所以他们的firstChild属性永远返回一个空数组。如果没有子节点,将返回null;node.firstChild 等价
于 node.childNodes[0] ; firstChild属性是一个只读属性。
lastChild属性
由于文本节点和属性节点都不可能再包含任何子节点,所以他们的lastChild属性永远返回一个空数组。如果没有子节点,将返回null; https://www.wendangku.net/doc/1416691756.html,stChild 等价
于 node.childNodes[ node.childNodes.length - 1 ] ;lastChild属性是一个只读属性。
nextSibling属性
返回目标节点的下一个兄弟节点。如果目标节点后面没有同属于一个父节点的节点,nextSibling 将返回null ;nextSibling 属性是一个只读属性。
previousSibling属性
返回目标节点的前一个兄弟节点。如果目标节点前面没有同属于一个父节点的节点,previousSibling 将返回null ;previousSibling 属性是一个只读属性。
parentNode属性
注:parentNode属性返回的节点永远是一个元素节点,因为只有元素节点才有可能有子节点。
当然有个例外
document节点,他没有父节点。所以document节点的parentNode属性将返回null;parentNode 属性是一个只读属性
JavaScript制作页面特效课后练习 1.在某页面中有一个图片和五个超链接,如下图所示,单击不同的数字超链接显示不同的 图片: 图1 图片幻灯片显示效果 提示: (1)默认显示一个图片,五个超链接调用同一个传参函数,参数设置为显示图片的名称。 (2)使用“对象名.属性值”或setAttribute()的方式改变图片的名称。 2.做一个模仿删除用户的页面,功能如下: 默认情况下,在一个Table 里面放置若干用户信息,后面有“删除”链接:
图2 模仿删除用户的页面效果1 点击“删除”链接,弹出对话框,提示用户是否继续操作: 图3 模仿删除用户的页面效果2 用户点击确定后,要删除的一行,自动加上删除线,表示处于删除状态: 图4 模仿删除用户的页面效果3 提示: (1)使用confirm 弹出确认框,如果用户点击“确定”,则返回true,进行下一步操作; (2)定义一个类样式,用来标识删除状态,如果用户点击了“确定”按钮之后,该行所对 应的tr 标签,自动应用该类样式。 3.做一个横向导航菜单,并且每一项均包含一个二级的菜单,效果图如下:
图5 横向导航菜单 当鼠标不在菜单上时,二级菜单不显示,当鼠标移动到任一项上时,显示该项对应的二级菜 单。 提示: (1)使用对象的display 属性可以控制对象的显示与隐藏; (2)使用相对定位/绝对定位来控制二级菜单的显示位置; (3)使用鼠标的两个事件(onmouseove/onmouseout)来触发控制函数。 4.做一个横向不间断滚动的特效,效果图如下:
图6 图片横向滚动特效 要求:图片始终横向向左滚动,并且每一张图片首尾相连,不存在间断。 提示: (1)若要使图片不间断,则需要将图片列表重复一次,这样第一遍的末尾图片和第二遍的 开始图片就能相连了,即使用innerHTML 属性让图片内容翻倍;(2)使用setInterval()方法,可以控制一个函数每隔多少毫秒执行一次; (3)使用绝对定位与相对定位结合,可以使图片所在的层相对于父层的位置可控,方便随 着计时器的执行,left 的值递减;
《HTML+CSS+JavaScript网页制作案例教程》课程教学大纲 (课程英文名称) 课程编号:201509210011 学分:5学分 学时:64学时(其中:讲课学时:45 上机学时: 19 ) 先修课程:计算机基础、计算机网络、计算机应用 后续课程:UI设计、 JavaScript网页特效 适用专业:信息及其计算机相关专业 开课部门:计算机系 一、课程的性质与目标 《HTML+CSS+JavaScript网页制作案例教程)》是面向计算机相关专业的一门专业基础课,涉及网页基础、HTML标记、CSS样式、网页布局、JavaScript 编程基础与事件处理等内容。通过本课程的学习,学生能够了解HTML、CSS及JavaScript语言的发展历史及未来方向,熟悉网页制作流程、掌握常见的网页布局效果、学会制作各种企业、门户、电商类网站。 二、课程的主要内容及基本要求 第一章网页那点事(2学时) [知识点] 认识网页 常见的互联网专业术语 Web标准 HTML简介 CSS简介 JavaScript简介 常用浏览器介绍 Dreamweaver 工具的使用
使用Dreamweaver创建第一个页面 [重点] Web标准 Dreamweaver工具的使用 [难点] Web标准 Dreamweaver工具创建第一个页面 [基本要求] 了解Web标准,明确HTML、CSS及JavaScript在其中的作用。 熟悉Dreamweaver工具的基本操作,能使用Dreamweaver创建简单的网页。第二章从零开始构建HTML页面(4学时) [相关案例] 【案例1】简单的网页: 【案例2】新闻页面: 【案例3】图文混排: [知识点] HTML文档基本格式
《网页设计与制作项目教程()(一般)》试卷 得分 一、单选题(每题2分,共计30分) 1.关于<>标记的描述,下列选项中正确的是()。() A、是表格中的单元格标记 B、可以单独使用 C、是表格中的行标记 D、没有属性 2.若超链接的属性,需要链接到页面中的锚点,以下书写正确的是()() A、 B、 C、 D、 3.中,通过链接伪类可以实现不同的链接状态。下列用来定义未访问时超链接状态的是()()A、 B、 C、 D、4.下列有关样式,说法正确的是()。() A、样式必须写在一对;标签内部 B、用于设置页面中的文本内容、图片的外形以及版面的布局等外观显示样式 C、只有外部的文件才是符合结构与表现分离的特点 D、目前流行的版本为3 5.下列样式代码中,可以实现相对定位模式的是()。() A、: ; B、: ; C、: ; D、: ; 6.关于样式代码“{:200; :15; :20;}”下列说法正确的是()。() A、的总宽度为200 B、的总宽度为270 C、的总宽度为235 D、以上说法均错误 7.关于行内式引入样式表,以下书写正确的是()() A、 :12; ;段落文本; B、 :12, ;段落文本; C、 :12; ;段落文本; D、 :12; ;段落文本; 8.使用标签指定式选择器,让段落应用名为的类,下列写法正确的是( )() 总分题号一二三四五题分 得分
A、 {;} B、{;} C、{;} D、{;} 9.下列选项中,调用名为"" 的函数正确的是()() A、 B、() C、() D、 10.认真阅读下面代码,并按要求进行作答。1=" a "2=" "312;根据上述代码,3的运算结果是()() A、 B、 C、 D、 11.关于有序列表的描述,下列说法正确的是()() A、有序列表没有排列顺序 B、有序列表按顺序排列,并不带有序号 C、有序列表按顺序排列并通过属性定义序号样式 D、有序列表不可以和无序列表嵌套使用 12.若要在网页中插入样式表,以下用法中正确的是()() A、; B、; C、; D、; 13.下列选项中,用于删除当前节点的子节点的方法是()() A、() B、() C、() D、() 14.以下属性中,不能增加盒子尺寸的属性是()。() A、 B、 C、 D、 15.网页程序设计中,运行下面的代码,则对话框中将显示()。< ""> 3 2 (2)(z);<>() A、2 B、2.5 C、5 D、16 得分 二、多选题(每题3分,共计15分)
网上客服培训考核 ---阶段二HTML标签和JavaScript脚本 试题类型:HTML标签和JavaScript脚本 考核类型:开卷
1. HTML(Hypertext Markup Language超文本标记语言)是一种用来制作超文本文 档的简单标记语言。利用各种标记(tags)来标识文档的结构以及标识超链(Hyperlink)的信息 2.HTML的标记总是封装在由 < 和 > 构成的一对尖括号之中。 除少数几个转义序列之外,HTML标记忽略大小写,即
关于JavaScript的学习总结 通过对《JavaScript DOM编程艺术》这本书的学习,总共学习到三大部分的内容:JavaScript1,JavaScript DOM和CSS样式表。CSS和JavaScript 都是通过控制页面标签的方式,来完善页面,使页面更美观,内容更丰富。 一、JavaScript部分 1.关于JavaScript js脚本语言 JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。 2.JS变量 2.1 JS的变量为易变量,没有类型的限制可以等于所有的类型。 2.2 JS变量的命名规则和java相同,且区分大小写。 JS的数据类型有7种:Number 数字类型、String 字符串类型、Boolean 布尔类型、Array 数组类型、Object 对象、Null 空对象、Undefined 未定义。 2.3 变量的声明,直接用var关键字声明即可:var a=90。也可以一次性声明多个变量:var b=1,c=2,d=3。如果一个变量没有声明就使
用,或是声明了没有设置值都是undefined。 3.数据类型的定义 数值类型: var age=33; 字符串类型: var mood=”happy” 布尔值类型: var add=true; 数组类型: var list= Array(2) list[0]=”jhon”; list[1]=33; 或者: var list=Array(“jhon”,33) (注:数组内可定义任意类型的数据,且数组下标从0 开始) NULL类型: var name=null ;或name=””; Undefined类型: var person; 对象类型: var jer= new person; 对象类型是一种非常重要的数据类型.对象是自我包含的数据集合,包含在对象里的数据可以通过两种方式--属性(property)和方法(method) 访问 例如: person.age Math.round() 4.JS操作符 算数操作符:加法(+),减法(-),乘法(*),除法(/) 如: var num=1+1; var num=num-1; var num=num*num; var num=num/2;
Javascript 114、alert怎样换行? \r\n 115、什么情况用HTML控件,什么情况用WEB控件,并比较两者差别 如果有数据提交到server端时用web control好。一般为了提高效率能用html control在客户端执行,就用html control。 116、JavaScript中的对象. JavaScript中的Object是一组数据的key-value的集合,有点类似于Java中的有这些数据都是Object里的property.通常情况下,JavaScript中建立一个对象用”new”加上constructor function来实现.如new Date(),new Object()等. var book=new Object(); https://www.wendangku.net/doc/1416691756.html,="JavaScript is Cool"; book.author="tom"; book.pages=514; 上面例子中的name和page就是名为book的对象中的property.我们可以用delete 来删除Object中的property:“delete https://www.wendangku.net/doc/1416691756.html,;”.除了Object,Date等buildin 的对象外,我们可以写自己的constructor function,然后使用new就可以建立自己的对象.如上面的book可以写成: function Book(name,author,page){ https://www.wendangku.net/doc/1416691756.html,=name; this.author=author; this.page=page; } var abook=new Book("JavaScript is Cool","tom",514); 117、function的用法 在JavaScript中,function是一种数据类型,所有的function都是从buildin的Function object衍生的对象.所以在JavaScript中function可以作为参数传递,可以作为Object的property,也可以当作函数返回值.function在JavaScript中有两种用法,一种是当作constructor,前面加上new keyword用来建立对象.一种是当作method,为其他对象调用. 注意function和method在中文里的意思相当,在有些语言里也可以通用.但是在JavaScript中,它们还是有所区别的.function本身是是一个对象,而当作为一个方法他属于一个对象时,就成为了一个这个对象的method,相当于一个对象种的属性.也就是说method是相对于一个对象而言的,function在某些情况下成为了一个对象的method. function Book(name,author,page){ https://www.wendangku.net/doc/1416691756.html,=name; this.author=author; this.page=page;
什么是DOM? 通过JavaScript,您可以重构整个HTML文档。您可以添加、移除、改变或重排页面上的项目。 要改变页面的某个东西,JavaScript就需要对HTML文档中所有元素进行访问的入口。这个入口,连同对HTML元素进行添加、移动、改变或移除的方法和属性,都是通过文档对象模型来获得的(DOM)。 在1998年,W3C发布了第一级的DOM规范。这个规范允许访问和操作HTML页面中的每一个单独的元素。 所有的浏览器都执行了这个标准,因此,DOM的兼容性问题也几乎难觅踪影了。 DOM可被JavaScript用来读取、改变HTML、XHTML以及XML文档。 DOM被分为不同的部分(核心、XML及HTML)和级别(DOM Level 1/2/3): Core DOM 定义了一套标准的针对任何结构化文档的对象 XML DOM 定义了一套标准的针对XML文档的对象 HTML DOM 定义了一套标准的针对HTML文档的对象。 HTML DOM 节点 HTML文档中的每个成分都是一个节点。 节点 根据DOM,HTML文档中的每个成分都是一个节点。 DOM是这样规定的: ?整个文档是一个文档节点 ?每个HTML标签是一个元素节点 ?包含在HTML元素中的文本是文本节点 ?每一个HTML属性是一个属性节点
注释属于注释节点 Node 层次 节点彼此都有等级关系。 HTML文档中的所有节点组成了一个文档树(或节点树)。HTML文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点,并由此继续伸出枝条,直到处于这棵树最低级别的所有文本节点为止。 文档树(节点数) 请看下面这个HTML文档:
js对Table操作大全