文档库 最新最全的文档下载
当前位置:文档库 › 深入解读JavaScript中BOM和DOM

深入解读JavaScript中BOM和DOM

深入解读JavaScript中BOM和DOM
深入解读JavaScript中BOM和DOM

深入解读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.

13.//发现msg放到 content 后面去了。

14.

15.content

16.

msg

17.

18.

aaaaaaaa

第二个参数是可选,如果第二个参数不写,将默认添加到文档的最后,相当于appendChild();我们看看insertBefore()怎么使用:

19.

20.

1111

21.

msg
test

22.

222

23.

aaaaaaaa

24.

25.

31.// 我们发现ID为msg的插入到了aaa的前面。

Js内部处理方式跟 appendChild()相似。

4、删除节点

removeChild():

32.

33.

34.

a

35.

b

36.

c

37.

38.

39.

如果不知道要删除的节点的父节点是什么?可以使用parentNode属性。比如:

44.

45.

46.

a

47.

b

48.

c

49.

50.

51.

注意:你如果想把某个节点从一处移动到另一个地方,不必使用removeChild()。可以使用前面的 appendChild()和insertBefore(),他们都会自动先删除节点,然后移动到你指定的地方。

5、替换节点

56.Element.repalceChild( newNode , oldNode ):

57.

58.

59.

60.

a

61.

b

62.

c

63.

64.

65.

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.

a

17.

b

18.

c

19.

20.

21.

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.

aaaaaaaaaaaaaaaa

33.

nodeValue是一个可以读、写的属性。但它不能设置元素节点的值。看下面的例子:

37.

aaaaaaaaaaaaaaaa

38.

当然我们为了确保能正确运行:可以加一段代码:

44.

aaaaaaaaaaaaaaaa

45.

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 属性是一个只读属性

4:JavaScriptjavaDOM

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网页制作案例教程》_教学大纲讲解

《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文档基本格式

网页设计与制作项目教程(HTML+CSS+JavaScript)(一般)

《网页设计与制作项目教程()(一般)》试卷 得分 一、单选题(每题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分)

web开发知识练习(HTML标签和JavaScript脚本)

网上客服培训考核 ---阶段二HTML标签和JavaScript脚本 试题类型:HTML标签和JavaScript脚本 考核类型:开卷

1. HTML(Hypertext Markup Language超文本标记语言)是一种用来制作超文本文 档的简单标记语言。利用各种标记(tags)来标识文档的结构以及标识超链(Hyperlink)的信息 2.HTML的标记总是封装在由 < 和 > 构成的一对尖括号之中。 除少数几个转义序列之外,HTML标记忽略大小写,即等价于<TITLE> 3. <html> 标记用于Html文档的最前边,用来标识Html文档的开始。而</html>标记 恰恰相反,它放在Html文档的最后边,用来标识Html文档的结束。所有其它HTML标记和文档内容都包含在这对标记之间。 4.<head> 与 </head> 之间的头部信息通常含有 <title> 标记,用来确定HTML文件 的标题,即显示在浏览器左上角标题栏处的文字。 5. <head></head> 构成Html文档的开头部分,此标记对之间包含的是HTML文档 的头信息,如标题、说明内容等等,其中可包括<title>等标记对 6. 之间的内容是HTML文档的主体部分,在此标记对之间可包含、 、



等众多的标记它们所定义的文本、图像等将会在浏览器的框内显示出来,标记中还可以有很多属性,以下是主要的几种设置背景颜色bgcolor =”颜色码”,设置文本颜色 text = “颜色码”,设置链接颜色 link = “颜色码”,设置已使用的链接的颜色 vlink = “颜色码”,设置正在被击中的链接的颜色 alink = “颜色码”。 7. 之间的内容是HTML文档的标题,标题的显示位置不是浏览器的 文本区,而是在Web浏览器窗口最左上方的蓝色标题栏里。 8.标记对是用来创建一个段落(Paragraph),在此标记对之间加入的文 本将按照段落的格式显示在浏览器上。另外,标记还可以使用align属性,它用来说明对齐方式 9. 是典型的单标记,使用也很简单,它的功能是用来创建一个回车换行 10.
标志对用来排版大块Html段落,也用于格式化表,此标志对的用法与 标志对非常相似,同样有align对齐方式属性。 11.
 标记用于显示预格式化文本(Preformatted Text),在这对标记之 间的文本,与其他HTML文本的格式编辑方式不同 12.Html语言提供了一系列对文本中的标题进行操作的标记对: 

……
,一共有六对标题的标记对 13.用来使文本以粗体效果的形式输出; 14.用来使文本以斜体效果的形式输出; 15.用来使文本以带下划线的形式输出。 16.则用来输出加重语气文本(通常也是斜体加黑体)。 17. 是一对很有用的标记对,它可以对输出文本的字体大小、颜色进 行随意地改变,这些改变主要是通过对它的两个属性 size 和 color 的控制来实现的。 size属性用来改变字体的大小,取值范围从1到7;而color属性则用来改变文本的颜色 18. 是单标记,它通过src属性指定当前位置要插入的图像文件,标记还有alt、

关于JavaScript DOM的学习总结

关于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

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;

javascript_dom

什么是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文档: DOM Tutorial

DOM Lesson one

Hello world! 上面所有的节点彼此间都存在关系。 除文档节点之外的每个节点都有父节点。举例, 和的父节点是节点,文本节点"Hello world!"的父节点是节点。 大部分元素节点都有子节点。比方说,节点有一个子节点:节点。<title>节点也有一个子节点:文本节点"DOM Tutorial"。 当节点分享同一个父节点时,它们就是同辈(同级节点)。比方说,<h1>和是同辈,因为它们的父节点均是<body>节点。 节点也可以拥有后代,后代指某个节点的所有子节点,或者这些子节点的子节点,以此类推。比方说,所有的文本节点都是<html>节点的后代,而第一个文本节点是<head>节点的后代。 节点也可以拥有先辈。先辈是某个节点的父节点,或者父节点的父节点,以此类推。比方说,所有的文本节点都可把<html>节点作为先辈节点。</p><h2>JavaScript对Table操作大全</h2><p>js对Table操作大全 <html> <head> <style> .btf{ height:28px; background-color:#F8F0E1; } </style> <script type="text/javascript"> var objTable; function PageLoad(){ objTable = document.getElementById( "dataGrid" );//找到操作Table } function copyRow(){ var objTempRow = objTable.rows[2];//找到Table的模版行 var objNewRow = objTable.insertRow( objTable.rows.length );//在Table 的末尾新增一行 objNewRow.className = "btf";//给表格的添加行样式 objNewRow.id = objTable.rows.length - 1; //以模版行建立新行内容 for ( var i=0 ; i<objTempRow.cells.length ; i++ ){ var objNewCell = objNewRow.insertCell( i ); objNewCell.innerHTML = objTempRow.cells[i].innerHTML; } } function deletelastRow(){ if ( objTable.rows.length -1 > 0 ){ objTable.deleteRow(objTable.rows.length-1); //删除指定行} } function deletecheckedRow(){ if(document.all('idarray').value!='undefined'){ for(var i=document.all('idarray').length-1;i>-1;i--){ if(document.all('idarray')[i].checked==true){ var r=Number(document.getElementById('tb'+document.all('idarray')[i].value) .rowIndex); objTable.deleteRow(r); } } } } function deleteRow(r){ var i=r.parentNode.parentNode.rowIndex; objTable.deleteRow(i); } function addRow1(){ var crTR = objTable.insertRow(); //增加一行 var crTDa = crTR.insertCell();//第一个TD var crTDb = crTR.insertCell();//第二个TD,带rowspan=2 crTDb.rowSpan=2;//设成rowspan=2; crTDb.colSpan=3;//设成colSpan=3;</p><h2>使用phantomjs操作DOM并对页面进行截图需要注意的几个问题</h2><p>使用phantomjs操作DOM并对页面进行截图需要注意的几个问题 phantomjs是一个无界面浏览器,可用于网页截图和前端自动化测试,基于webkit 内核(也就是chrome使用的内核),并使用js编写业务脚本来请求、浏览和操作页面。最近前端监控需要用到phantomjs,特地研究了一下这个组件,遇到几个坑,这里汇总起来,希望对大家尤其是刚入门者有所帮助。 1、如何操作页面中的DOM元素? 这个问题比较简单,官方API提供了page.evaluate函数,范例代码: page.evaluate(function() { var plist = document.querySelectorAll("a");//获取所有链接 }); 2、如何滚动到页面底部? 部分页面使用了lazyload,比如图片或js的延迟加载,只有滚动到底部才会触发,因此对于这种页面,如果要展示完整的页面,则需设法使底部可见,主要有3个办法: 1、使浏览器足够大,这样底部就显示了,可以设置viewPortSize很大:page.viewportSize = {width: 4800,height: 8000}; 2、通过BOM方法操作滚动条,可以把滚动条滚动到一个很大的值,如:window.scrollTo(0,10000);也可以滚动到适应的高度:window.document.body.scrollTop = document.body.scrollHeight; 3、如何延迟截图? 页面请求的资源,如图片、异步cgi、js等,返回的时间以及执行的长短都是不确定的,如果截图过早,可能很多空白区域,因此需要定时截图,在打开页面后,使用setTimeout来延迟截图: window.setTimeout(function () { page.render("json2form.png"); phantom.exit(); }, 1000);</p><h2>Javascript_DOM编程艺术翻译版</h2><p>第3章DOM 本章内容 ● 节点的概念 ●四个非常实用的DOM方法:getElementById、getElementsByTagName、getAttribute 和setAttribute 终于要与DOM面对面了。能够向大家介绍DOM是笔者的荣幸,我非常乐于带领大家通过DOM的眼睛去看世界。 3.1文档:DOM中的“D” DOM是“Document Object Model”(文档对象模型)的首字母缩写。如果没有document(文档),DOM也就无从谈起。当创建了一个网页并把它加载到Web 浏览器中时,DOM就在幕后悄然而生。它将根据你编写的网页文档创建一个文档对象。 在人类语言中,“对象”这个词的含义往往不那么明确和具体,它几乎可以用来称呼任何一种客观存在的事物。但在程序设计语言中,“对象”这个词的含义非常明确和具体。 3.2对象:DOM中的“O” 在上一章的末尾,我们向大家展示了几个JavaScript对象的例子。你们应该还记得,“对象”是一种独立的数据集合。与某个特定对象相关联的变量被称为这个对象的属性;可以通过某个特定对象去调用的函数被称为这个对象的方法。 JavaScript语言里的对象可以分为三种类型: ●用户定义对象(user-defined object):由程序员自行创建的对象。本书不讨论这种对象。 ●内建对象(native object):内建在JavaScript语言里的对象,如Array、Math和Date 等。</p><p>●宿主对象(host object):由浏览器提供的对象。 在JavaScript语言的发展初期,程序员在编写JavaScript脚本时经常需要用到一些非常重要的宿主对象,它们当中最基础的是window对象。 window对象对应着浏览器窗口本身,这个对象的属性和方法通常被统称为B OM(浏览器对象模型)——但我觉得称之为Window Object Model(窗口对象模型)更为贴切。BOM向程序员提供了window.open和window.blur等方法,你们在上网冲浪时看到的各种弹出窗口和下拉菜单——其数量之多已经到了泛滥成灾的地步——几乎都是由这些方法负责创建和处理的。难怪JavaScript会有一个不好的名声! 值得庆幸的是,在这本书里我们不需要与BOM打太多的交道。我们将把注意力集中在浏览器窗口的内部而不是浏览器窗口本身。我们将着重探讨如何对网页的内容进行处理,而用来实现这一目标的载体就是document对象。 在本书的后续内容里,我们将尽可能地只讨论document对象的属性和方法。 现在,我们已经对DOM中的字母“D”(document,文档)和字母“O”(ob ject,对象)做了解释,那么字母“M”又代表着什么呢? 3.3模型:DOM中的“M” DOM中的“M”代表着“Model”(模型),但说它代表着“Map”(地图)也未尝不可。模型也好,地图也罢,它们的含义都是某种事物的表现形式。就像一个模型火车代表着一列真正的火车、一张城市街道图代表着一个实际存在的城市那样,DOM代表着被加载到浏览器窗口里的当前网页:浏览器向我们提供了当前网页的地图(或者说模型),而我们可以通过JavaScript去读取这张地图。 既然是地图,就必须有诸如方向、等高线和比例尺之类的记号。要想看懂和使用地图,就必须知道这些记号的含义和用途——这个道理同样适用于DOM。要想从DOM获得信息,我们必须先把各种用来表示和描述一份文档的记号弄明白。</p><h2>js和DOM的区别</h2><p>JavaScript和HTML DOM的区别与联系区别: javascript JavaScript 是因特网上最流行的浏览器脚本语言。很容易使用!你一定会喜欢它的! JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用。 HTML DOM HTML DOM 是 W3C 标准(是 HTML 文档对象模型的英文缩写,Document Object Model for HTML)。 HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法。 通过 DOM,可以访问所有的 HTML 元素,连同它们所包含的文本和属性。可以对其中的内容进行修改和删除,同时也可以创建新的元素。 HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。 联系: 通过 JavaScript,您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。 要改变页面的某个东西,JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口,连同对 HTML 元素进行添加、移动、改变或移除的方法和属性,都是通过文档对象模型来获得的(DOM)。 Javascript主要是利用HTML DOM去获得、改变、创建HTML元素,从而达到美化页面、操作页面元素的目标。因此,在Javascript中最常见的就是各种各样的HTML DOM元素以及它们各自的属性。除了这些DOM元素外,Javascript有自己的对象,例如数组。 简单说,可以认为Javascript主要是操纵HTML DOM。两者是不一样的。Javascript是语言,DOM是可以在各种语言中(不仅js,php也有的)动态修改文档的模型。 下面单独拉出JavaScript与DOM的关系给大家详解</p><h2>第二十一讲 JavaScript HTML DOM 对象(二)</h2><p>第二十一讲 JavaScript HTML DOM 对象(二) 一、HTML DOM 对象概述 HTML 文档对象模型(HTML Document Object Model)定义了访问和处理 HTML 文档的标准方法。通过 JavaScript可以重构整个 HTML 文档。包括添加、移除、改变或重排页面上的项目。 要改变页面的某个东西,JavaScript 就需要对 HTML 文档中所有元素进行访问的入口。这个入口,连同对 HTML 元素进行添加、移动、改变或移除的方法和属性,都是通过文档对象模型来获得的。 在 1998 年,W3C 发布了第一级的 DOM 规范。DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。这个规范允许访问和操作 HTML 页面中的每一个单独的元素。目前所有的浏览器都执行了这个标准,因此,DOM 的兼容性问题也几乎难觅踪影了。 1.相关概念 1节点 DOM 是这样规定的:整个文档是一个文档节点;每个 HTML 标签是一个元素节点;包含在 HTML 元素中的文本是文本节点;每一个 HTML 属性是一个属性节点;注释属于注释节点。 因此根据 DOM的规定,我们可以认为在HTML 文档中的每个成分都是一个节点。 2Node 层次 节点彼此都有等级关系。HTML 文档中的所有节点组成了一个文档树(或节点树)。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点,并由此继续伸出枝条,直到处于这棵树最低级别的所有文本节点为止。 下面这个图片表示一个文档树(节点树): 3文档树(节点数) 请看下面这个HTML文档:</p><h2>基于javascript实现表格的简单操作</h2><p>这篇文章主要为大家详细介绍了基于javascript实现表格的简单操作,具有一定的参考价值,感兴趣的朋友可以参考一下 本文实例为大家分享了js表格操作的简单方法,供大家参考,具体内容如下 代码如下: <!DOCTYPE html> <html>   <head>     <meta charset="utf-8" />     <title>zzzz</title>     <style>       *{         margin: 0;         padding: 0;       }       body{         width: 1000px;         margin: 100px auto;         font-family: "微软雅黑";         font-size: 18px;         background-color: #fff;       }       #table tr{         text-align: center;       }       tbody tr:nth-child(2n+1){         background-color: #ccc;       }       tbody tr:hover{         background-color: green;       }       input[type=text]{         height: 25px;         width: 136px;         background-color: turquoise;         margin-bottom: 10px;       }     </style>     <script type="text/javascript">       window.onload=function(){         var otb=document.getElementById("table");         var otr=otb.tBodies[0].rows;         var oadd=document.getElementById("add");</p><h2>关于JavaScript与HTML的交互事件</h2><p>关于JavaScript与HTML的交互事件 JavaScript和HTML的交互是通过事件实现的。JavaScript采用异步事件驱动编程模型,当文档、浏览器、元素或与之相关对象发生特定事情时,浏览器会产生事件。如果JavaScript 关注特定类型事件,那么它可以注册当这类事件发生时要调用的句柄。 事件流 事件流描述的是从页面中接收事件的顺序,比如有两个嵌套的div,点击了内层的div,这时候是内层的div先出发click事件还是外层先触发?目前主要有三种模型 IE的事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的元素Netscape的事件捕获:不太具体的节点更早接收事件,而最具体的元素最后接收事件,和事件冒泡相反 DOM事件流:DOM2级事件规定事件流包括三个阶段,事件捕获阶段,处于目标阶段,事件冒泡阶段,首先发生的是事件捕获,为截取事件提供机会,然后是实际目标接收事件,最后是冒泡句阶段。 Opera、Firefox、Chrome、Safari都支持DOM事件流,IE不支持事件流,只支持事件冒泡如有以下html,点击div区域</p><p>事件处理程序(handler) 我们也称之为事件侦听器(listener),事件就是用户或浏览器自身执行的某种动作。比如click、load、moseover等,都是事件类型(俗称事件名称),而响应某个事件的方法就叫做事件处理程序或者事件监听器或者事件句柄,事件处理程序名字是:on+事件类型。 了解了这些,我们看看如何给元素添加事件处理程序 HTML事件处理程序元素支持的每个事件都可以使用一个相应事件处理程序同名的HTML属性指定。这个属性的值应该是可以执行的JavaScript代码,我们可以为一个button添加click 在HTML事件处理程序中可以包含要执行的具体动作,也可以调用在页面其它地方定义的脚本,刚才的例子可以写成这样 在HTML中指定事件处理程序书写很方便,但是有两个缺点。 首先,存在加载顺序问题,如果事件处理程序在html代码之后加载,用户可能在事件处理程序还未加载完成时就点击按钮之类的触发事件,存在时间差问题。 其次,这样书写html代码和JavaScript代码紧密耦合,维护不方便。 JavaScript指定事件处理程序通过JavaScript指定事件处理程序就是把一个方法赋值给一个元素的事件处理程序属性。每个元素都有自己的事件处理程序属性,这些属性名称通常为小写,如onclick等,将这些属性的值设置为一个方法,就可以指定事件处理程序,如下</p><h2>javascriptDom节点API个人总结</h2><p>原生JS中DOM节点相关API合集 节点属性 Node.nodeName //返回节点名称,只读 Node.nodeType //返回节点类型的常数值,只读 Node.nodeValue //返回Text或Comment节点的文本值,只读 Node.textContent //返回当前节点和它的所有后代节点的文本内容,可读写 Node.baseURI //返回当前网页的绝对路径 Node.ownerDocument //返回当前节点所在的顶层文档对象,即document Node.nextSibling //返回紧跟在当前节点后面的第一个兄弟节点 Node.previousSibling //返回当前节点前面的、距离最近的一个兄弟节点 Node.parentNode //返回当前节点的父节点 Node.parentElement //返回当前节点的父Element节点 Node.childNodes //返回当前节点的所有子节点 Node.firstChild //返回当前节点的第一个子节点 https://www.wendangku.net/doc/1416691756.html,stChild //返回当前节点的最后一个子节点 //parentNode接口 Node.children //返回指定节点的所有Element子节点 Node.firstElementChild //返回当前节点的第一个Element子节点 https://www.wendangku.net/doc/1416691756.html,stElementChild //返回当前节点的最后一个Element子节点 Node.childElementCount //返回当前节点所有Element子节点的数目。 操作 Node.appendChild(node) //向节点添加最后一个子节点 Node.hasChildNodes() //返回布尔值,表示当前节点是否有子节点 Node.cloneNode(true); // 默认为false(克隆节点), true(克隆节点及其属性,以及后代) Node.insertBefore(newNode,oldNode) // 在指定子节点之前插入新的子节点 Node.removeChild(node) //删除节点,在要删除节点的父节点上操作 Node.replaceChild(newChild,oldChild) //替换节点 Node.contains(node) //返回一个布尔值,表示参数节点是否为当前节点的后代节点。 https://www.wendangku.net/doc/1416691756.html,pareDocumentPosition(node) //返回一个7个比特位的二进制值,表示参数节点和当前节点的关系 Node.isEqualNode(noe) //返回布尔值,用于检查两个节点是否相等。所谓相等的节点,指的是两个节点的类型相同、属性相同、子节点相同。 Node.normalize() //用于清理当前节点内部的所有Text节点。它会去除空的文本节点,并且将毗邻的文本节点合并成一个。 //ChildNode接口 Node.remove() //用于删除当前节点 Node.before() // Node.after() Node.replaceWith()</p><h2>HTML&JavaScript编程笔试题(前端)</h2><p>测试题(笔试)HTML&JavaScript</p><p>不定项选择题(共50题,每题2分,总分100分) 1) 下面关于JavaScript语言正确的是(b)。(单选) a) JavaScript在运行之前需要手工编译 b) JavaScript是能在浏览器里面运行的脚本语言 c) JavaScript是Java语言的一个分支 d) JavaScript是服务器端的脚本语言 2) JavaScript包含在一个(X)HTML文档中的方法主要有(a,b,c,d)。(多 选) a) 使用script元素在XHTML中直接嵌入JavaScript语句 b) 将JavaScript源文件通过script元素的src属性链接到XHTML文档 c) 使用伪URL方式加入到超链接 d) 脚本包含在XHTML事件处理程序属性中 3) 不属于JavaScript数据类型的是(d)。(单选) a) Number b) Undefined c) String d) Float 4) 下面语句中那些可以创建一个数组(ac)。(多选) a) var array=new Array(); b) var array={…a?,?b?,1}; c) var array=[…1?,?a?,4]; d) var array=(…1?,2,3); 5) function justTest(num){ if(num>3){ return num+1; } } var result=justTest(2); result的值是(e)(单选) a) 3 b) 程序出错 c) Null d) 4 e) Undefined</p><h2>JS操作DOM元素属性和方法</h2><p>JS操作DOM元素属性和方法 Dom元素基本操作方法API,先记录下,方便以后使用。 W3C DOM和JavaScript很容易混淆不清。DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构。JavaScript则是用于访问和处理DOM的语言。如果没有DOM,JavaScript根本没有Web页面和构成页面元素的概念。文档中的每个元素都是DOM的一部分,这就使得JavaScript可以访问元素的属性和方法。 DOM独立于具体的编程语言,通常通过JavaScript访问DOM,不过并不严格要求这样。可以使用任何脚本语言来访问DOM,这要归功于其一致的API。表3-1列出了DOM元素的一些有用的属性,表3-2列出了一些有用的方法。 表3-1用于处理XML文档的DOM元素属性 属性名描述 childNodes返回当前元素所有子元素的数组 firstChild返回当前元素的第一个下级子元素 lastChild返回当前元素的最后一个子元素 nextSibling返回紧跟在当前元素后面的元素 nodeValue指定表示元素值的读/写属性 parentNode返回元素的父节点 previousSibling返回紧邻当前元素之前的元素 表3-2用于遍历XML文档的DOM元素方法 方法名描述 getElementById(id) (document) 获取有指定惟一ID属性值文档中的元素getElementsByTagName(name) 返回当前元素中有指定标记名的子元素的数组hasChildNodes() 返回一个布尔值,指示元素是否有子元素 getAttribute(name) 返回元素的属性值,属性由name指定 有了W3C DOM,就能编写简单的跨浏览器脚本,从而充分利用XML的强大功能和灵活性,将XML作为浏览器和服务器之间的通信介质。 从下面的例子可以看到,使用遵循W3C DOM的JavaScript来读取XML文档是何等简单。代码清单3-3显示了服务器向浏览器返回的XML文档的内容。这是一个简单的美国州名列表,各个州按地区划分。 表3-3 动态创建内容时所用的W3C DOM属性和方法 属性/方法描述 document.createElement(tagName) 文档对象上的createElement方法可以创建由tagName指</p></div> </div> <div> <div>相关文档</div> <div class="relatedtopic"> <div id="tabs-section" class="tabs"> <ul class="tab-head"> <li id="16321255"><a href="/topic/16321255/" target="_blank">javascript操作dom</a></li> </ul> </div> </div> </div> </div> <div class="category"> <span class="navname">相关文档</span> <ul class="lista"> <li><a href="/doc/fc7115082.html" target="_blank">JavaScript精品教程资料:2.JavaScript操作BOM对象</a></li> <li><a href="/doc/0516494816.html" target="_blank">网页设计与制作项目教程(HTML+CSS+JavaScript)(一般)</a></li> <li><a href="/doc/3312746801.html" target="_blank">《HTML CSS JAVASCRIPT网页制作案例教程》_教学大纲</a></li> <li><a href="/doc/9b6822803.html" target="_blank">第二十一讲 JavaScript HTML DOM 对象(二)</a></li> <li><a href="/doc/d218630804.html" target="_blank">javascriptDom节点API个人总结</a></li> <li><a href="/doc/2412768553.html" target="_blank">JAVASCRIPT</a></li> <li><a href="/doc/4c10232950.html" target="_blank">Javascript_DOM编程艺术翻译版</a></li> <li><a href="/doc/bb5167977.html" target="_blank">JavaScript精品教程资料:3.JavaScript操作DOM对象</a></li> <li><a href="/doc/f76323061.html" target="_blank">原生jsDOM节点操作集合</a></li> <li><a href="/doc/0515318976.html" target="_blank">《HTML CSS JavaScript网页制作案例教程》_教学大纲讲解</a></li> <li><a href="/doc/3512194254.html" target="_blank">使用phantomjs操作DOM并对页面进行截图需要注意的几个问题</a></li> <li><a href="/doc/7113479930.html" target="_blank">JavaScript操作HTML文档</a></li> <li><a href="/doc/c516752746.html" target="_blank">《HTML+CSS+JavaScript网页制作案例教程》_教学大纲</a></li> <li><a href="/doc/f017143184.html" target="_blank">DOM节点操作的练习及答案</a></li> <li><a href="/doc/1414559725.html" target="_blank">关于JavaScript DOM的学习总结</a></li> <li><a href="/doc/405402470.html" target="_blank">HTMLCSSJavaScript教学教案讲解</a></li> <li><a href="/doc/b1979037.html" target="_blank">JAVASCRIPT DOM编程艺术</a></li> <li><a href="/doc/e418087210.html" target="_blank">JS操作DOM元素属性和方法</a></li> <li><a href="/doc/0b8855129.html" target="_blank">4:JavaScriptjavaDOM</a></li> <li><a href="/doc/371305190.html" target="_blank">JavaScript对Table操作大全</a></li> </ul> <span class="navname">最新文档</span> <ul class="lista"> <li><a href="/doc/9219165449.html" target="_blank">湖南高考满分作文(10篇)</a></li> <li><a href="/doc/9e19165447.html" target="_blank">湖南高考满分作文范文(5篇)</a></li> <li><a href="/doc/6419016182.html" target="_blank">高考湖南语文作文题优秀范文</a></li> <li><a href="/doc/5f19338733.html" target="_blank">历年湖南高考优秀语文作文800字7篇</a></li> <li><a href="/doc/4619212820.html" target="_blank">湖南高考满分作文15篇</a></li> <li><a href="/doc/4919212821.html" target="_blank">湖南高考满分作文13篇</a></li> <li><a href="/doc/1119318911.html" target="_blank">湖南高考满分作文(通用20篇)</a></li> <li><a href="/doc/0a19490446.html" target="_blank">2021年湖南高考作文范文优秀范文</a></li> <li><a href="/doc/f119253923.html" target="_blank">浅谈给排水施工技术及其施工质量控制措施 刘淳</a></li> <li><a href="/doc/fd19253924.html" target="_blank">浅析自来水给排水管道施工技术</a></li> <li><a href="/doc/d519192787.html" target="_blank">浅谈建筑给排水施工中的安全及质量管理问题</a></li> <li><a href="/doc/d119192788.html" target="_blank">浅谈建筑给排水管道的安装施工技术 邢颖</a></li> <li><a href="/doc/cb19078956.html" target="_blank">浅谈港口建筑给排水施工技术要点</a></li> <li><a href="/doc/bb19139947.html" target="_blank">浅谈港口建筑给排水施工技术要点</a></li> <li><a href="/doc/aa19221444.html" target="_blank">浅谈建筑给排水施工中的安全及质量管理问题</a></li> <li><a href="/doc/9219165443.html" target="_blank">浅谈高层建筑给排水施工技术要点</a></li> <li><a href="/doc/7119317782.html" target="_blank">浅谈建筑给排水施工中的安全及质量管理问题</a></li> <li><a href="/doc/6a19016181.html" target="_blank">浅谈建筑给排水施工中的安全及质量管理问题</a></li> <li><a href="/doc/6519016179.html" target="_blank">浅谈建筑工程给排水施工 许千1</a></li> <li><a href="/doc/6519016180.html" target="_blank">浅谈建筑给排水施工中的安全及质量管理问题</a></li> </ul> </div> </div> <script> var sdocid = "1dd8c6f24693daef5ef73d76"; </script> <div class="footer"> <p><a href="/tousu.html" target="_blank">侵权投诉</a>  © 2013-2023 www.wendangku.net  <a href="/sitemap.html">站点地图</a> | <a href="https://m.wendangku.net">手机版</a></p> <p><a href="https://beian.miit.gov.cn" target="_blank">闽ICP备11023808号-7</a>  本站文档均来自互联网及网友上传分享,本站只负责收集和整理,有任何问题可通过上访投诉通道进行反馈</p> </div> <script type="text/javascript">foot();</script> </div> </body> </html>