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的关系给大家详解
JavaScript与浏览器的工作
1.浏览器获取并加载你的页面,从上至下解析它的内容。
遇到JavaScript时,浏览器会解析代码,检查它的正确性,然后执行代码。
浏览器还会建立一个HTML页面的内部模型(DOM)。
2.JavaScript继续执行,使用DOM检查页面、完成修改、从页面接受事件,或者要求浏览器从Web服务器获取其它数据。
JavaScript如何与页面交互?
JavaScript是代码,HTML是标记,完全不同的东西
怎么让它们交互呢?
答案是使用文档对象模型(Docunment Object Model,简称DOM)。
DOM的妙处在于:它能够在所有浏览器上提供一种一致的方式,通过代码访问HTML的结构和内容。
1、在浏览器加载一个页面时,浏览器会解析HTML,并创建文档的一个内部模型,其中包含HTML标记的所有元素。
2、JavaScript可以与DOM交互(JavaScript使用DOM创建或删除元素等等)
document是一个反映HTML的对象,通过调用document的方法改变DOM的状态,也就是改变HTML页面
3、JavaScript修改了DOM时,浏览器会随着动态更新页面。
自制DOM
材料:格式正确的HTML5页面,WEB浏览器
做法:
1、在最上面创建一个document节点
2、取HTML页面的最顶层元素,在这里就是元素,把它作为document 的子节点加到DOM中
3、对于当前元素中嵌套的每一个元素,将该元素作为当前元素的子节点增加到DOM
4、对于刚增加的元素,执行第三步,重复工作,直到处理完所有元素HTML页面如下
1 2 3 4 5 6 7 8 9
10
11
12
13
14
15
16
17
Today, I am making a dom!!!
得到的DOM如下图
_____________________________________________________________________ _______________________________________________
文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来。
下面是来自w3c的解释:
DOM 是 W3C(万维网联盟)的标准。
DOM 定义了访问 HTML 和 XML 文档的标准:
“W3C 文档对象模型(DOM)是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分:
核心 DOM - 针对任何结构化文档的标准模型
?XML DOM - 针对 XML 文档的标准模型
?HTML DOM - 针对 HTML 文档的标准模型
编者注:DOM 是 Document Object Model(文档对象模型)的缩写。
什么是 XML DOM?
XML DOM 定义了所有 XML 元素的对象和属性,以及访问它们的方法。
什么是 HTML DOM?
HTML DOM 是:
?HTML 的标准对象模型
?HTML 的标准编程接口
?W3C 标准
HTML DOM 定义了所有 HTML 元素的对象和属性,以及访问它们的方法。
换言之,HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
下面说的dom实际上指的是html dom。
脚本开发人员可以通过文档对象的属性、方法和事件来掌控、操纵和创建动态的网页元素。每一个网页元素(一个HTML标签)都对应着一个对象(object,所谓“对象”,用白话说就是“东西”。object这个词在台湾通常翻译成“物件”)。网页上的标签是一层层嵌套的,最外面的一层是,文档对象模型也这样一层层嵌套着,但是通常被理解成一棵树的形状。树根是window或document对象,相当于最外层的标签的外围,也就是整个文档。树根之下(这
棵树的图通常是倒着画,就好像遗传谱系或者家谱那样。树根就是唯一的共同祖先)是子一级的对象,子对象也有它自己的子对象,除了根对象以外,所有的对象都有自己的父对象,同一对象的子对象之间就是兄弟的关系。
在这种由“父子兄弟”组成的“单性繁殖家族图谱树”框架结构中,每个网页元素都可以被确切地定位。文档对象模型把整张网页组织成这样的一个树状的结构,树结构中的每一个元素都被视为一个节点(node)。包括JavaScript在内的各种编程语言都可以通过文档对象模型来访问和改变网页的各种细节。
万维网协会(World Wide Web Consortium,W3C)已经给文档对象模型制定了一系列标准,并且正在制定更多的相关标准。当代的浏览器除支持其中的一部分标准之外,还支持某些早在W3C标准制定以前就流行了的历史既成的编程接口。也就是说现在浏览器使用的技术历史由来纷繁复杂,有些人们普遍使用的DOM技术并无标准可依。
我们将深入所有通用DOM的细节(包括IE浏览器中“与众不同”的某些技术),以全面掌握面向实践的技术。
DOM和JavaScript
我们用JavaScript对网页进行的所有操作都是通过DOM进行的。DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容,所以如果你下载一个JavaScript语言的参考帮助文档来查的话,就连妇孺皆知的document.write方法也找不到。
下面这段代码的作用是用一个提示框逐个显示网页中所有链接的网址,代码中被标为红色的部分就是DOM。
varanchorTags = document.getElementsByTagName("a");
for (vari = 0; i { alert("Href of this a element is : " + anchorTags[i].href + "/n"); } 这样一来哪些是核心JavaScript,哪些是DOM,各自起什么作用,就可以一目了然了。 varanchorTags = 创建了一个名为 anchorTags 的 JavaScript 变量。 document.getElementsByTagName("a") Document接口是 DOM1核心(DOM1 Core)规范中定义的第一个接口,而 document 是实现了Document接口的一个宿主对象。document掌控着网页里的所有东西。DOM1核心为Document 接口定义了 getElementsByTagName() 方法。这个方法返回一个节点列表(NodeList),也就是一种DOM特有的包含节点的数组,包含了所有符合匹配参数条件的标签,按照在文档中出现的顺序排列。于是anchorTags变量现在就成了一个节点列表。 ; 分号是JavaScript里的语句结束符号。 for (vari = 0; i< 这是编程语言里典型的“for循环”。声明了循环变量i,逐个处理anchorTags 节点列表里的每一个节点。这也是JavaScript的东西。 anchorTags.length DOM1 核心定义了NodeList接口的 length 属性。这个属性返回一个整数,就是节点列表里包含的节点数目。说起来JavaScript 的数组也有一个 length属性。 ; i++) { 典型的JavaScript变量增1运算。 alert( alert() 是一个DOM方法,弹出一个提示框,显示传递给该方法的参数(字符串)。话说这个东西是通称 0级DOM(DOM level 0)或DOM0的一些历史既成的编程接口当中的一员。DOM0 是一套“被某些浏览器所支持”的编程接口(事实上,市场上不存在不支持DOM0的浏览器,只有在某些软件爱好者的收藏品中才能见得到),不属于任何DOM标准规范。 "Href of this a element is : " + 一个字符串字面量和一个字符串链接符。JavaScript的东西。 anchorTags[i].href href 是 DOM1 HTML 规范中定义的 HTMLAnchorElement 接口的属性,返回链接()元素的href属性的值。 在此我们用了像anchorTags[i]这样的用法,这和JavaScript里访问第i个数组项的语法是一样的。语言中性(language-neutral,与具体语言无关)的所谓“DOM方式”访问某个节点列表中的一个项目的办法是使用在NodeList接口中定义的item() 方法:anchorTags.item(1).href。但是大多数JavaScript实现程序都允许你使用这种简单的类似于数组的语法,而这也是大多数人实际在用的方式。 + "/n"); 又一个字符串连接。在字符串的末尾加入一个回车符。 } “for循环”结束。 jquery案例 jquery案例1.如何创建嵌套的过滤器: 1.//允许你减少集合中的匹配元素的过滤器, 2.//只剩下那些与给定的选择器匹配的部分。在这种情况下, 3.//查询删除了任何没(:not)有(:has) 4.//包含class为“selected”(.selected)的子节点。 5..filter(":not(:has(.selected))") jquery案例2.如何重用元素搜索 1.var allItems=$("div.item"); 2.var keepList=$("div#container1div.item"); 3.//现在你可以继续使用这些jQuery对象来工作了。例如, 4.//基于复选框裁剪“keep list”,复选框的名称 5.//符合 6.50个实用的JQUERY案例
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文档基本格式
看看面试题,只是为了查漏补缺,看看自己那些方面还不懂。切记不要以为背了面试题,就万事大吉了,最好是理解背后的原理,这样面试的时候才能侃侃而谈。 不然,稍微有水平的面试官一看就能看出,是否有真才实学还是刚好背中了这道面试题。 一、对于MVVM的理解? MVVM 是Model-View-ViewModel 的缩写。 ?Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑。 ?View代表UI 组件,它负责将数据模型转化成UI 展现出来。 ?ViewModel监听模型数据的改变和控制视图行为、处理用户交互,简单理解就是一个同步View 和Model的对象,连接Model和View。 在MVVM架构下,View 和Model 之间并没有直接的联系,而是通过ViewModel 进行交互,Model 和ViewModel 之间的交互是双向的,因此View 数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上。 ViewModel通过双向数据绑定把View 层和Model 层连接了起来,而View 和Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作DOM,不需要关注数据状态的同步问题,复杂的数据状态维护完全由MVVM 来统一管理。 二、Vue的生命周期 beforeCreate(创建前),在数据观测和初始化事件还未开始 created(创建后),完成数据观测,属性和方法的运算,初始化事件,$el 属性还没有显示出来 beforeMount(载入前),在挂载开始之前被调用,相关的render函数首次被调用。实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。 注意此时还没有挂载html到页面上。 mounted(载入后),在el 被新创建的vm.$el 替换,并挂载到实例上去之后调用。实例已完成以下的配置:用上面编译好的html内容替换el属性指向的DOM 对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。 beforeUpdate(更新前),在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程。
《网页设计与制作项目教程()(一般)》试卷 得分 一、单选题(每题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鼠标事件 ------------------------------------------------------------------------------- onblur 事件:当鼠标失去焦点后执行 https://www.doczj.com/doc/6714283965.html,/htmldom/event_onblur.asp https://www.doczj.com/doc/6714283965.html,/question/60621120.html onblur 事件会在对象失去焦点时发生 例如:我们将在用户离开输入框时执行 JavaScript 代码: ------------------------------------------------------------------------------- onclick 事件:单击鼠标左键后执行 https://www.doczj.com/doc/6714283965.html,/htmldom/event_onclick.asp ------------------------------------------------------------------------------- ondblclick 事件:双击鼠标左键后执行 https://www.doczj.com/doc/6714283965.html,/htmldom/event_ondblclick.asp ------------------------------------------------------------------------------- onfocus 事件:事件在对象获得焦点时发生。 https://www.doczj.com/doc/6714283965.html,/htmldom/event_onfocus.asp ------------------------------------------------------------------------------- onkeydown 事件:事件会在用户按下一个键盘按键时发生。 https://www.doczj.com/doc/6714283965.html,/htmldom/event_onkeydown.asp ------------------------------------------------------------------------------- onkeypress 事件:onkeypress 事件会在键盘按键被按下并释放一个键时发生。https://www.doczj.com/doc/6714283965.html,/htmldom/event_onkeypress.asp ------------------------------------------------------------------------------- onKeyUp 事件:事件会在键盘按键被松开时发生。 https://www.doczj.com/doc/6714283965.html,/htmldom/event_onkeyup.asp 敲入一个a弹出一个a 敲入一个a弹出一个空。再敲入一个s弹出一个a 。再敲入一个s弹出一个sa ------------------------------------------------------------------------------- onmousedown 事件:事件会在鼠标按键被按下时发生。 https://www.doczj.com/doc/6714283965.html,/htmldom/event_onmousedown.asp
网上客服培训考核 ---阶段二HTML标签和JavaScript脚本 试题类型:HTML标签和JavaScript脚本 考核类型:开卷
1. HTML(Hypertext Markup Language超文本标记语言)是一种用来制作超文本文 档的简单标记语言。利用各种标记(tags)来标识文档的结构以及标识超链(Hyperlink)的信息 2.HTML的标记总是封装在由 < 和 > 构成的一对尖括号之中。 除少数几个转义序列之外,HTML标记忽略大小写,即
事件机制 1.什么是事件? a)在文档中,可以被识别的控件的操作就是事件。鼠标的点击, 单击双击。。鼠标经过移出,键盘按下等。。。 2.事件流? a)在文档中事件执行的顺序就是事件流。 微软公司提出事件的流程应该为冒泡流。 网景公司提出事件的流程应该为捕获流。 W3C为了平衡事件流机制,制订了标准的事件流。 第一阶段:事件流的捕获阶段
第二阶段:处于事件阶段 第三阶段:事件流的冒泡阶段 关于浏览器的问题: 关于标准的事件流,并不是所有的浏览器都能够很好的支持。 能支持标准时间流的浏览器为:IE9+、chrome、firefox、safari、opera,低版本IE678等只支持冒泡流 毋须担心,因为大部分常用事件都是处于冒泡流。 如何添加或者注册事件以及事件的取消: DOM0阶段(无标准阶段) 注册事件 方法1:在HTML中使用事件相关属性 例如:
该方法对于使用DOM0的2中事件添加方法都可以取消。DOM2阶段 注册事件 IE浏览器 attachEvent()方法 格式:元素节点.attachEvent(事件名,事件的执行方法); 参数1:书写时必须是字符串,而且必须有on 参数2:执行事件的方法,要求如果需要删除的情况下必须写声明函数,只有确认不需要删除的情况下才可以使 用匿名函数。推荐使用声明函数 非IE浏览器 addEventListener() 格式:元素节点.addEventListener(‘事件名’,事件的执行方法,处于事件流的阶段); 参数1:书写必须是字符串,而且不能有on 参数2:执行事件的方法,要求如果需要删除的情况下必须写声明函数,只有确认不需要删除的情况下才可以使 用匿名函数。推荐使用声明函数 参数3:设置事件发生的阶段,true捕获阶段false冒泡阶段,默认是false(推荐false) 取消事件
关于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.doczj.com/doc/6714283965.html,="JavaScript is Cool"; book.author="tom"; book.pages=514; 上面例子中的name和page就是名为book的对象中的property.我们可以用delete 来删除Object中的property:“delete https://www.doczj.com/doc/6714283965.html,;”.除了Object,Date等buildin 的对象外,我们可以写自己的constructor function,然后使用new就可以建立自己的对象.如上面的book可以写成: function Book(name,author,page){ https://www.doczj.com/doc/6714283965.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.doczj.com/doc/6714283965.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操作大全
。 10、保存为Html文件语言是_______端语言。 11、html文件中h的意思是___________.。 12、CSS的中文全称是__________________________。 13、<________ language=”javascript”>document.write(“大家好哦!”);。 14、http我们称之为_____________.。 15、http协议的缺省端口是____________。 16、单选框标记是___________________________。 17、文本框标记是__________________________。 18、javascript的标签标记是__________________。 19、表格中td标记之间必须要有_________,否则表格不能正常显示。 20、onmouseout事件是________。 21、onmouseover事件是___________。 22、onblue事件是_________________。 23、function单词的意思是____________。 14、var x;语句的功能是_________________。 25、变量b和B变量是_____________。 二、单选题。 01.()下列是javascript原文件扩展名是: A. HTML B.BODY C. js D. DIVJ a v a s c r i p t综合复习题【共116题】 每份考卷中javascript只占一半。题型和分数如下: 1.单选题:10题*1分 = 10分 2.填空题:5题*1分 = 5分 3.程序阅读题:2题*4分 = 8分 4.程序实现题:2题*5分 = 10分 5.简答题:3题*5分 = 15分 合计:48分,共22题。 剩余52分,23题是另一门课程。 【提示:本综合复习题的目的是让同学们多见识各种题目。选择题、填空题以及程序阅读题可以仔细做,对于程序实现和简答题建议先理解再记忆,切记死背答案。】 第一部分:单选题 1.Javascript中, 以下哪条语句一定会产生运行错误?答案( B ) A、var _变量=NaN; B、var 0bj = []; C、var obj = string B. length C.非法字符 2.下面哪个描述不正确( B ) A. NaN!=null ==NaN C.{}!=false !=false 3.var arr = new Array(new Array(9,0,3,4,5) , ['a' , 'b' , 'c'] , new Array(2,9,0,6));则arr[1][3]=( D ) B.6 4.有如下代码: var arr = new Array(9); arr[0]=1; arr[2]=2; 该数组的length属性值为( D ) A、2 B、10 C、8 D、9 5.有一个submit按钮,在这个按钮控件上添加哪个事件不起作用?( D ) D. onsubmit 6.有一个变量var a=typeof string + 100+50 + NaN,以下哪个是alert(a)的结果? ( C ) B. function10050NaN C. undefined10050NaN D. NaN 7.以下代码,哪个结果是正确的?( A ) var str='123abc'; str += ('abc' , ''); alert(str);
第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 等。
●宿主对象(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获得信息,我们必须先把各种用来表示和描述一份文档的记号弄明白。